弃用各种陈旧的模板!开发跨浏览器插件,你只需要这一行命令,.js效率“外挂”

平时在网上冲浪或者查技术资料，总会遇到一些交互极其反人类的网站。每当这时候，作为全栈开发者的第一反应往往是：“这破网站，等我有空写个浏览器插件把它的 DOM 给改了。”

但很多时候，这个绝妙的 idea 也就止步于此了。

为什么？因为开发一个现代化的浏览器插件，配环境简直是一种折磨。你想用 React 或者 Vue 写个漂亮的弹窗（Popup），你想用 TypeScript 规范一下注入脚本（Content Script），结果一上来就被 Webpack 或者 Vite 的复杂配置教做人。你要处理各种入口文件，还要小心翼翼地维护那个古老且严格的 manifest.json。

更让人崩溃的是调试体验。以前写插件，你改了一行代码，得切到浏览器的扩展管理页面（chrome://extensions），手动点一下那个刷新小图标，然后再切回你要测试的网页，按 F5 刷新。一天下来，光是这两个连招就能把你点出腱鞘炎。

直到我在 GitHub 上刷到了 Extension.js，这玩意儿终于把浏览器插件开发拉回了现代前端该有的体验。

这项目到底是个啥？

简单来说，Extension.js 就是一个专门为了写浏览器扩展而生的、零配置的现代构建工具。

如果你写过 Next.js 或者 Nuxt，那你对它绝对不陌生。它把底层所有关于打包、编译、热更新的脏活累活全包了。你不必再去关心怎么把 React 代码编译进插件沙盒里，也不必头疼 Manifest V2 和 V3 的兼容性差异，直接在这个框架里写业务逻辑就行了。

几个非常实在的爽点

• 物理级别的自动热更新（Hot Reload）这是最戳我痛点的一个功能。你敲下 npm run dev 之后，它会在后台自动帮你拉起一个全新且纯净的 Chrome（或者 Edge）浏览器实例。 你在编辑器里保存代码，那个浏览器里的插件瞬间就自动重载了，甚至连你正在测试的网页也会跟着自动刷新。彻底告别了“修改代码 -> 找插件面板 -> 点刷新 -> 刷新网页”的非人折磨。思路再也不会被打断了。
• 开箱即用的现代技术栈以前为了在插件里用上 TypeScript 和 Tailwind CSS，得去 GitHub 上到处找别人写好的脚手架模板（Boilerplate）。但模板这东西容易生锈，过几个月依赖一升级就跑不起来了。 Extension.js 原生支持 React、Vue、Svelte 和 TypeScript。你一行命令建好项目，直接就能引入你最熟悉的现代组件库开始画 UI，没有任何阻力。
• 一次编写，全平台打包Chrome、Firefox 和 Edge 对 Manifest 的标准一直有些细微的差别。自己手搓的话，兼容起来非常恶心。这个工具底层帮你抹平了这些差异，开发完直接一条 build 命令，就能生成各个浏览器商店需要的标准 ZIP 压缩包。

折腾与上手

这种前端 CLI 工具，当然不需要你去写什么复杂的配置文件。上手极其简单。

打开你的终端，直接敲这行命令初始化项目：

# 一行命令拉起一个全功能配置的插件项目npx extension@latest create my-awesome-extension

进去看一眼它的 package.json，你会发现干净得令人发指，所有的复杂构建逻辑都被藏在 extension 这个命令行工具后面了：

{"scripts": {"dev": "extension dev","build": "extension build","preview": "extension preview"}}

想本地调试？运行 npm run dev。 写完想打包发版？运行 npm run build，拿生成的压缩包直接去上架就行了。

总结一下：如果你和我一样，只是想快速写个脚本屏蔽一下广告，或者给团队内部做个辅助工具，不想把大好周末浪费在配 Webpack 和填 Manifest 的坑上，Extension.js 绝对能让你体会到久违的代码心流。

项目地址：https://github.com/extension-js/extension.js