開發一個瀏覽器插件從未如此簡單 ...
大家好，我是 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 可以通通幫我們搞定。
后續需要開發瀏覽器擴展的小伙伴可以收藏起來了 ～
