前言
近期在开发浏览器插件的时候，看到一篇很好的文章：chrome浏览器Extension插件开发框架对比和介绍
比较详细的介绍了浏览器插件的开发框架：
1.Plasmo Framework
注：亲测按照官方的启动命令：pnpm create plasmo，启动报错。暂时跳过。
2.Chrome Extension (MV3) Boilerplate with React 18 and Webpack 5
注：仓库最后更新时间是两年前，有点老了，不考虑。
3.Chrome Extension TypeScript Starter
注：使用React 组件库，本人不熟悉，跳过。
4.Create Chrome Extension (.crx)
注：虽然更新是在1年前，但是这个框架提供很多的开发模板，而且初步测试一键启动无bug，采用！
亮点：
🚀 敏捷的热更能力(采用 Vite4)
🥡 开箱即用
🌈 多种前端框架支持（React · Vue · Svelte · Preact · Solid · Alpine · Lit · Inferno · Stencil · Vanilla）
🥢 多语言支持（JavaScript · TypeScript）
就是初始化的样式有点丑，字体有点小，稍微花了一点时间二次开发优化了一下样式和交互的逻辑。
修改后的源码发布到我的仓库：template-chrome-crx-vue-js
简介
这是一个基于 create-chrome-ext 二次开发的快速开发浏览器扩展插件的模板。
一个基于 Vite + Vue 和 Manifest v3 构建的 Chrome 扩展工具， 支持热重载 ，一键启动开发。
提供弹窗、侧边栏、调试工具栏、扩展插件选项页面、新建标签页的具体示例。
在原本的基础上，优化美化了显示样式。
源码仓库地址：template-chrome-crx-vue-js
快速启动
- 下载：git clone gitcode.com/BluerAngala… Node.js 版本 >= 14。
- 在 src/manifest 中更改或配置你的扩展名称。
- 运行 npm install 安装依赖。
- 运行 npm run dev 进行测试。
开发
运行以下命令：
$ cd my-crx
$ npm run dev
Chrome 扩展开发者模式
- 打开 Chrome 浏览器的“开发者模式”
- 点击“加载已解压的扩展”，选择 my-crx/build 文件夹
普通前端开发模式
- 访问 http://0.0.0.0:3000/
- 调试弹窗页面时，打开 http://0.0.0.0:3000//popup.html
- 调试选项页面时，打开 http://0.0.0.0:3000//options.html
打包
扩展开发完成后，运行以下命令：
$ npm run build
此时，build 文件夹中的内容就是可以提交到 Chrome Web Store 的扩展包。详情请参考 官方指南 获取更多发布信息。
主要页面及功能
1.popup.html / src/popup/Popup.vue
-
功能：弹出页（Popup），通常在点击浏览器扩展图标时显示。
-
具体功能：
- 一个简单的计数器（加减按钮，数据持久化在 chrome.storage.sync）。
- “打开侧边栏”按钮（通过消息通知后台打开扩展侧边栏）。
- 页脚有项目链接。
2.sidepanel.html / src/sidepanel/SidePanel.vue
- 功能：扩展的侧边栏页面。
- 具体功能：需查看源码细节，但一般用于在浏览器侧边栏展示扩展内容。
3.options.html / src/options/Options.vue
- 功能：扩展的“选项”页面，用户可以在这里设置扩展的相关配置。
- 具体功能：具体内容需看源码，但一般为设置项表单等。
4.newtab.html / src/newtab/NewTab.vue
- 功能：新标签页页面，安装扩展后可替换浏览器新标签页。
- 具体功能：具体内容需看源码，通常为自定义的新标签页内容。
5.devtools.html / src/devtools/DevTools.vue
- 功能：开发者工具页面，扩展可在 Chrome DevTools 中嵌入自定义面板。
- 具体功能：具体内容需看源码，通常为调试或开发辅助工具。
6.contentScript/index.js
- 功能：内容脚本，注入到网页中实现与页面的交互。
- 具体功能：需看源码，通常用于操作网页 DOM 或与页面通信。
7.background/index.js
- 功能：后台脚本，负责扩展的全局逻辑和事件监听。
- 具体功能：如消息转发、持久化、与浏览器 API 交互等。
