The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何使用 Chrome Web Store Publish API 自動化發佈 Chrome Extension

📅 2025/02/07 23:58 📁 Web

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

An abstract futuristic visualization of software automation and deployment.

完整的 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

    permissions:
      contents: write

    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
        with:
          tag_name: v${{ steps.get_version.outputs.version }}
          name: Release v${{ steps.get_version.outputs.version }}
          draft: false
          prerelease: false

      - 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
        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 }}

備註: 我主要使用 mnao305/chrome-extension-upload 工具來發佈 Chrome 擴充套件。

設定 Chrome Web Store Publish API

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

你的主要工作有：

  1. 先 手動發佈擴充套件，並取得 Extension ID

  2. 到 Google Cloud Console 選擇一個專案 (GCP Project)

  3. 到 Google Cloud Console > APIs & Services 啟用 Chrome Web Store API

  4. 到 Google Cloud Console > APIs & Services > Credentials 建立 OAuth 2.0 用戶端 ID 和用戶端密鑰 (Client ID & Client Secret)

  5. 到 Google Cloud Console > Google Auth Platform > Audience 切換 Publishing status 為 In production

    Google Cloud 的 Project 在建立後，預設的發佈狀態為 Testing (測試中)，這個狀態在透過 Token Endpoint 取得 Access Token 與 Refresh Token 時，你的 Refresh Token 會在 7 天後過期，這樣會導致你的 CI / CD 作業超過七天就無法自動化發佈了。

    因此，你必須將發佈狀態切換到 In production 才可以取得沒有期限的 Refresh Token (刷新金鑰)！🔥

  6. 用 OAuth 2.0 Playground 取得 Refresh Token (刷新金鑰)

    點擊右上角的設定圖示，然後勾選 Use your own OAuth credentials

    輸入你的 OAuth Client ID 與 OAuth Client secret，點擊 Close 關閉

    在左邊的 Input your own scopes 欄位輸入 https://www.googleapis.com/auth/chromewebstore 並點擊 Authorize APIs

    登入後，點擊 Exchange authorization code for tokens 即可取得所有需要的 Token 資訊！

    點擊左側的 Step 2 Exchange authorization code for tokens 就可以看到 Refresh token 與 Access token 了！

    若要透過 Postman 取得 Refresh Token 可以參考我的 如何讓 Google 的 OAuth 2.0 發出 Refresh Token 文章。

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

設定 GitHub Secrets

你必須先啟用 secrets.GITHUB_TOKEN 的權限，設定的步驟如下：

  1. 進入您的 GitHub 專案頁面，點選 Settings 頁籤
  2. 在左側選單中選擇 Actions > General
  3. 找到 Workflow permissions 並切換到 Read and write permissions 選項

然後到 Secrets and variables > Actions 設定一些自訂變數，設定的步驟如下：

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

我的 GitHub Actions YAML 需要額外設定 4 個秘密變數，你可以點選 New repository secret 來新增以下秘密變數：

  1. EXTENSION_ID: 你的 Chrome 擴充套件 ID
  2. CLIENT_ID: OAuth 2.0 用戶端 ID
  3. CLIENT_SECRET: OAuth 2.0 用戶端密鑰
  4. REFRESH_TOKEN: 用於獲取新的存取權杖的 Refresh Token (刷新金鑰)

發行到另一個 Repo

如果你需要將 Release 發行到另一個 Repo 的話，可以參考 softprops/action-gh-release 相關說明。

你可以額外建立一個名叫 GH_TOKEN 的秘密變數，用於身份驗證 GitHub API 的金鑰，請到 Fine-grained personal access tokens 頁面建立一個新的 Token，並給予 repo 權限。其中 Repository permissions 請選擇 Contents 的 Read and write。

以下是 YAML 設定範例：

name: Main

on: push

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

      - name: Generate Changelog
        run: echo "# Good things have arrived" > ${{ github.workspace }}-CHANGELOG.txt

      - name: Release
        uses: softprops/action-gh-release@v2
        if: startsWith(github.ref, 'refs/tags/')
        with:
          body_path: ${{ github.workspace }}-CHANGELOG.txt
          repository: my_gh_org/my_gh_repo
          # note you'll typically need to create a personal access token
          # with permissions to create releases in the other repo
          token: ${{ secrets.GH_TOKEN }}

相關連結

留言評論