크롬 익스텐션 스토어에 자동 배포하기

크롬 새탭 창에서 바로가기 버튼을 10개 이상 만들지 못하는 불편함을 해결하기 위해서 More Than 10 Shortcuts 라는 크롬 익스텐션을 찾아서 써봤지만, 디자인이 마음에 들지않아서 직접 만들어 보았다.

https://chromewebstore.google.com/detail/more-shortcuts-new-tab/kogaidjbbpniklkafmfbgmihfdmkjkaf?authuser=0&hl=ko

More Shortcuts New Tab - Chrome 웹 스토어

 

Claude를 활용해서 바이브코딩으로 쉽게 만들 수 있었지만, 자잘한 문제를 찾아서 업데이트 했을 때, 매번 웹스토어에 접속해서 새롭게 배포하는 것이 너무 불편했고, 이 문제를 해결하기 위해서 크롬익스텐션 배포 자동화 방법을 찾아서 적용해보았다.

 

🚨 CI/CD 적용 전 필수 주의사항

1. 최초 1회 수동 배포 필수: GitHub Actions를 통한 자동화는 이미 스토어에 등록된 항목을 업데이트하는 방식으로 최초 한 번은 크롬 웹 스토어 개발자 대시보드에 직접 zip 파일을 업로드하여 초안(Draft) 상태로 만들거나 게시해 두어야 함.
2. 버전(Version) 업데이트 필수: 코드를 수정하고 배포하기 전, 반드시 manifest.json 파일 내의 "version" 값을 기존보다 높게(예: 1.0.0 -> 1.0.1) 수정해야 업로드 충돌 에러가 발생하지 않음.

 

1. GitHub Actions 워크플로우 코드 작성

name: Deploy to Chrome Web Store

on:
  push:
    branches:
      - main
  workflow_dispatch: # 수동 실행 버튼 활성화

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Zip extension
        # 프로젝트 루트의 모든 파일을 extension.zip으로 압축 (불필요한 파일 제외)
        run: zip -r extension.zip . -x "*.git*" "*.github*" "*.DS_Store*"

      - name: Upload to Chrome Web Store
        uses: mnao305/chrome-extension-upload@v5.0.0
        with:
          client-id: ${{ secrets.CHROME_CLIENT_ID }}
          client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
          refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
          extension-id: ${{ secrets.CHROME_EXTENSION_ID }}
          file-path: extension.zip
          publish: true

 

 

2. 배포에 필요한 4가지 키(Secrets) 발급 및 등록

Step 1. CHROME_EXTENSION_ID 확인

1. 크롬 웹 스토어 개발자 대시보드에 접속.
2. 수동으로 업로드해 둔 확장 프로그램을 클릭.
3. 브라우저 주소창 URL 끝부분 또는 대시보드에 표시된 항목 ID (32자리 알파벳)이 Extension ID이다.

Step 2. Google Cloud 프로젝트 생성 및 API 설정

1. Google Cloud Console에 접속하여 새 프로젝트를 생성.
2. 왼쪽 메뉴에서 API 및 서비스 > 라이브러리로 이동.
3. Chrome Web Store API를 검색하고 [사용] 버튼을 클릭.

Step 3. OAuth 동의 화면 구성 (★리프레시 토큰 영구화)

1. API 및 서비스 > OAuth 동의 화면으로 이동.
2. User Type을 외부(External) 로 선택하고 만들기를 클릭.
3. 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보를 입력하고 저장. (범위 설정은 건너뜀.)
4. 테스트 사용자 단계에서 본인의 크롬 웹 스토어 개발자 계정 이메일을 추가하고 저장.
5. ⚠️ 중요 (7일 만료 방지): 초기 상태(테스트)에서는 토큰이 7일 뒤 만료됨. 매번 재발급하는 번거로움을 없애려면, OAuth 동의 화면 > 대상 > [앱 게시(PUBLISH APP)] 버튼을 눌러 상태를 실제 서비스(In production)로 변경. (구글의 실제 앱 검수는 받지 않아도 됨.)

Step 4. CHROME_CLIENT_ID 및 CHROME_CLIENT_SECRET 발급

1. API 및 서비스 > 사용자 인증 정보(Credentials) 로 이동.
2. [+ 사용자 인증 정보 만들기] > [OAuth 클라이언트 ID]를 선택.
3. 애플리케이션 유형을 웹 애플리케이션으로 선택.
4. 승인된 리디렉션 URI에 https://developers.google.com/oauthplayground 를 추가하고 만들기 클릭.
5. 화면에 뜬 클라이언트 ID와 클라이언트 보안 비밀 값.

Step 5. CHROME_REFRESH_TOKEN 발급

1. Google OAuth 2.0 Playground에 접속.
2. 우측 상단의 톱니바퀴 아이콘을 클릭하고 Use your own OAuth credentials를 체크.
3. Step 4에서 얻은 Client ID와 Client secret을 입력하고 닫는다.
4. 왼쪽 Step 1 입력창(Input your own scopes)에 https://www.googleapis.com/auth/chromewebstore 를 넣고 Authorize APIs를 클릭.
5. 테스트 사용자로 등록한 본인 계정으로 로그인 후 권한을 허용. (경고창이 뜨면 고급 -> 안전하지 않음으로 이동)
6. Step 2에서 파란색 Exchange authorization code for tokens 버튼을 클릭.
7. 생성된 Refresh token 값.

Step 6. GitHub Repository에 키 등록

1. 프로젝트의 GitHub 저장소 > Settings > Secrets and variables > Actions 로 이동.
2. [New repository secret] 버튼을 눌러 아래 4개의 키와 값을 각각 저장.
   • CHROME_EXTENSION_ID
   • CHROME_CLIENT_ID
   • CHROME_CLIENT_SECRET
   • CHROME_REFRESH_TOKEN

이제 main 브랜치에 코드를 푸시하면 자동으로 크롬 웹 스토어 배포가 진행됨.