浏览器插件V3版
架构图
技术栈
- 框架层：vue3.5 + vite5
- UI：
- content层采用element-plus
- popup层采用了vant
- 库：
- vueuse
- vue-router (可用于popup层)
- pinia
- lodash-es
- axios
- jquery
- ...
以百度页展示效果
《popup效果》
《content往页面注入的效果》
《content注入的内容跑多个web-worker任务效果》
项目结构核心板块概览
.
├── dist # 构建出来的文件目录，浏览器安装时候引入的就是这个目录
│ ├── background
│ │ ├── background.ts
│ ├── content
│ │ ├── content.css
│ │ ├── content.js
│ ├── popup
│ │ ├── assets
│ │ ├── index.html
│ ├── logo.png
│ ├── manifest.json
├── manifest.json # 插件入口文件
├── index.html # popup入口html
├── content.html # 注入代码content.js的入口html，构建时用不到，开发时可用于起服务调试
├── vite.background.config.ts # background vite入口
├── vite.content.config.ts # content vite入口
├── vite.popup.config.ts # popup vite入口
├── .env.dev # 开发环境配置文件
├── .env.test # 测试环境配置文件
├── .env.prod # 生产环境配置文件
├── build # 构建脚本目录
│ ├── build-background.ts # 构建background
│ ├── build-content.ts # 构建content
│ ├── build-popup.ts # 构建popup
│ ├── build.ts # 构建总入口
│ ├── deploy.ts # 发布
│ ├── notice.ts # 通知,比如钉钉群
├── plugins # vite插件目录
├── src # 插件的代码目录
│ ├── assets # 静态资源
│ ├── background # background层
│ │ ├── service-worker.ts # background层入口文件
│ ├── content # content层-注入到页面中(基于vue3开发)
│ │ ├── components
│ │ ├── stores
│ │ ├── services
│ │ ├── scenes # 注入的不同场景，这里是开发的核心区域，根据业务场景进行划分
│ │ │ ├── scene1
│ │ │ ├── scene2
│ │ │ ├── scene3
│ │ ├── App.vue
│ │ ├── init.ts
│ │ ├── main.ts
│ ├── popup # popup层 (基于vue3开发)
│ │ ├── components
│ │ ├── stores
│ │ ├── services
│ │ ├── routes
│ │ ├── views
│ │ ├── App.vue
│ │ ├── init.ts
│ │ ├── main.ts
│ └── tasks # web-worker 耗时任务处理
│ │ ├── task-1.ts
│ │ ├── task-2.ts
│ └── utils
│ │ ├── worker.ts # 对web-worker封装
│ │ ├── storage.ts # 对chrome.storage.local封装
│ │ ├── event.ts # 通信事件封装，content, background, popup之间的通信流
待办事项
- 1 支持本地开发热更新：目前实现的效果是文件改动，可以自动打包构建，但还是需要手动去浏览器插件刷新，目前能想到的方案是基于websocket，待实践
- 2 支持远程热更新：希望用户端安装一次后，后续如果有版本更新，则不需要再次安装，在v2版本中，可以基于eval()或者new Function()来动态执行，可以达到实现远程热更新，但是v3版本禁用了，暂时没有想到好的方式来实现，希望有大佬可以提供下思路。
- 3 支持国际化
