👍

Chrome拡張をGitHub Actionsで自動デプロイ

2022/12/12に公開約3,100字

先日、EZTMというChrome拡張をリリースしました✨
https://qiita.com/kakudenbuzo/items/3e48714932a91f2ceb0b
今後のアップデート時の作業を効率化するためにGitHub Actionsを使って自動でデプロイを行えるようにしてみました!

前提

  • 既にChrome Web Storeに公開済みであること

つくったワークフロー

ワークフローのコードは以下です。

.github/workflows/cd.yml
name: Deploy to Chrome web store

on:
  push:
    tags:
      - "v*.*.*"
  
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:

      - name: Checkout
        uses: actions/checkout@v2

      - name: Build
        run: |
          npm ci
          npm run build

      - name: Zip dist
        uses: montudor/action-zip@v1
        with:
          args: zip -qq -r release.zip dist

      - name: Upload to Chrome Web Store
        uses: mobilefirstllc/cws-publish@latest
        with:
          action: 'upload'  # one of: upload, publish, testers
          client_id: ${{ secrets.CLIENT }}
          client_secret: ${{ secrets.SECRET }}
          refresh_token: ${{ secrets.TOKEN }}
          extension_id: 'pilidjngjpaijlblpfdncckldgecngak' 
          zip_file: 'release.zip'

何をしているか

  1. v1.0.0のようなバージョンタグがpushされた時をトリガーにしています
on:
  push:
    tags:
      - "v*.*.*"
  1. ソースコードからChrome拡張のzipファイルを作成します
- name: Checkout
        uses: actions/checkout@v2
- name: Build
        run: |
          npm ci
          npm run build
	  
- name: Zip dist
        uses: montudor/action-zip@v1
        with:
          args: zip -qq -r release.zip dist
  1. mobilefirstllc/cws-publishを使用して、Chrome Web Storeに2.で作成したzipファイルをアップロードします
- name: Upload to Chrome Web Store
        uses: mobilefirstllc/cws-publish@latest
        with:
          action: 'upload'  # one of: upload, publish, testers
          client_id: ${{ secrets.CLIENT }}
          client_secret: ${{ secrets.SECRET }}
          refresh_token: ${{ secrets.TOKEN }}
          extension_id: 'pilidjngjpaijlblpfdncckldgecngak' 
          zip_file: 'release.zip'

actionについて(公式のReadmeの翻訳)

Action Description
upload zipファイルをデベロッパーコンソールにアップロードするだけ。手動で公開する必要がある。
publish zipファイルをデベロッパーコンソールにアップロードし、自動で公開まで行う。
testers zipをアップロードし、テスターへの公開をリクエストする(公開された拡張機能は利用不可)。

今回は、なんとなくuploadを選びました。

client_id,client_secret,refresh_tokenについて

Google APIの認証情報を用意して入力します。
こちらにやり方が書いてあります。
Google APIの用意は、今回初めてでしたが割と簡単にできました!

extension_idについて

コンソールから
該当の拡張機能の詳細ページにいくと確認できます。

zip_fileについて

アップロードするzipファイルのパスです。
今回はリポジトリのルートにzipファイルを作成しているので、'release.zip'としました。

おわりに

今回のワークフローを設定した拡張機能(EZTM)のリポジトリはソースコードを公開しています👍
https://github.com/kakudenbuzo/eztm

そして、EZTMのストアページは以下です。よかったら使ってみてください!✨

https://chrome.google.com/webstore/detail/eztm/pilidjngjpaijlblpfdncckldgecngak

参考

既に以下の記事でもGitHub Actionsを使って自動でデプロイのやり方が紹介されていましたが、
自分のやり方と少し違ったので記事を作成しました。
https://zenn.dev/eetann/articles/2022-07-25-crx-with-github-actions

Discussion

ログインするとコメントできます