大家好，我是 ConardLi。

實(shí)際上我們平時說的瀏覽器插件指的就是瀏覽器擴(kuò)展，它可以幫助我們實(shí)現(xiàn)非常多強(qiáng)大的能力。以我們最常接觸到的 Chrome? 擴(kuò)展 (Chrome Extension) 為例，它可以幫助我們實(shí)現(xiàn)請求的抓取和劫持、各種事件監(jiān)聽、瀏覽器窗口控制、更改網(wǎng)頁內(nèi)容等等。

實(shí)際上啊，瀏覽器擴(kuò)展用到的技術(shù)非常簡單，就是 Web? 技術(shù)，只需要幾個簡單的 HTML、CSS、JS 文件，以及瀏覽器規(guī)定的擴(kuò)展文件就可以運(yùn)行起來，不過下面幾個問題可能讓我們開發(fā)起來有些阻礙：

• 技術(shù)棧：想要更好的維護(hù)一個大型的項(xiàng)目，我們肯定要引入 React、Vue、TypeScript、Webpack 等現(xiàn)代的開發(fā)方式，目前各瀏覽器的擴(kuò)展沒有比較成熟的腳手架工具。
• 部署發(fā)布：發(fā)布過程比較麻煩，如果你的插件想要盡可能多的在不同環(huán)境生效，你需要把開發(fā)好的程序進(jìn)行適配，并且手動發(fā)布到不同的瀏覽器（如 Chrome、Firefox、Edge）擴(kuò)展商店。

Plasmo

不過，最近我在 Github? 上發(fā)現(xiàn)了一個專門為開發(fā)一個瀏覽器擴(kuò)展提供的框架：Plasmo。

https://github.com/PlasmoHQ/plasmo

剛剛開源不久，就獲得了 2.4k star，看來大家對這方面的痛點(diǎn)還是很大的。

Plasmo? 的官方是這樣描述它的：就像瀏覽器擴(kuò)展的 Next.js！

開發(fā)

框架默認(rèn)支持了 React + Typescript? 技術(shù)棧，你可以基本告別自己用 create-react-app 去搭了。。

我們可以用下面的命令直接創(chuàng)建一個工程：

npm x plasmo init

初始化出來的工程非常簡潔清晰：

popup.tsx? 是一個默認(rèn)導(dǎo)出的 React 組件，也就是我們點(diǎn)擊插件時的彈出框；assets 會存放一些我們插件中必備的圖標(biāo)；其他的都是項(xiàng)目的基本配置。

另外，在官方文檔（https://docs.plasmo.com/quickstarts）中給出了和下面一些不同技術(shù)棧的搭配開發(fā)的能力：

• Next.js
• Stripe
• Redux
• Tailwind CSS
• Google Analytics
• Supabase Authentication
• Firebase Authentication

你可以根據(jù)你自己的需要進(jìn)行搭配，也可參考官方的實(shí)示例存儲庫：https://github.com/PlasmoHQ/examples

調(diào)試

調(diào)試的話也非常簡單，你只需要前往 chrome://extensions? 并啟用開發(fā)人員模式，然后在項(xiàng)目中執(zhí)行 npm dev?，然后點(diǎn)擊 Load Unpacked? 并導(dǎo)航到擴(kuò)展程序的 build/chrome-mv3-dev 就可以了。

這時你會發(fā)現(xiàn)你的瀏覽器擴(kuò)展擁有熱更新的能力！真的很 nice。

發(fā)布

Plasmo? 框架附帶一個方便的 GitHub? 操作，稱為 Browser Platform Publish?或 BPP。這個功能可以自動將你的擴(kuò)展發(fā)布到所有受支持的瀏覽器擴(kuò)展市場。

• Browser Market Submit
• Mozilla Webstore Upload
• Chrome Webstore Upload
• Edge Webstore Upload

你只需要在項(xiàng)目里創(chuàng)建一個 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 配合使用～

好了，就是這么簡單，基于這個框架去開發(fā)一個瀏覽器擴(kuò)展，我們只需要去關(guān)注業(yè)務(wù)的核心邏輯，其他的環(huán)境、配置、部署、發(fā)布，Plasmo 可以通通幫我們搞定。

后續(xù)需要開發(fā)瀏覽器擴(kuò)展的小伙伴可以收藏起來了 ～