大家好，我是 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 可以通通幫我們搞定。

后續需要開發瀏覽器擴展的小伙伴可以收藏起來了 ～