如何开始开发浏览器插件

虽说开发浏览器插件就是使用前端的技术，但接口和工作方式还是和网页有些不同，所以找一些开发框架还是能提高不少效率的。而浏览器插件相比网页和 app 开发还是小众领域，开发者社区明显没有后者那么热闹。幸好该有的开发工具也都齐全了，这里梳理一下我用过的。

现在各大主流浏览器的插件开发都遵循统一标准： manifest v3，因此开发过程和技术栈都差不多。在一些细节上可能不一样，我会把我遇到的地方标注出来。

开发框架

一个合格的开发框架至少要建立 repo 结构、支持 hot reload 调试、支持浏览器插件的接口类型提示等等。以下这些技术栈选择一个即可。

代码仓库模板

React + typescript + vite + monorepo: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

准确的说它是一个模板，不是框架。它包含了一个开发框架应有的功能。对于浏览器插件这样接口不太复杂的开发，我个人更喜欢展现所有细节的仓库模板，而不是隐藏实现细节的框架。

• 支持 HMR, sourcemap 等
• 使用 pnpm + turbo 来管理 monorepo
• 给出了 chrome 插件所有功能的实现，包括标签页首页、devtools、侧边栏等等，方便参考和替换
• 打包给 chrome, firefox 等所有主流浏览器。对 firefox 默认做了兼容
• 没有隐藏的细节，所有代码都展示出来，方便理解和修改

Plasmo

如果你不喜欢上面的模板，可以考虑 Plasmo 框架

• 支持 react, vue, angular 等主流框架
• 支持 HMR 等调试功能
• 采用 Parcel 打包，没有用 vite
• 一些细节（比如生成 manifest，渲染 content UI 的过程）被封装了，不好理解

调试

• 加载插件
  • repo 里运行 npm dev
  • chrome 里打开扩展程序： chrome://extensions/
  • 打开“开发者模式” -> 点击“加载已解压的扩展程序” -> 选择编译后输出的文件夹
• 调试都是通过 chrome devtools 实现的实现的
  • content scripts： 在“源代码”标签页中选择“content scripts”可以调试代码
  • background script 运行在 service worker 里，所以打开 chrome://extensions/ -> 找到扩展程序 -> 点击 service worker 可以调试代码