CLI webextension-toolbox 一套代码打包多浏览器扩展

写浏览器扩展最头疼的不是功能，而是“同一份代码要分别适配 Chrome、Firefox、Edge、Safari、Opera 的清单与打包格式”。每次手动改 manifest、各自打包，既重复又容易出错。webextension-toolbox 用一条命令把这套跨浏览器流程自动化，让你专注写扩展逻辑。

项目基本信息

一、项目介绍

webextension-toolbox 是一个小巧的命令行工具箱，用于创建跨浏览器的 WebExtension。它基于 webpack，统一处理多厂商清单、打包与校验，官方测试覆盖 Edge、Firefox、Chrome、Safari、Opera。相比 Mozilla 官方的 web-ext（只针对 Firefox 深度优化），它胜在统一的跨浏览器开发体验与可定制 webpack 配置。

二、核心优势

• 跨浏览器打包：一次开发，输出 Firefox(.xpi)、Opera(.crx) 及各大浏览器的 .zip。
• 清单校验：编译时校验 manifest.json，可跳过。
• 清单默认值：自动从 package.json 取 name/version/description。
• 厂商键注入：用 __chrome__key 等占位符按厂商生成对应字段。
• 原生 TypeScript 支持。
• 可扩展 webpack：通过 -c 自定义配置，按需加 polyfill。

三、适用场景

• 同时上架 Chrome / Firefox / Edge 商店的扩展。
• 想用单一代码库维护多浏览器版本。
• 需要 React / TypeScript 写扩展界面。
• 团队统一构建与打包流程。

四、安装教程

全局安装：

 npm install -g @webextension-toolbox/webextension-toolbox

或本地安装：

 npm install -D @webextension-toolbox/webextension-toolbox

常见报错：若提示 webpack 相关依赖缺失，按项目需要补装；React 支持需额外 npm install @babel/preset-react，TypeScript 需 npm install typescript 并加 tsconfig.json。

五、使用示例

开发模式（自动重建 + 热重载）：

 webextension-toolbox dev chrome
 webextension-toolbox dev firefox

生产构建：

 webextension-toolbox build edge

输出：在 dist/ 生成对应厂商包，在 packages/ 生成可分发包。

六、常见问题

• 和 web-ext 选哪个？只做 Firefox 用 web-ext 更顺；要跨浏览器统一体验选本工具。
• Safari 支持吗？官方测试含 Safari，但 Safari 扩展有额外配置。
• 要 polyfill 吗？新版不再内置跨浏览器 polyfill，可用 process.env.VENDOR 在构建期区分。

七、总结

webextension-toolbox 把“多浏览器扩展打包”这件重复活标准化了，是跨商店发布扩展的高性价比选择。MIT 协议，适合想用一份代码覆盖主流浏览器的扩展开发者。