Extension.js：简化浏览器插件开发，支持TypeScript与React/Vue等现代框架

手动开发浏览器扩展时，打包配置、热更新、以及适配不同浏览器的底层 API 差异，这些繁琐的工作常常令人头疼。

最近发现一个名为 Extension.js 的开源 JavaScript 库，它旨在让开发者能够使用现代 JavaScript 语法（ES6+）更高效地开发浏览器扩展，并自动处理跨浏览器的 API 兼容性问题。

目前该项目在 GitHub 上拥有 4.9k Stars 和 124 个 Forks。代码库主要由 TypeScript（占比 97.6%） 编写，采用宽松的 MIT 许可证，由 Cezar Augusto 及其团队维护。其最新版本为 3.8.7（发布于 2026 年 2 月 26 日）。

1. 核心工作流

这个工具抛弃了传统的复杂配置，将工作流抽象为三个简洁的核心命令：

• 统一指令生命周期：你只需要关注 dev（开发环境运行）、build（生产环境构建）和 preview（生产环境预览）这三个核心指令。
• 现代框架原生兼容：原生支持 ESNext 和 TypeScript。无需配置额外的加载器，即可完美兼容 React、Vue、Svelte 和 Preact 等主流前端框架。
• 跨浏览器与规范兼容：全面强制支持 Manifest V3 标准。能够直接在 Chrome、Edge、Firefox 以及其他基于 Chromium 或 Gecko 的浏览器上进行调试。

2. 灵活的接入与初始化方式

无论你是从零开始新项目，还是对现有项目进行改造，它都提供了多种灵活的接入方式：

• 从零创建：直接运行 npx extension@latest create 命令即可一键生成新项目。该命令同样兼容 pnpm、yarn 和 bun 等包管理器。
• 从官方示例启动：如果你不想从头搭建脚手架，可以直接输入现有的示例代码库链接（例如 Google Chrome 的官方扩展示例）来快速启动和预览项目。
• 无缝集成老项目：如果你手头已有现成的扩展项目，无需推倒重来。只需将其作为开发依赖 (devDependency) 安装，然后在 package.json 文件的 scripts 字段中添加一条 ”dev”: “extension dev” 命令，就能立即使用其热更新和构建功能。

3. 高级浏览器环境管理

开发扩展时，环境隔离和多端测试往往令人烦恼。Extension.js 内置了一套沙盒化的浏览器管理机制：

• 多环境切换：在开发或预览时，通过添加 –browser 参数即可快速切换到目标浏览器（可选参数如 chrome, edge, firefox）。
• 指定本地路径：如果你使用的是自定义或修改版的浏览器，支持通过 –chromium-binary 或 –gecko-binary 标志强制指定本地浏览器的可执行文件路径。
• 托管二进制文件：提供了专门的 install / uninstall 指令，帮助你独立下载和管理用于测试的浏览器二进制文件。这些文件会被安全地存放在针对各操作系统（macOS、Linux、Windows）优化的默认缓存目录中，不会污染你日常使用的系统环境。

4. 避坑指南 (注意事项)

在享受便利的同时，也需要注意一些当前的限制和潜在问题：

• Safari 支持尚在开发：对 Safari 的支持正在开发中。如果你的业务强依赖于苹果生态的 Mac/iOS Safari 扩展，目前这个工具暂时无法提供帮助。
• WASM 支持暂缺：如果你计划在扩展中运行 C++/Rust 编译的 WebAssembly 模块来进行高性能计算，需要注意其对 WASM 的支持也仍处于“即将推出”阶段，当前接入可能会遇到构建问题。
• 强制 Manifest V3：它全面拥抱 Manifest V3 标准。如果你手头是一个基于 Manifest V2 的遗留项目，并且重度依赖 V2 时代的后台页面 (Background Pages) 逻辑，那么在接入之前，必须先将代码重构为使用 Service Workers，否则将无法正常运行。
• 注意磁盘空间：其提供的 install 命令用于下载独立的测试浏览器，这个功能很方便，但需要注意定期清理。Chrome 或 Firefox 的无头浏览器二进制文件体积不小，下载多个版本很容易占用数 GB 的系统缓存空间，记得定期使用 uninstall 命令进行清理。

如果你对这个项目感兴趣，可以访问其 GitHub 仓库获取更多信息和源码： https://github.com/extension-js/extension.js