開發一個瀏覽器插件從未如此簡單
大家好，我是 ConardLi。
實際上我們平時說的瀏覽器插件指的就是瀏覽器擴展，它可以幫助我們實現非常多強大的能力。以我們最常接觸到的 Chrome 擴展 (Chrome Extension) 爲例，它可以幫助我們實現請求的抓取和劫持、各種事件監聽、瀏覽器窗口控制、更改網頁內容等等。
實際上啊，瀏覽器擴展用到的技術非常簡單，就是 Web 技術，只需要幾個簡單的 HTML、CSS、JS 文件，以及瀏覽器規定的擴展文件就可以運行起來，不過下面幾個問題可能讓我們開發起來有些阻礙：
「技術棧」
想要更好的維護一個大型的項目，我們肯定要引入 React、Vue、TypeScript、Webpack 等現代的開發方式，目前各瀏覽器的擴展沒有比較成熟的腳手架工具。
「部署發佈」
發佈過程比較麻煩，如果你的插件想要儘可能多的在不同環境生效，你需要把開發好的程序進行適配，並且手動發佈到不同的瀏覽器（如 Chrome、Firefox、Edge）擴展商店。
Plasmo
不過，最近我在 Github 上發現了一個專門爲開發一個瀏覽器擴展提供的框架：Plasmo。
https://github.com/PlasmoHQ/plasmo
剛剛開源不久，就獲得了 2.4k star，看來大家對這方面的痛點還是很大的。
Plasmo 的官方是這樣描述它的：就像瀏覽器擴展的 Next.js！
開發
框架默認支持了 React + Typescript 技術棧，你可以基本告別自己用 create-react-app 去搭了。。
我們可以用下面的命令直接創建一個工程：
npm x plasmo init初始化出來的工程非常簡潔清晰：
popup.tsx 是一個默認導出的 React 組件，也就是我們點擊插件時的彈出框；assets 會存放一些我們插件中必備的圖標；其他的都是項目的基本配置。
另外，在官方文檔（https://docs.plasmo.com/quickstarts）中給出了和下面一些不同技術棧的搭配開發的能力：
-
Next.js -
Stripe -
Redux -
Tailwind CSS -
Google Analytics -
Supabase Authentication -
Firebase Authentication
你可以根據你自己的需要進行搭配，也可參考官方的實示例存儲庫：https://github.com/PlasmoHQ/examples
調試
調試的話也非常簡單，你只需要前往 chrome://extensions 並啓用開發人員模式，然後在項目中執行 npm dev，然後點擊 Load Unpacked 並導航到擴展程序的 build/chrome-mv3-dev 就可以了。
這時你會發現你的瀏覽器擴展擁有熱更新的能力！真的很 nice。
發佈
Plasmo 框架附帶一個方便的 GitHub 操作，稱爲 Browser Platform Publish或 BPP。這個功能可以自動將你的擴展發佈到所有受支持的瀏覽器擴展市場。
-
Browser Market Submit -
Mozilla Webstore Upload -
Chrome Webstore Upload -
Edge Webstore Upload
你只需要在項目裏創建一個 keys.json 文件，然後將不同瀏覽器的配置填入文件就可以了，真的非常簡單：
{
"$schema": "https://raw.githubusercontent.com/plasmo-corp/bpp/v2/keys.schema.json",
"chrome": {
"clientId": "xxx",
"refreshToken": "xxx",
"extId": "xxx"
},
"edge": {
"clientId": "ConardLi",
"clientSecret": "code祕密花園",
"productId": "xxx",
"accessTokenUrl": "https://login.xxx/oauth2/v2.0/token"
}
}爲了安全起見，密鑰注意不要直接提交到
Github上，最好和Github的Encrypted secrets配合使用～
好了，就是這麼簡單，基於這個框架去開發一個瀏覽器擴展，我們只需要去關注業務的核心邏輯，其他的環境、配置、部署、發佈，Plasmo 可以通通幫我們搞定。
後續需要開發瀏覽器擴展的小夥伴可以收藏起來了 ～
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Q2Dx45dOnqrwthllOEahDg