Plasmo 框架是一個(gè)開(kāi)源的瀏覽器擴(kuò)展 SDK，支持所有主流的瀏覽器，構(gòu)建你的插件，無(wú)需擔(dān)心配置文件編寫(xiě)和構(gòu)建瀏覽器擴(kuò)展時(shí)的奇怪特性，plasmo 幫助我們屏蔽了底層的差異。

特性

• 支持 React + Typescript。
• 聲明式開(kāi)發(fā)，自動(dòng)生成manifest.json (MV3)。
• 熱加載。
• .env* 文件。
• 遠(yuǎn)程代碼打包 (例如：使用 gtag4 )。
• 自動(dòng)部署 (通過(guò) BPP )。

基本使用

要使用 plasmo，首先需要滿足下面的系統(tǒng)需求：

• Node.js 16.x 及以上。
• MacOS、Windows 或 Linux。
• 強(qiáng)烈推薦使用 pnpm。

然后使用下面的命令初始化項(xiàng)目：

pnpm dlx plasmo init
# 或者使用 npm v7
npm x plasmo init

要跳過(guò)命名提示，可以直接通過(guò)提供名稱(chēng)作為位置參數(shù)：

pnpm dlx plasmo init "My Awesome Extension"
# OR npm v7
npm x plasmo init "My Awesome Extension"

上面的命令會(huì)創(chuàng)建一個(gè)最簡(jiǎn)單的 plasmo 瀏覽器插件項(xiàng)目，結(jié)構(gòu)很簡(jiǎn)單。

對(duì)應(yīng)的這些文件用途如下所示：

我們可以構(gòu)建一個(gè)開(kāi)發(fā)版本來(lái)支持實(shí)時(shí)重新加載：

pnpm dev

這將在 build/chrome-mv3-dev 中創(chuàng)建擴(kuò)展的構(gòu)建版本，如果要構(gòu)建生產(chǎn)環(huán)境版本，請(qǐng)使用下面的命令：

pnpm build

這將在 build/chrome-mv3-prod 中創(chuàng)建擴(kuò)展的生產(chǎn)版本。此外還可以選擇為構(gòu)建命令提供 --zip 標(biāo)志以創(chuàng)建準(zhǔn)備上傳到網(wǎng)上商店的 zip 包：

pnpm build -- --zip
# OR
npm run build -- --zip
# OR
plasmo build --zip

構(gòu)建完成后可以在 Chrome 瀏覽器中去加載我們的插件，首先前往 chrome://extensions 并啟用開(kāi)發(fā)者模式。

然后點(diǎn)擊 Load Unpacked? 并導(dǎo)航到擴(kuò)展程序的 build/chrome-mv3-dev?（或 build/chrome-mv3-prod）目錄加載插件。

要查看你的彈出窗口，請(qǐng)單擊 Chrome 工具欄上的 pin 圖標(biāo)，然后單擊你的擴(kuò)展程序，將擴(kuò)展程序固定到 Chrome 工具欄可以更方便訪問(wèn)。

要深入了解如何使用 Plasmo，可以查看工作流部分相關(guān)文檔 https://docs.plasmo.com/workflows 每個(gè)工作流都附帶一個(gè)模塊化的示例，在 GitHub 倉(cāng)庫(kù)中也有對(duì)應(yīng)的示例代碼。

Git倉(cāng)庫(kù)：https://github.com/PlasmoHQ/plasmo。