WXT浏览器插件开发中文教程(27)----发布插件介绍了如何使用 WXT 工具将浏览器扩展程序打包并提交至 Chrom

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

发布

WXT 可以将您的扩展程序打包为 ZIP 文件，并提交到各个商店进行审核或自行托管。

首次发布

如果您是首次将扩展程序发布到商店，您需要手动完成整个流程。WXT 不会帮您创建列表，每个商店都有其独特的步骤和要求，您需要熟悉这些内容。

有关每个商店的具体信息，请参阅下面的商店部分。

Chrome Web Store
Firefox Addon Store
Edge Addons

自动化

WXT 提供了两个命令，帮助自动化提交新版本进行审核和发布：

wxt submit init：设置 wxt submit 命令所需的所有密钥和选项。
wxt submit：提交扩展程序的新版本进行审核（审核通过后自动发布）。

开始时，请运行 wxt submit init 并按照提示操作。完成后，您应该会有一个 .env.submit 文件！WXT 将使用此文件提交更新。

在持续集成 (CI) 中，请确保将所有环境变量添加到提交步骤中。

要提交新版本进行发布，请构建您计划发布的所有 ZIP 文件：

wxt zip
wxt zip -b firefox

然后运行 wxt submit 命令，并传入您要发布的所有 ZIP 文件。在此示例中，我们将为 Chrome Web Store、Edge Addons 和 Firefox Addons Store 这三个主要商店发布版本。

如果您是首次运行该命令，或者您最近对发布流程进行了更改，建议您通过添加 --dry-run 标志来测试密钥。

wxt submit --dry-run \
  --chrome-zip .output/{your-extension}-{version}-chrome.zip \
  --firefox-zip .output/{your-extension}-{version}-firefox.zip --firefox-sources-zip .output/{your-extension}-{version}-sources.zip \
  --edge-zip .output/{your-extension}-{version}-chrome.zip

如果试运行通过，则移除该标志并执行实际发布：

wxt submit \
  --chrome-zip .output/{your-extension}-{version}-chrome.zip \
  --firefox-zip .output/{your-extension}-{version}-firefox.zip --firefox-sources-zip .output/{your-extension}-{version}-sources.zip \
  --edge-zip .output/{your-extension}-{version}-chrome.zip

警告

有关 --firefox-sources-zip 选项的更多详细信息，请参阅 Firefox Addon Store 部分。

GitHub Action

以下是一个 GitHub Action 的示例，用于提交扩展程序的新版本进行审核。请确保您已在仓库的设置中添加了工作流中使用的所有必需的密钥。

name: Release
on:
  workflow_dispatch:
jobs:
  submit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install dependencies
        run: pnpm install
      - name: Zip extensions
        run: |
          pnpm zip
          pnpm zip:firefox
      - name: Submit to stores
        run: |
          pnpm wxt submit \
            --chrome-zip .output/*-chrome.zip \
            --firefox-zip .output/*-firefox.zip --firefox-sources-zip .output/*-sources.zip
        env:
          CHROME_EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
          CHROME_CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
          CHROME_CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
          CHROME_REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
          FIREFOX_EXTENSION_ID: ${{ secrets.FIREFOX_EXTENSION_ID }}
          FIREFOX_JWT_ISSUER: ${{ secrets.FIREFOX_JWT_ISSUER }}
          FIREFOX_JWT_SECRET: ${{ secrets.FIREFOX_JWT_SECRET }}

上述操作为基本工作流奠定了基础，包括 zip 和 submit 步骤。要进一步完善您的 GitHub Action，并探索更复杂的场景，请考虑参考以下真实项目中的示例。它们引入了诸如版本管理、更新日志生成和 GitHub 发布等高级功能，以满足不同的需求：

aklinker1/github-better-line-counts - 使用传统提交方式，自动提升版本并生成更新日志，手动触发，可选的试运行用于测试
GuiEpi/plex-skipper - 当 package.json 版本发生变化时自动触发，创建并上传 GitHub 发布的工件。

这些示例旨在提供清晰的见解，并是定制您自己的工作流的良好起点。您可以自由地探索并根据您的项目需求进行调整。

商店

Chrome Web Store

✅ 支持 • 开发者仪表板 • 发布文档

要为 Chrome 创建 ZIP 文件：

wxt zip

Firefox Addon Store

✅ 支持 • 开发者仪表板 • 发布文档

Firefox 要求您上传扩展程序源代码的 ZIP 文件。这使得他们能够重新构建您的扩展程序，并以可读的方式审查代码。更多详细信息可以在 Firefox 的文档中找到。

运行 wxt zip -b firefox 时，WXT 将同时打包您的扩展程序和源代码。某些文件（例如配置文件、隐藏文件、测试文件和排除的入口点）将自动从您的源代码中排除。但是，重要的是要手动检查 ZIP 文件，以确保它仅包含重新构建扩展程序所需的文件。

要自定义要打包的文件，请在配置文件中添加 zip 选项。

wxt.config.ts

import { defineConfig } from 'wxt';
export default defineConfig({
  zip: {
    // ...
  },
});

如果这是您首次向 Firefox Addon Store 提交，或者您已更新了项目布局，请始终测试您的源代码 ZIP 文件！以下命令应允许您从解压后的 ZIP 文件中重新构建扩展程序。

pnpm 打包方式

pnpm i
pnpm zip:firefox

npm 打包方式

npm i
npm run zip:firefox

yarn 打包方式

yarn
yarn zip:firefox

bun 打包方式

bun i
bun zip:firefox

请确保您的项目中有一个 README.md 或 SOURCE_CODE_REVIEW.md 文件，并在其中包含上述命令，以便 Firefox 团队知道如何构建您的扩展程序。

确保在主项目中运行 wxt build -b firefox 以及在打包的源代码中运行时，构建输出完全相同。

警告

如果您使用 .env 文件，它们可能会影响输出目录中的块哈希值。在运行 wxt zip -b firefox 之前，要么删除 .env 文件，要么使用 zip.includeSources 选项将其包含在源代码 ZIP 中。小心不要将任何机密信息包含在 .env 文件中。

有关更多详细信息，请参阅问题 #377。

私有包

如果您使用了私有包，并且不想在审核过程中向 Firefox 团队提供您的身份验证令牌，您可以使用 zip.downloadPackages 下载任何私有包，并将其包含在 ZIP 文件中。

wxt.config.ts

export default defineConfig({
  zip: {
    downloadPackages: [
      '@mycompany/some-package',
      //...
    ],
  },
});

根据您的包管理器，源代码 ZIP 中的 package.json 将被修改，以便通过 overrides 或 resolutions 字段使用下载的依赖项。

警告

WXT 使用命令 npm pack <package-name> 来下载包。这意味着无论您使用哪种包管理器，您都需要正确设置 .npmrc 文件。NPM 和 PNPM 都尊重 .npmrc 文件，但 Yarn 和 Bun 有它们自己的方式来授权私有注册表，因此您需要添加一个 .npmrc 文件。

Safari

🚧 尚不支持

WXT 目前不支持 Safari 的自动化发布。Safari 扩展程序需要一个原生的 MacOS 或 iOS 应用程序包装器，而 WXT 尚未创建。目前，如果您想发布到 Safari，请按照以下指南操作：

将 Web 扩展转换为 Safari 扩展 - “使用 Xcode 的命令行工具将现有的扩展程序转换为 Safari Web 扩展。”

运行 safari-web-extension-converter 命令行工具时，请传递 .output/safari-mv2 或 .output/safari-mv3 目录，而不是您的源代码目录。

pnpm wxt build -b safari
xcrun safari-web-extension-converter .output/safari-mv2

Edge Addons

✅ 支持 • 开发者仪表板 • 发布文档

无需为 Edge 创建特定的 ZIP 文件。如果您已经在发布到 Chrome Web Store，您可以重复使用 Chrome ZIP 文件。

但是，如果您有针对 Edge 的特定功能，请创建一个单独的 ZIP 文件：

wxt zip -b edge

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

WXT浏览器插件开发中文教程(27)----发布插件

前言

发布 ​

首次发布 ​

自动化 ​

GitHub Action ​

商店 ​

Chrome Web Store ​

Firefox Addon Store ​

私有包 ​

Safari ​

Edge Addons ​

发布

首次发布

自动化

GitHub Action

商店

Chrome Web Store

Firefox Addon Store

私有包

Safari

Edge Addons