Skip to main content
Extension.js 与 CRXJS 都能把 manifest.json 和现代源码变成可运行的扩展。Extension.js 是自带打包器的 CLI 框架。CRXJS 是一个插件，在你自己的 Vite 配置里加上扩展输出。本页是一份事实性的对比，让你基于自己的项目做选择。

​
你应该选哪个？

如果以下情况，选 Extension.js……

  • 你想要一个 CLI 来打开浏览器、保存即重载、按浏览器构建并打包上架用的 zip。
  • 你要用一份 manifest.json 发布到 Chrome、Edge、Firefox 和 Safari。
  • 你不想在项目里写打包器配置。

如果以下情况，选 CRXJS……

  • 你已经有一个 Vite 应用，想在其中加上扩展输出。
  • 你依赖 Vite 插件并想继续使用它们。
  • 你可以接受自己在浏览器里加载未打包的构建结果。

​
一览

​
思维模型

Extension.js 自带打包器。 你编写 manifest.json 并引用真实文件。CLI 编译它们，为每个浏览器过滤 manifest，并打包结果。你从不配置打包器，打包器升级由框架负责。 CRXJS 运行在你的打包器里。 你在 vite.config 中加入 crx({ manifest })，Vite 会在你的应用旁边构建扩展。你保留对 Vite 和所有 Vite 插件的完全控制。每个 Vite 主版本都需要 CRXJS 做兼容工作，这也是 Vite 8 fileName 错误曾经存在一段时间的原因。

​
开发循环

​
Extension.js

CLI 用全新的配置文件打开每个浏览器，并加载扩展。保存后会重载对应部分：页面用 HMR，内容脚本和 service worker 用定向重载。

​
CRXJS

Vite 启动开发服务器，并把扩展写入输出目录。你在浏览器里加载一次这个未打包的目录，之后 HMR 会更新页面和内容脚本。

​
跨浏览器构建

  • Extension.js 用 --browser 从一份源码构建所有浏览器。
  • 浏览器差异写在按浏览器前缀的 manifest 字段里，例如 chrome: 和 firefox:。
  • CRXJS 每次运行构建一个目标，在插件选项中设置 browser: 'firefox' 即可构建 Firefox 版本。
  • CRXJS 的文档没有 Safari 指南。

​
打包

Extension.js 会写出 dist/<browser>，并在旁边为每个浏览器生成一个 zip。使用 CRXJS 时，你需要用自己的脚本或工具打包 Vite 的输出目录。

​
何时迁移

当你希望 CLI 启动浏览器、一次构建多个浏览器，或发布到 Safari 时，可以从 CRXJS 迁移到 Extension.js。你的组件、chrome.* 调用和样式都可以沿用。从 CRXJS 迁移会一步步带你完成。

​
另请参阅