Extension.js：浏览器扩展开发，不需要配构建工具了

文章目录Extension.js浏览器扩展开发不需要配构建工具了一句话概括解决了什么问题怎么用同类对比Extension.js浏览器扩展开发不需要配构建工具了写过浏览器扩展的人都知道这个领域的开发体验一直不太行。Manifest V3 在各个浏览器上的实现有差异Chrome 和 Firefox 的配置不同内容脚本没有热更新每个目标浏览器要维护一套构建流水线。Extension.js 想把这些麻烦事一次性解决掉拿到了 5000 Star。一句话概括Extension.js 是一个零配置的浏览器扩展开发工具一套命令行完成 Chrome、Edge、Firefox 的扩展开发、调试和打包。安装就一行命令npx extensionlatest create my-extension cd my-extension npm run dev支持 npm、pnpm、yarn、bun 四种包管理器。解决了什么问题扩展开发最烦人的是环境配置。Extension.js 直接内置了所有能力热模块替换background、content script、popup、options 脚本都支持热更新React、Vue、Svelte、Preact 组件也可以Manifest V3 默认自动适配 Chrome、Edge、Firefox 三种浏览器的差异零配置不需要 webpack、rollup不需要手动维护任何插件一键打包extension build --zip直接生成商店可用的 ZIP怎么用多浏览器开发运行时用--browser参数指定目标npx extensionlatest dev --browserchrome npx extensionlatest dev --browseredge npx extensionlatest dev --browserfirefox也可以指定自定义浏览器路径用于测试特定版本。生产打包一条命令搞定构建和打包npx extensionlatest build --zip还可以加上--zip-source带上源码商店审核需要--zip-filename自定义文件名。管理浏览器如果你不想用系统里装的浏览器Extension.js 可以自己下载和管理独立的浏览器实例npx extensionlatest install firefox npx extensionlatest install --browserall接入现有项目作为 devDependency 安装即可npm install extensionlatest --save-dev在 package.json 里加三个脚本{scripts:{build:extension build,dev:extension dev,preview:extension preview}}直接跑 GitHub 上的例子Extension.js 可以远程拉取 Chrome Extension Samples 里的任何一个示例直接运行npx extensionlatest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browseredge同类对比目前市面上做类似事情的工具还有 Plasmo、WXT、CRXJS。Extension.js 的区别在于两点一是可以直接从 GitHub URL 运行任何示例代码不需要先 clone二是可以管理独立的浏览器二进制文件不污染系统环境。对比下来如果你需要一套覆盖 Chrome、Edge、Firefox 的扩展开发方案想省掉配置 webpack 这类工具的精力Extension.js 是个不错的选择。项目地址extension-js/extension.jsme、Edge、Firefox 的扩展开发方案想省掉配置 webpack 这类工具的精力Extension.js 是个不错的选择。项目地址extension-js/extension.js