跳转到主要内容
Extension.js
用一套现代工作流为 Chrome、Edge 和 Firefox 构建浏览器扩展。Extension.js 处理 manifest 编译、按浏览器的输出、重载行为和打包。你可以专注于产品功能，而不是构建工具。 继续使用你熟悉的 Web 工具，比如 TypeScript、React、Vue 和 Tailwind CSS，同时保留对原生扩展 API 的直接访问。
在做工具比较？看看 Extension.js 与 WXT 等其他框架的对比：Extension.js vs WXT。
CLI 版本： 运行 extension --version（或 npx extension@latest --version）查看你正在使用的版本。npm 上的 extension 包 列出了最新发布版本。 GitHub releases 以 changelog 形式记录变更说明，而不会把本文档绑定到某个具体补丁号上。

​
视频导览

​
选择你的路径

如果你是……从这里开始
完全没接触过浏览器扩展什么是浏览器扩展？ 和 创建你的第一个扩展
想借助 AI 工具和模板快速推进模板 和 立即开始
一位经验丰富的 Web 开发者，但是扩展新手创建你的第一个扩展 和 Manifest
在调试 Manifest V3 service workerManifest V3 排错 和 背景脚本
在跨浏览器交付生产扩展跨浏览器兼容性 和 工作流概览

​
选对命令

目标命令示例
脚手架生成项目createnpx extension@latest create my-extension --template=new-react
带 watch 模式开发devextension dev --browser=firefox
构建生产产物buildextension build --browser=chrome,firefox --zip
构建并启动生产产物startextension start --browser=edge
启动已有的构建产物previewextension preview --browser=chrome

​
启动一个新扩展

使用 create 命令脚手架生成新项目，并用 --template 从某个特定技术栈的基线开始。 
npx extension@latest create <your-extension-name>
支持的模板完整列表请见 模板 页面。

​
在已有扩展中使用 Extension.js

如果你已经有一个扩展，安装 extension 包并一次性接好脚本。这能让本地开发、测试和发布构建保持一致。

​
第 1 步：把 extension 包安装为 devDependency

npm install extension@latest --save-dev

​
第 2 步：把你的 npm 脚本链接到 extension 命令

package.json
{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "start": "extension start"
  },
  "devDependencies": {
    "extension": "latest"
  }
}
完成。你的扩展已经可以使用了。
  • 日常迭代和 watch 模式运行 npm run dev。
  • 生产构建 + 立即启动运行 npm run start。
  • 生成可上架的生产产物运行 npm run build。

​
最佳实践

  • 保持单一命令流： 把 create → dev → build 作为默认循环。
  • 显式指定浏览器目标： 发布前用 --browser=chrome,firefox 验证。
  • 集中默认配置： 把共享的命令/浏览器设置放进 extension.config.js。

​
下一步

创建你的第一个扩展

带你走过第一次构建的指南。

模板

浏览面向各种技术栈的起步模板。

Playwright E2E

给你的工作流加上质量门禁。

遥测与隐私

了解隐私契约。

对比框架

Extension.js 与 WXT、CRXJS、Plasmo 等浏览器扩展框架的对比。