基於 Vite + React 構建 Chrome Extension (MV3) 開發環境

前言

此前一直想作一個 bilibili 的彈幕擴展，最近藉着研究 Vite 的契機實操了一下，花了兩天時間算是搭好了基於 Vite + React 的 Chrome Extension (MV3) 開發環境，核心功能以下：

• 📦️ JS 打包成單文件
• 🎨 自動引入 CSS
• 🔨 打包 service worker
• 🚀 開發環境熱更新

這裏重點介紹一下當前熱更新的實現，其餘功能相對而言簡單不少，詳情可參考 theprimone/violet

一次偶然的機會在 B 站看了 《紫羅蘭永恆花園》，給人印象深入，恰好此次打算作個 bilibili 的彈幕擴展，索性就取了女主名字中的 violet 😃

實操

熱更新大體的流程以下圖所示：

啓動

經過 npm run dev 同時執行三個命令：

• tsc 編譯 service worker 並監聽變化
• vite 編譯 extension
• websocket 服務監聽打包後目錄 /dist 的變化

其中，因爲 vite build --watch 還未發佈，暫時經過自定義腳本監聽源碼變化，待 vite 該功能發佈後可移除。

熱更新

瀏覽器頁面加載 content scripts 後會建立一個 websocket 連接，服務端收到請求後會開啓對 /dist 目錄的監聽，websocket 服務監聽到 /dist 的變化後主動發起通知。

content scripts 收到須要更新 Extension 的通知，經過 chrome.runtime.sendMessage 觸發 service worker 中經過 chrome.runtime.onMessage 註冊的事件，依次觸發 chrome.runtime.reload 和 chrome.tabs.reload 更新 Extension 和當前頁面。實現了所寫即所得，無需任何手動介入 🚀

可能會有讀者有個疑問，爲何不直接在 service worker 中監聽 websocket 的通知呢？

此前一直也是這麼想的，在 Manifest V3 下使用 service worker 提倡 Thinking with events，經過 chrome.runtime.onInstalled 和 chrome.runtime.onStartup 建立 websocket 客戶端會被意外的關閉，即使是使用定時器輪詢也會在執行屢次以後被關閉再啓動。所以，當前找到的最佳方案是在 service worker 中監聽 chrome.runtime.onMessage 事件。

這樣就實現了當頁面加載當前 Extension 時纔會觸發熱更新的流程。

總結

因爲如今的 Chrome Extension 大可能是低於 MV3 版本的，兩天下來，踩了很多坑，對於此前沒有接觸過的瀏覽器擴展開發也有了必定程度的瞭解。如今只是針對 Chrome Extension 的場景，後續會在不斷完善當前場景的狀況下，完成對其餘瀏覽器擴展的支持。最終應該能夠封裝一個瀏覽器擴展開發的工具。