跨浏览器扩展框架
用一套现代化的工作流，为所有主流浏览器构建扩展。Extension.js 帮你处理 manifest 编译、浏览器专属产物以及打包。
npx extension@latest create my-extension“manifest_version”:3,“name”:“My Extension”,“version”:“1.0.0”,“action”: “default_popup”:“popup.html”,“chrome:background”: “service_worker”:“sw.ts”,“firefox:background”: “scripts”:[“sw.ts”]为什么要用浏览器扩展框架？
浏览器扩展所需的文件、浏览器 API、manifest 格式、权限和构建产物， 都与普通 web 应用不同。一个浏览器扩展框架就是用来去掉这些胶水代码的：用一套工作流处理 Chrome、Edge 和 Firefox 的扩展开发；按目标过滤 manifest；为 service worker 和 content script 调整重载行为；并产出可直接提交到 Chrome Web Store、addons.mozilla.org 以及 Edge Add-ons 商店的打包结果。
Extension.js 提供的就是这样的工作流：一份 JavaScript 或 TypeScript
项目，一份manifest.json，分开输出到不同的dist/<browser>目录，再加上一个不挡路的 CLI——让你用同一份代码库轻松发布跨浏览器扩展。
观看完整的开发者工作流
从脚手架到运行中的扩展，一条现代化工具链贯穿全程。
贯穿 扩展全生命周期的核心特性
用一条现代化的扩展工作流，为每一种浏览器构建、测试与发布。
把一份扩展编译为浏览器专属产物
为 Chrome、Edge、Firefox 以及自定义的 Chromium 或 Gecko 目标，一次性构建。开发、测试与发布版本之间，浏览器专属产物始终保持可预期。
让扩展结构保持显式
扩展不断成长，manifest、路径和输出资源始终保持同步。
用配置调校行为
通过 extension.config.js 覆盖默认值，做定制化构建。
用你喜欢的技术栈
从 React、Vue、Svelte、TypeScript 或 JavaScript 起步。沿用同一条工作流，让团队在不改变扩展工具链的前提下选择合适的 UI 模型。
干净地注入环境变量
按浏览器与模式加载环境值，再把它们在 JavaScript、JSON 和 HTML 中替换好。开发期的密钥永远不会泄漏到生产产物里。
构建、预览、打包
一条流程从本地校验直达每个浏览器商店可用的产物。
选你喜欢的框架。 保留同一条工作流。
从 React、Preact、Vue、Svelte、TypeScript 或 JavaScript 的生产就绪模板起步。
React
完整兼容 Manifest V3（MV3）的组件化 UI。开箱即可发布的 popup、options 和 content script。
Preact
同样的 React API，3kB 运行时。非常适合对包体积敏感的 content script。
Vue
渐进式框架，带单文件组件，已为扩展上下文配好接线，开箱即用。
Svelte
编译时 UI，更小的运行时。当 content script 的每一千字节都重要时尤其合适。
TypeScript
为 popup、content 和 background 脚本提供静态类型。在编译期就抓出 manifest 与消息传递的问题。
JavaScript
纯 ES 模块，无需编译步骤。快速起步，按需再加工具链。
从别的框架过来？
大多数 React、Vue、Svelte 的源文件无需重写就能直接搬过来。真正的工作是替换打包器配置， 以及把生成的 manifest 改回真实的 manifest.json。
为开源核心提供支持
赞助者帮助项目更快发版、提供更好的开发者体验（DX），以及为扩展团队带来长期可靠性。
常见问题
什么是浏览器扩展？
什么是浏览器扩展？
Extension.js 是 Chrome 扩展框架吗？
Extension.js 是 Chrome 扩展框架吗？
--browser=chrome、--browser=firefox
或 --browser=edge 选择目标。详见可用浏览器。Extension.js 在开发期是怎么处理热模块替换的？
Extension.js 在开发期是怎么处理热模块替换的？
npx extension dev，CLI 会监听项目的改动。对 popup、content script、service worker
以及 options 页面的修改，会触发最快的安全更新路径：在支持时使用热模块替换（HMR），否则进行有针对性的重载。
它会自动解决常见痛点，比如陈旧的 service worker 和遗漏的 content script 更新。如何为 Chrome、Edge 和 Firefox 同时构建一份扩展？
如何为 Chrome、Edge 和 Firefox 同时构建一份扩展？
我能用 React、Preact、Vue、Svelte 或 TypeScript 吗？
我能用 React、Preact、Vue、Svelte 或 TypeScript 吗？
Extension.js 支持 Manifest V3 吗？
Extension.js 支持 Manifest V3 吗？
如何排查 Manifest V3 的 service worker 与权限问题？
如何排查 Manifest V3 的 service worker 与权限问题？
type: "module"、新的
web_accessible_resources 形态、permissions 与 host_permissions 的拆分，以及
Firefox 中 declarative_net_request 的差异。修复方法见 Manifest V3 排查。如何从自定义的 webpack 或 Vite 配置迁移过来？
如何从自定义的 webpack 或 Vite 配置迁移过来？
Extension.js 支持 monorepo 和环境变量吗？
Extension.js 支持 monorepo 和环境变量吗？
Extension.js 可以免费使用吗？
Extension.js 可以免费使用吗？
Extension.js 支持 Safari 吗？
Extension.js 支持 Safari 吗？
--browser=safari 目前还不是 CLI 目标。你仍然可以用共享的 web 代码编写 Safari 扩展，
并在这个工作流之外加入 Safari 特定的构建步骤。当前范围请参见
可用浏览器。Extension.js 会给我的包体积加多少东西？
Extension.js 会给我的包体积加多少东西？
extension build）只会输出扩展实际引用的代码，外加一小段在生产中会被剔除的重载 runtime。
开发构建则包含额外的 HMR 与重载胶水。产物位于 dist/<browser> 下，方便你对比不同浏览器的体积。
Content script 的产物体积，与你的源码加上所选 UI 框架的预期产物非常接近。如何从 CRXJS、WXT 或 Plasmo 迁移过来？
如何从 CRXJS、WXT 或 Plasmo 迁移过来？
manifest.json；
以及更新 package.json 的脚本。逐步操作请见
从 CRXJS 迁移。