夜雨聆风Hi!这里是JustHappy🚀🚀，一时兴起想开发一个浏览器插件，但是找来找去发现在Vue生态下好像没有一个超轻的简单的模板或者脚手架，看了一圈感觉antFu大佬的vitesse-webext还不错，但是感觉还不够轻，于是我打算手撸仿写一个简单版本
我想要一个什么样的模板
•技术栈轻盈：Vue + JS 越简单越好•支持“热更新”：修改后立马更新视图
于是有了这个模板...
仓库地址是这个： github.com/Simonmie/vu…[1]
如何使用？很简单
你只需要在仓库中点击 use this template 就可以使用该模板去构建插件
开始开发吧！
安装依赖
npm
体验AI代码助手
代码解读
复制代码
npm install模板结构
bash
体验AI代码助手
代码解读
复制代码
├── assets├── background│├── dev-hmr.js //开发环境下的热更新脚本│└── main.js //背景脚本├── logic│└── common-setup.js //公共设置脚本├── manifest.js // manifest.json 生成脚本├── options //选项页│├──OptionsPage.vue │├── index.html│└── main.js├── popup //弹窗│├──PopupComponent.vue│├── index.html│└── main.js├── sidepanel //侧边栏│├──SidePanel.vue│├── assets││└── logo.png│├── index.html│└── main.js└── utils├── base.js //基础工具函数└── config.js //配置文件函数如何开发？
启动热更新
npm
体验AI代码助手
代码解读
复制代码
npm run dev:ext安装扩展
1.打开 Chrome 浏览器。2.点击浏览器菜单（通常是三个垂直点图标），选择“更多工具”>“扩展程序”。3.在扩展程序页面，打开“开发者模式”。4.点击“加载已解压的扩展程序”，选择项目根目录下的 extension 文件夹。
然后你就可以愉快的开始开发浏览器插件了。你几乎只需要会Vue和JS就可以开发，或者结合大模型快速生成一个插件
这是我用Gemini 3 pro结合这个模板生成的其中一个插件的效果，基本上完全可用
如果你也想尝试，这是这个插件的github仓库地址 github.com/Simonmie/Te…[2]
下面我们来聊聊这个框架的“热更新”原理吧....
”热更新“原理
有人问我：“为什么这个模板能做到类似 HMR 的体验？浏览器插件不是不能热更新吗”
答案其实很简单：
不是模块级热替换，而是自动重建 + 自动刷新。
当你修改代码时：
•构建器会重建产物•热更新服务会给扩展发送通知•前台视图刷新、后台脚本重载•浏览器扩展整体更新
完全不需要手动刷新窗口，不需要重新点击扩展图标。
更关键的是：整个机制非常轻，非常干净。
一个极小的热更新服务
模板启动后会同时启动一个本地服务，用于监听构建变化并向扩展发送消息。
这个服务通过 SSE（Server-Sent Events）工作：
•地址类似：http://localhost:3000/extension-hmr[3]•构建完成后会推送 reload 信号•所有页面和后台脚本都会监听它
SSE 的好处是：
•轻量•无需额外依赖•无需轮询•特别稳定
你甚至可以把它理解为：一个特别简单的“更新广播器”。
前台页面如何刷新？
扩展里的 popup、options、sidepanel 页面都会自动注入一个监听器：
1.通过 EventSource 连接 SSE 服务2.收到 reload 信号3.window.location.reload()
所以改完代码保存后：
→ UI 会立即重新加载
→ 新的代码会直接生效
不用点击，不用重打开 popup 页面，连 DevTools 都不用动。
后台脚本如何更新？
在开发模式下，后台脚本并不会直接运行正式的 background 逻辑，而是先接入一个开发专用的脚本。
这个脚本专门负责监听 SSE：
1.收到消息2.chrome.runtime.reload()
这会让整个扩展瞬间重载：
•UI 刷新•脚本刷新•状态重置
这种方式非常适合开发场景，因为不用担心缓存、不一致、后台仍在运行等问题。
自动重连机制
SSE 连接如果断开，比如：
•小断网•浏览器切换标签•系统休眠•构建器重启
扩展会自动重试连接。
这意味着：
你只需要改代码 → 保存 → 浏览器自动更新
不用关心底层连接是否断过、重连过。
它就是一直能用。
如果这对你有帮助，哈哈求个star✨，模板大概率还有很多不足，欢迎大家提交issue、pr等，或者单纯骚扰我😜
引用链接
[1] https://github.com/Simonmie/vue-chrome-extension-template: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FSimonmie%2Fvue-chrome-extension-template[2] https://github.com/Simonmie/Text-extraction-tool: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FSimonmie%2FText-extraction-tool[3] http://localhost:3000/extension-hmr: https://link.juejin.cn/?target=
