GitHubのリリースタグをトリガーにChrome拡張機能を自動アップロードする
Chrome拡張機能の開発において、完成した成果物をZIP形式にまとめ、デベロッパーダッシュボードから手動でアップロードする作業は、頻度が高まると意外に大きな負担となります。 今回は、GitHub Actions を活用して、リリースタグ(v1.0.0 など)の作成をトリガーに、Chrome Web Storeへのアップロードを自動化する方法を紹介します。
自動化のメリット
アップロード作業を自動化することで、主に以下の 2 点のメリットが得られます。
- 作業手間の削減: 手動でのビルド、ZIP圧縮、ブラウザ経由のアップロードという一連のルーチンワークから解放されます。
- ヒューマンエラーの防止: アップロードするファイルの取り違えや、特定の環境でのビルドミスといった人的ミスを排除し、常にクリーンな環境から生成された成果物をストアに届けることができます。
手順の概要
自動アップロードを実現するための全体像は以下の通りです。
- タグの自動作成: GitHub Actionsで manifest.json からバージョンを取得し、タグを自動作成できるようにする。
- Google Cloud Project の設定: APIを有効化し、認証情報を取得する。
- Refresh Token の取得: API経由で操作するための永続的なトークンを発行する。
- GitHub Secrets の設定: 認証情報を安全にリポジトリに保存する。
- リリースタグの作成で自動アップロード: リリースタグの作成をトリガーにして、認証情報を元にChrome Web Storeへ自動アップロードする。
また、今回は Nickmark という私が開発した拡張機能で実際に試した例を元に解説します。
1. タグを自動作成する
まず、プロジェクトの main ブランチに更新があった際、バージョン情報を元に自動でタグを打つ仕組みを作ります。
プロジェクトの .github/workflows/create-tag.yml ファイルを以下の内容で作成してください。
name: Create Release Tag
on:
push:
branches:
- main
workflow_dispatch:
permissions:
contents: write
jobs:
tag:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v6
- name: Get version from manifest.json
run: |
VERSION=$(jq -r '.version' Nickmark/manifest.json)
echo "VERSION=v$VERSION" >> $GITHUB_ENV
echo "Detected version: v$VERSION"
- name: Create and Push Tag
run: |
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
if git ls-remote --tags origin "refs/tags/${VERSION}" | grep -q "${VERSION}"; then
echo "Tag ${VERSION} already exists in remote. Skipping tag creation."
else
git tag "${VERSION}"
git push origin "${VERSION}"
echo "🎉 Successfully created and pushed tag: ${VERSION}"
fi
このファイルをリポジトリにコミットすると、GitHub Actions に Create Release Tag というワークフローが追加されます。
このワークフローは、main ブランチへのコミット時に manifest.json のバージョンを確認し、新しいバージョンであれば自動的にタグを作成します。すでに同じバージョンのタグが存在する場合は、重複作成を避けるため処理をスキップします。
実際にバージョンを上げてコミットすると、以下のようにワークフローが実行され、
新しいタグが作成されます。
最終的に、このタグを元に「リリース」を作成したタイミングで、Chrome Web Storeへ自動アップロードされるように設定していきます。
2. Google Cloud Project の設定と API の有効化
次に、API 経由で Chrome Web Store を操作するための準備を行います。
1. Google Cloud プロジェクトの作成
- Google Cloud Console にアクセスします。
- 画面左上の「プロジェクトを選択」をクリックし、「新しいプロジェクト」 を選択します。

- 任意のプロジェクト名(例:「My-Chrome-Extensions」)を入力して作成します。

- 作成完了後、再び左上のプロジェクト選択から、作成したプロジェクトを選択状態にします。

2. Chrome Web Store API の有効化
- 画面上部の検索バーに「Chrome Web Store API」と入力し、検索結果から選択します。

- 「有効にする」 ボタンをクリックします。
3. OAuth クライアントの作成
- 左側のメニューから「APIとサービス」 > 「OAuth 同意画面」 を選択します。User Type を「外部」に設定し、公開ステータスを 「本番環境」 に変更します。

- 左側のメニューから 「認証情報」 を選択し、画面上部の 「認証情報を作成」 > 「OAuth クライアント ID」 をクリックします。

- アプリケーションの種類として 「デスクトップ アプリ」 を選択し、名前を入力(例:「For GitHub Actions」)して作成します。

- 作成後に表示される クライアント ID と クライアント シークレット をコピーしておきます。 「JSONをダウンロード」 でJson形式で クライアント ID と クライアント シークレット がダウンロードできます。

3. Refresh Token の取得
API アクセスに必要な「リフレッシュトークン」を取得します。
1. 認証コードの取得
以下の URL の [CLIENT_ID] 部分を先ほど取得したクライアント ID に書き換え、ブラウザでアクセスします。
https://accounts.google.com/o/oauth2/auth?response_type=code&scope=https://www.googleapis.com/auth/chromewebstore&client_id=[CLIENT_ID]&redirect_uri=http://127.0.0.1
- Google アカウントの選択画面が表示されるので、対象のアカウントを選択します。