大家好，我是 ConardLi。

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

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

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

Plasmo

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

https://github.com/PlasmoHQ/plasmo

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

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

開(kāi)發(fā)

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

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

npm x plasmo init

初始化出來(lái)的工程非常簡(jiǎn)潔清晰：

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

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

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

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

調(diào)試

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

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

發(fā)布

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

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

你只需要在項(xiàng)目里創(chuàng)建一個(gè) keys.json 文件，然后將不同瀏覽器的配置填入文件就可以了，真的非常簡(jiǎn)單：

{
  "$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"
  }
}

為了安全起見(jiàn)，密鑰注意不要直接提交到 Github? 上，最好和 Github? 的 Encrypted secrets 配合使用～

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

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