The Will Will Web

我現在維護著幾套不同的 Chrome 擴充套件，每次發佈新版本時都需要手動上傳更新，覺得有點麻煩，所以我這幾天研究了一下 Chrome Web Store Publish API 並設定了 GitHub Actions 來自動化發佈 Release 與 Chrome Extension，真的方便太多了。這篇文章我就來說說這個設定的過程。

完整的 GitHub Actions 設定檔

以下是我完整的 GitHub Actions 設定檔 (publish.yml)，該檔案必須放在 Repo 的 .github/workflows/publish.yml 路徑，這樣當你的 main 分支有新的 commit 或手動觸發 workflow 時，GitHub 就會執行這個設定檔。

name: 發布至 Chrome Web Store

on:
  workflow_dispatch:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v4

      - name: 設定 Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: 取得版本號
        id: get_version
        run: |
          $version = (Get-Content manifest.json | ConvertFrom-Json).version
          echo "version=$version" >> $env:GITHUB_OUTPUT

      - name: 建立 GitHub Release
        id: create_release
        uses: softprops/action-gh-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
        with:
          tag_name: v${{ steps.get_version.outputs.version }}
          name: Release v${{ steps.get_version.outputs.version }}
          draft: false
          prerelease: false

      - name: 安裝 7-Zip
        run: choco install 7zip -y

      - name: 建立 ZIP 封裝檔
        run: |
          $filePath = "FeloSearchToolkitExtension_v${{ steps.get_version.outputs.version }}.zip"
          7z a $filePath _locales images src CHANGELOG.md manifest.json README.*

      - name: 上傳 Release 附件
        uses: softprops/action-gh-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
        with:
          tag_name: v${{ steps.get_version.outputs.version }}
          files: ./FeloSearchToolkitExtension_v${{ steps.get_version.outputs.version }}.zip

      - name: 發布至 Chrome Web Store
        uses: mnao305/chrome-extension-upload@v4.0.1
        with:
          file-path: 'FeloSearchToolkitExtension_v${{ steps.get_version.outputs.version }}.zip'
          extension-id: ${{ secrets.EXTENSION_ID }}
          client-id: ${{ secrets.CLIENT_ID }}
          client-secret: ${{ secrets.CLIENT_SECRET }}
          refresh-token: ${{ secrets.REFRESH_TOKEN }}

設定 Chrome Web Store Publish API

Chrome Web Store Publish API 可以讓你透過 REST API 建立、更新和發佈物件到 Chrome Web Store，但是第一次設定稍微有點繁瑣。

你的主要工作有：

1. 手動發佈擴充套件，並取得 Extension ID
2. 到 Google Cloud Console 的專案中啟用 Chrome Web Store API
3. 到 Google Cloud Console 的專案建立 OAuth 2.0 用戶端 ID 和用戶端密鑰 (Client ID & Client Secret)
4. 用 OAuth 2.0 Playground 取得 Refresh Token ((刷新金鑰))

詳細的步驟都已經寫在 使用 Chrome Web Store 發佈 API 的官方文件中，等這些資訊都拿到後，就可以透過 REST API 發佈 Chrome Extension 的新版本了！

設定 GitHub Secrets

在 GitHub Repo 的專案設定中，您可以設定 Secrets and variables > Actions，進入的步驟如下：

1. 進入您的 GitHub 專案頁面
2. 點選「Settings」
3. 在左側選單中選擇「Secrets and variables」> 「Actions」

我的 GitHub Actions YAML 共用到 5 個秘密，你可以點選「New repository secret」來新增以下秘密：

1. GH_TOKEN: 用於身份驗證 GitHub API 的金鑰

   請到 Fine-grained personal access tokens 頁面建立一個新的 Token，並給予 repo 權限。

   其中 Repository permissions 請選擇 Contents 的 Read and write。

2. EXTENSION_ID: 你的 Chrome 擴充套件 ID

3. CLIENT_ID: OAuth 2.0 用戶端 ID

4. CLIENT_SECRET: OAuth 2.0 用戶端密鑰

5. REFRESH_TOKEN: 用於獲取新的存取權杖的 Refresh Token (刷新金鑰)

相關連結

• Use the Chrome Web Store Publish API
• Chrome Web Store API Reference
• OAuth 2.0 Playground | Google Developers