夜雨聆風(fēng)
2026-01-06，某些文章具有時(shí)效性，若有錯(cuò)誤或已失效，請(qǐng)?jiān)谙路?a href="#comment">留言或聯(lián)系老夜。我寫了一個(gè)超級(jí)簡(jiǎn)單的瀏覽器插件Vue開發(fā)模板
Hi!這里是JustHappy????，一時(shí)興起想開發(fā)一個(gè)瀏覽器插件，但是找來找去發(fā)現(xiàn)在Vue生態(tài)下好像沒有一個(gè)超輕的簡(jiǎn)單的模板或者腳手架，看了一圈感覺antFu大佬的vitesse-webext還不錯(cuò)，但是感覺還不夠輕，于是我打算手?jǐn)]仿寫一個(gè)簡(jiǎn)單版本
我想要一個(gè)什么樣的模板
-
技術(shù)棧輕盈：Vue + JS 越簡(jiǎn)單越好 -
支持“熱更新”：修改后立馬更新視圖
于是有了這個(gè)模板…
倉庫地址是這個(gè)：?github.com/Simonmie/vu…[1]
如何使用？很簡(jiǎn)單
你只需要在倉庫中點(diǎn)擊 use this template 就可以使用該模板去構(gòu)建插件
開始開發(fā)吧！
安裝依賴
npm install模板結(jié)構(gòu)
├── assets├── background│ ? ├── dev-hmr.js ?// 開發(fā)環(huán)境下的熱更新腳本│ ? └── main.js ?// 背景腳本├── logic│ ? └── common-setup.js ?// 公共設(shè)置腳本├── manifest.js // manifest.json 生成腳本├── options // 選項(xiàng)頁│ ? ├── OptionsPage.vue?│ ? ├── index.html│ ? └── main.js├── popup // 彈窗│ ? ├── PopupComponent.vue│ ? ├── index.html│ ? └── main.js├── sidepanel // 側(cè)邊欄│ ? ├── SidePanel.vue│ ? ├── assets│ ? │ ? └── logo.png│ ? ├── index.html│ ? └── main.js└── utils? ? ├── base.js // 基礎(chǔ)工具函數(shù)? ? └── config.js // 配置文件函數(shù)如何開發(fā)？
啟動(dòng)熱更新
npm run dev:ext安裝擴(kuò)展
-
打開 Chrome 瀏覽器。 -
點(diǎn)擊瀏覽器菜單（通常是三個(gè)垂直點(diǎn)圖標(biāo)），選擇“更多工具”>“擴(kuò)展程序”。 -
在擴(kuò)展程序頁面，打開“開發(fā)者模式”。 -
點(diǎn)擊“加載已解壓的擴(kuò)展程序”，選擇項(xiàng)目根目錄下的? extension?文件夾。
然后你就可以愉快的開始開發(fā)瀏覽器插件了。你幾乎只需要會(huì)Vue和JS就可以開發(fā)，或者結(jié)合大模型快速生成一個(gè)插件
這是我用Gemini 3 pro結(jié)合這個(gè)模板生成的其中一個(gè)插件的效果，基本上完全可用
如果你也想嘗試，這是這個(gè)插件的github倉庫地址?github.com/Simonmie/Te…[2]
下面我們來聊聊這個(gè)框架的“熱更新”原理吧….
”熱更新“原理
有人問我：“為什么這個(gè)模板能做到類似 HMR 的體驗(yàn)？瀏覽器插件不是不能熱更新嗎”
答案其實(shí)很簡(jiǎn)單：
不是模塊級(jí)熱替換，而是自動(dòng)重建 + 自動(dòng)刷新。
當(dāng)你修改代碼時(shí)：
-
構(gòu)建器會(huì)重建產(chǎn)物 -
熱更新服務(wù)會(huì)給擴(kuò)展發(fā)送通知 -
前臺(tái)視圖刷新、后臺(tái)腳本重載 -
瀏覽器擴(kuò)展整體更新
完全不需要手動(dòng)刷新窗口，不需要重新點(diǎn)擊擴(kuò)展圖標(biāo)。
更關(guān)鍵的是：整個(gè)機(jī)制非常輕，非常干凈。
一個(gè)極小的熱更新服務(wù)
模板啟動(dòng)后會(huì)同時(shí)啟動(dòng)一個(gè)本地服務(wù)，用于監(jiān)聽構(gòu)建變化并向擴(kuò)展發(fā)送消息。
這個(gè)服務(wù)通過 SSE（Server-Sent Events）工作：
-
地址類似：http://localhost:3000/extension-hmr -
構(gòu)建完成后會(huì)推送 reload 信號(hào) -
所有頁面和后臺(tái)腳本都會(huì)監(jiān)聽它
SSE 的好處是：
-
輕量 -
無需額外依賴 -
無需輪詢 -
特別穩(wěn)定
你甚至可以把它理解為：一個(gè)特別簡(jiǎn)單的“更新廣播器”。
前臺(tái)頁面如何刷新？
擴(kuò)展里的 popup、options、sidepanel 頁面都會(huì)自動(dòng)注入一個(gè)監(jiān)聽器：
-
通過 EventSource 連接 SSE 服務(wù) -
收到 reload 信號(hào) -
window.location.reload()
所以改完代碼保存后：
→ UI 會(huì)立即重新加載
→ 新的代碼會(huì)直接生效
不用點(diǎn)擊，不用重打開 popup 頁面，連 DevTools 都不用動(dòng)。
后臺(tái)腳本如何更新？
在開發(fā)模式下，后臺(tái)腳本并不會(huì)直接運(yùn)行正式的 background 邏輯，而是先接入一個(gè)開發(fā)專用的腳本。
這個(gè)腳本專門負(fù)責(zé)監(jiān)聽 SSE：
-
收到消息 -
chrome.runtime.reload()
這會(huì)讓整個(gè)擴(kuò)展瞬間重載：
-
UI 刷新 -
腳本刷新 -
狀態(tài)重置
這種方式非常適合開發(fā)場(chǎng)景，因?yàn)椴挥脫?dān)心緩存、不一致、后臺(tái)仍在運(yùn)行等問題。
自動(dòng)重連機(jī)制
SSE 連接如果斷開，比如：
-
小斷網(wǎng) -
瀏覽器切換標(biāo)簽 -
系統(tǒng)休眠 -
構(gòu)建器重啟
擴(kuò)展會(huì)自動(dòng)重試連接。
這意味著：
你只需要改代碼 → 保存 → 瀏覽器自動(dòng)更新
不用關(guān)心底層連接是否斷過、重連過。
它就是一直能用。
如果這對(duì)你有幫助，哈哈求個(gè)star?，模板大概率還有很多不足，歡迎大家提交issue、pr等，或者單純騷擾我??
鏈接：https://juejin.cn/post/7585406229167865906
作者：JustHappy
