跨浏览器扩展框架
用一套现代化的工作流，为所有主流浏览器构建扩展。Extension.js 帮你处理 manifest 编译、浏览器专属产物以及打包。
npx extension\@latest create my-extension
{"{"}
{"\n"}
{" "}
"manifest\_version"
:{" "}
3
,
{"\n"}
{" "}
"name"
:{" "}
"My Extension"
,
{"\n"}
{" "}
"version"
:{" "}
"1.0.0"
,
{"\n"}
{" "}
"action"
:{" "}
{"{"}
"default\_popup"
:{" "}
"popup.html"{" "}
{"}"}
,
{"\n"}
{" "}
"chrome:background"
:{" "}
{"{"}
"service\_worker"
:{" "}
"sw\.ts"{" "}
{"}"}
,
{"\n"}
{" "}
"firefox:background"
:{" "}
{"{"}
"scripts"
:{" "}
\[
"sw\.ts"
]{" "}
{"}"}
{"\n"}
{"}"}
为什么要用浏览器扩展框架？
浏览器扩展所需的文件、浏览器 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/\
{" "}
目录，再加上一个不挡路的 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 模块，无需编译步骤。快速起步，按需再加工具链。{" "}
为开源核心提供支持
赞助者帮助项目更快发版、提供更好的开发者体验（DX），以及为扩展团队带来长期可靠性。
常见问题
npx extension\@latest create my-extension
MIT (c) Cezar Augusto 和{" "} Extension.js 作者们。