利用 github actions 发布谷歌插件

今天有时间维护一下之前开发的sync-storage插件，临了要发布了我就在想：要是和第一次发布插件一样，那也太折磨人了吧，能不能有CI/CD来帮我简化一下这个操作呢？最好连浏览器我都不用打开那种，查了一下还真有，借助 github actions 我们就可以轻松地实现自动化发布谷歌插件。

准备工作

谷歌开发者账号、github账号、🪜咱就不说了，没有就自己想想办法~

想要顺利使用 github actions 发布谷歌插件，需要一下几个关键点：

第一次发布一定是自己老老实实在谷歌开发者网站上发布的，没有捷径可言
插件 ID：chrome webstore Developer Dashboard 中对应的插件点进去后左上角就能看到插件ID

核心步骤

启用chromewebstore API,访问 https://console.developers.google.com/apis/library/chromewebstore.googleapis.com
在 API 和服务中创建 Oauth Client ID, 选择「桌面应用」，然后就会得到 client_id 和 client_secret，下载JSON 另存为 `key.json`
在 `key.json` 目录下使用 `pnpm dlx gcp-refresh-token` 会打开浏览器谷歌验证授权，然后`refresh_token` 就会被写入到 `key.json` 中了。
把 `key.json` 中的关键字段复制到插件仓库的 `Repository secrets` 中即可, 类似
注意：需要访问 https://console.cloud.google.com/auth/audience，点击 `PUBLISH APP`把发布状态改为正式！

{
  "chrome": {
    "extId": "xxxxx",
    "clientId": "132343390930-abcdefg.apps.googleusercontent.com",
    "clientSecret": "GOCSPX-MsUWO5NtOSGki4Fx_aasdfgsdfa",
    "refreshToken": "1//06ha_Wx7pk_jkCgYIARAAGAYSNwF-L9IrqP_BnJfqXuNmrMiRkhJkqr83bb3BmU8mrO3Nnp-cZgj5PjXFOIsdfmbILbeGcBPU"
  }
}

完整教程看这里 https://github.com/PlasmoHQ/chrome-webstore-api/blob/main/token.md

编写 publish.yaml

这里使用了 `PlasmoHQ/bpp@v3` 这个库。

# .github/workflows/publish.yml
name: Publish to Chrome Web Store

on:
    push:
        tags:
            - "v*" # 当推送 v1.0.0 这样的 tag 时触发

jobs:
    build-and-publish:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

            - name: Setup pnpm
              uses: pnpm/action-setup@v4
              with:
                  version: 10

            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: "22"
                  cache: "pnpm"

            - name: Install dependencies
              run: pnpm install

            - name: Build
              run: pnpm build

            - name: Get version
              id: version
              run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

            - name: Upload & Publish to Chrome Web Store
              uses: PlasmoHQ/bpp@v3
              with:
                  keys: ${{ secrets.BPP_KEYS }}
                  artifact: "release/crx-sync-storage-${{ steps.version.outputs.version }}.zip"

大功告成

此时我们只需要执行以下命令就可以触发 github actions 自动发布插件到 chrome web store 了。

npm version [patch|minor|major]
git push origin main --tags

![awesome-find](/static/images/daily/github-actions-chrome-plugin.png)

锦上添花

基本整完了，但每次要我自己这么输入命令发布也太low了，就是觉得：麻烦！不如交给AI给我写个 Makefile 吧，这样就可以一键发布啦！

# Sync Storage - Chrome Extension Makefile
# ==========================================

.PHONY: help dev build release release-patch release-minor release-major clean

# 默认目标：显示帮助
help:
	@echo ""
	@echo "📦 Sync Storage 发布命令"
	@echo "========================"
	@echo ""
	@echo "  make dev            - 启动开发模式"
	@echo "  make build          - 构建生产版本"
	@echo ""
	@echo "  make release-patch  - 发布补丁版本 (0.0.x)"
	@echo "  make release-minor  - 发布次要版本 (0.x.0)"
	@echo "  make release-major  - 发布主要版本 (x.0.0)"
	@echo ""
	@echo "  make release v=1.2.3 - 发布指定版本"
	@echo ""
	@echo "  make clean          - 清理构建产物"
	@echo ""

# 开发模式
dev:
	pnpm dev

# 构建
build:
	pnpm build

# 发布补丁版本 (0.0.1 -> 0.0.2)
release-patch:
	@echo "🚀 发布补丁版本..."
	npm version patch -m "chore(release): v%s"
	git push origin main --tags
	@echo "✅ 发布完成！GitHub Actions 将自动发布到 Chrome Web Store"

# 发布次要版本 (0.1.0 -> 0.2.0)
release-minor:
	@echo "🚀 发布次要版本..."
	npm version minor -m "chore(release): v%s"
	git push origin main --tags
	@echo "✅ 发布完成！GitHub Actions 将自动发布到 Chrome Web Store"

# 发布主要版本 (1.0.0 -> 2.0.0)
release-major:
	@echo "🚀 发布主要版本..."
	npm version major -m "chore(release): v%s"
	git push origin main --tags
	@echo "✅ 发布完成！GitHub Actions 将自动发布到 Chrome Web Store"

# 发布指定版本 (make release v=1.2.3)
release:
ifndef v
	@echo "❌ 请指定版本号: make release v=1.2.3"
	@exit 1
endif
	@echo "🚀 发布版本 v$(v)..."
	npm version $(v) -m "chore(release): v%s"
	git push origin main --tags
	@echo "✅ 发布完成！GitHub Actions 将自动发布到 Chrome Web Store"

# 清理
clean:
	rm -rf dist
	rm -rf node_modules/.vite
	@echo "🧹 清理完成"

它使用起来像是这样：

![awesome-find](/static/images/daily/make-release-chrome-plugin.png)

全文结束，希望能帮到你。