Github actions를 이용한 Chrome Extension 배포

시작
과정
시행착오
- OAuth 클라이언트 ID 생성과 Refresh token 생성 과정
- Workflow YAML 작성 과정
마무리
참고

시작

alub의 Chrome Extension을 배포해야 하는 상황에서 Github actions를 통해 해보고 싶었다.

과정

Actions 선정

Chrome Extension 배포에 대한 Action들이 마켓에 여러 개 올라와 있고, 그 중 하나를 선택해야 헀다.

위 항목 중에 mnao305/chrome-extension-upload만 가장 최근까지 업데이트가 되어 있어 선택하게 되었다.

'Chrome Web Store API' 활성화(Enable)하기

Google Cloud Platform(GCP) console에 접속한다.

'API 및 서비스 > 라이브러리' 를 선택한다.

'Chrome Web Store API'를 검색하여 활성화한다.

OAuth 클라이언트 ID 생성

mnao305/chrome-extension-upload의 README.md에 링크되어 있는 How to generate Google API keys.md를 참고하여 진행하면 된다.

'API 및 서비스 > 사용자 인증 정보 > +사용자 인증 정보 만들기 > OAuth 클라이언트 ID'을 선택한다.

애플리케이션 유형으로 'Chrome 앱'을 선택하고, 애플리케이션 ID에는 배포할 Extension의 ID를 입력한다.

다음과 같이 클라이언트 ID가 생성되었다.

Refresh token 생성

코드를 얻기 위해 browser로 다음 url에 접속한다($CLIENT_ID에는 생성된 클라이언트 ID를 입력한다).

https://accounts.google.com/o/oauth2/auth?response_type=code
&scope=https://www.googleapis.com/auth/chromewebstore
&redirect_uri=urn:ietf:wg:oauth:2.0:oob&access_type=offline&approval_prompt=force
&client_id=$CLIENT_ID

다음과 같이 코드를 얻을 수 있고, 해당 코드를 복사해놓는다.

다음 curl 명령어를 통해 API를 호출한다.

curl "https://accounts.google.com/o/oauth2/token" -d \
"client_id=$CLIENT_ID&code=$CODE&grant_type=authorization_code&redirect_uri=urn:ietf:wg:oauth:2.0:oob"

응답으로 Refresh token을 얻을 수 있다.

{
  "access_token": "1q2w3e4r1q2w3e4r",
  "expires_in": 3599,
  "refresh_token": "1//0e1q2w3e4r-4r3e2w1q-1q2w3e4r",
  "scope": "https://www.googleapis.com/auth/chromewebstore",
  "token_type": "Bearer"
}

Workflow YAML 작성

workflow_dispatch keyword를 통해 workflow를 수동 실행할 수 있도록 할 수 있다.

on: workflow_dispatch

mnao305/chrome-extension-upload를 적용하여 Chrome Extension을 업로드 및 배포한다.

- name: Upload & release
  uses: mnao305/chrome-extension-upload@2.1.0
  with:
    file-path: frontend/extension/build.zip
    extension-id: 'abcdefghijklmnopqrstuvwxyzabcdef'
    client-id: ${{ secrets.GOOGLE_CLIENT_ID }}
    refresh-token: ${{ secrets.GOOGLE_REFRESH_TOKEN }}