🔧 阿川の電商水電行
「chrome 擴充功能🛠️」我寫了一個超簡單的瀏覽器插件 Vue 開發模板
嗨！這裡是 JustHappy🚀🚀，一時興起想開發一個瀏覽器插件，但找來找去發現在 Vue 生態中似乎沒有一個超輕的簡單模板或腳手架，看了一圈覺得 antFu 大佬的 vitesse-webext 還不錯，但感覺還不夠輕，於是我打算手工仿寫一個簡單版本。
我想要一個什麼樣的模板
- 技術棧輕盈：Vue + JS 越簡單越好
- 支援「熱更新」：修改後立馬更新視圖
於是有了這個模板...
倉庫地址是這個： github.com/Simonmie/vue-chrome-extension-template
如何使用？很簡單
你只需要在倉庫中點擊 use this template 就可以使用該模板去構建插件
開始開發吧！
安裝依賴
npm install模板結構
├── 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 run dev:ext安裝擴充功能
- 打開 Chrome 瀏覽器。
- 點擊瀏覽器選單（通常是三個垂直點圖標），選擇「更多工具」>「擴充功能」。
- 在擴充功能頁面，打開「開發者模式」。
- 點擊「載入已解壓的擴充功能」，選擇專案根目錄下的
extension目錄。
然後你就可以愉快的開始開發瀏覽器插件了。你幾乎只需要會 Vue 和 JS 就可以開發，或結合大模型快速生成一個插件
這是我用 Gemini 3 pro 結合這個模板生成的其中一個插件的效果，基本上完全可用
如果你也想嘗試，這是這個插件的 GitHub 倉庫地址 github.com/Simonmie/Text-extraction-tool
下面我們來聊聊這個框架的「熱更新」原理吧....
「熱更新」原理
有人問我：「為什麼這個模板能做到類似 HMR 的體驗？瀏覽器插件不是不能熱更新嗎？」
答案其實很簡單：
不是模組級熱替換，而是自動重建 + 自動刷新。
當你修改代碼時：
- 構建器會重建產物
- 熱更新服務會給擴充功能發送通知
- 前台視圖刷新、後台腳本重載
- 瀏覽器擴充功能整體更新
完全不需要手動刷新窗口，不需要重新點擊擴充功能圖標。
更關鍵的是：整個機制非常輕，非常乾淨。
一個極小的熱更新服務
模板啟動後會同時啟動一個本地服務，用於監聽構建變化並向擴充功能發送消息。
這個服務通過 SSE（Server-Sent Events）工作：
- 地址類似：http://localhost:3000/extension-hmr
- 構建完成後會推送 reload 信號
- 所有頁面和後台腳本都會監聽它
SSE 的好處是：
- 輕量
- 無需額外依賴
- 無需輪詢
- 特別穩定
你甚至可以把它理解為：一個特別簡單的「更新廣播器」。
前台頁面如何刷新？
擴充功能裡的 popup、options、sidepanel 頁面都會自動注入一個監聽器：
- 透過 EventSource 連接 SSE 服務
- 收到 reload 信號
window.location.reload()
所以改完代碼保存後：
→ UI 會立即重新加載
→ 新的代碼會直接生效
不用點擊，不用重打開 popup 頁面，連 DevTools 都不用動。
後台腳本如何更新？
在開發模式下，後台腳本並不會直接運行正式的 background 邏輯，而是先接入一個開發專用的腳本。
這個腳本專門負責監聽 SSE：
- 收到消息
chrome.runtime.reload()
這會讓整個擴充功能瞬間重載：
- UI 刷新
- 腳本刷新
- 狀態重置
這種方式非常適合開發場景，因為不用擔心快取、不一致、後台仍在運行等問題。
自動重連機制
SSE 連接如果斷開，比如：
- 小斷網
- 瀏覽器切換標籤
- 系統休眠
- 構建器重啟
擴充功能會自動重試連接。
這意味著：
你只需要改代碼 → 保存 → 瀏覽器自動更新
不用關心底層連接是否斷過、重連過。
它就是一直能用。
如果這對你有幫助，哈哈求個 star✨，模板大概率還有很多不足，歡迎大家提交 issue、pr 等，或者單純騷擾我😜
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
