一個構(gòu)建現(xiàn)代瀏覽器插件的框架 - Plasmo
Plasmo 框架是一個開源的瀏覽器擴展 SDK，支持所有主流的瀏覽器，構(gòu)建你的插件，無需擔心配置文件編寫和構(gòu)建瀏覽器擴展時的奇怪特性，plasmo 幫助我們屏蔽了底層的差異。
特性
- 支持 React + Typescript。
- 聲明式開發(fā)，自動生成manifest.json (MV3)。
- 熱加載。
- .env* 文件。
- 遠程代碼打包 (例如：使用 gtag4 )。
- 自動部署 (通過 BPP )。
基本使用
要使用 plasmo，首先需要滿足下面的系統(tǒng)需求：
- Node.js 16.x 及以上。
- MacOS、Windows 或 Linux。
- 強烈推薦使用 pnpm。
然后使用下面的命令初始化項目：
pnpm dlx plasmo init
# 或者使用 npm v7
npm x plasmo init
要跳過命名提示，可以直接通過提供名稱作為位置參數(shù)：
pnpm dlx plasmo init "My Awesome Extension"
# OR npm v7
npm x plasmo init "My Awesome Extension"
上面的命令會創(chuàng)建一個最簡單的 plasmo 瀏覽器插件項目，結(jié)構(gòu)很簡單。
對應(yīng)的這些文件用途如下所示：
文件名 | 描述 |
popup.tsx | 該文件導(dǎo)出默認的 React 組件，該組件會渲染到你的彈出頁面中。這就是你在插件彈出窗口上所需的全部內(nèi)容！ |
assets | Plasmo 會自動生成一些小的圖標并將它們從 icon512.png 文件中配置到清單中 |
package.json | 平時使用的 Node.js 項目的元信息聲明 |
.prettierrc.cjs | 配置代碼格式化 |
.gitignore | git ignore 文件 |
readme.md | README 文件 |
tsconfig.json | TypeScript 配置文件 |
我們可以構(gòu)建一個開發(fā)版本來支持實時重新加載：
pnpm dev
這將在 build/chrome-mv3-dev 中創(chuàng)建擴展的構(gòu)建版本，如果要構(gòu)建生產(chǎn)環(huán)境版本，請使用下面的命令：
pnpm build
這將在 build/chrome-mv3-prod 中創(chuàng)建擴展的生產(chǎn)版本。此外還可以選擇為構(gòu)建命令提供 --zip 標志以創(chuàng)建準備上傳到網(wǎng)上商店的 zip 包：
pnpm build -- --zip
# OR
npm run build -- --zip
# OR
plasmo build --zip
構(gòu)建完成后可以在 Chrome 瀏覽器中去加載我們的插件，首先前往 chrome://extensions 并啟用開發(fā)者模式。
然后點擊 Load Unpacked? 并導(dǎo)航到擴展程序的 build/chrome-mv3-dev?（或 build/chrome-mv3-prod）目錄加載插件。
要查看你的彈出窗口，請單擊 Chrome 工具欄上的 pin 圖標，然后單擊你的擴展程序，將擴展程序固定到 Chrome 工具欄可以更方便訪問。
要深入了解如何使用 Plasmo，可以查看工作流部分相關(guān)文檔 https://docs.plasmo.com/workflows 每個工作流都附帶一個模塊化的示例，在 GitHub 倉庫中也有對應(yīng)的示例代碼。
Git倉庫：https://github.com/PlasmoHQ/plasmo。
