一個構建現代瀏覽器插件的框架 - Plasmo
Plasmo 框架是一個開源的瀏覽器擴展 SDK，支持所有主流的瀏覽器，構建你的插件，無需擔心配置文件編寫和構建瀏覽器擴展時的奇怪特性，plasmo 幫助我們屏蔽了底層的差異。
特性
-
支持 React + Typescript
-
聲明式開發，自動生成
manifest.json(MV3) -
熱加載
-
.env*文件 -
遠程代碼打包 (例如：使用 gtag4)
-
自動部署 (通過 BPP)
基本使用
要使用 plasmo，首先需要滿足下面的系統需求：
-
Node.js 16.x 及以上
-
MacOS、Windows 或 Linux
-
強烈推薦使用 pnpm
然後使用下面的命令初始化項目：
pnpm dlx plasmo init
# 或者使用 npm v7
npm x plasmo init要跳過命名提示，可以直接通過提供名稱作爲位置參數：
pnpm dlx plasmo init "My Awesome Extension"
# OR npm v7
npm x plasmo init "My Awesome Extension"上面的命令會創建一個最簡單的 plasmo 瀏覽器插件項目，結構很簡單。
對應的這些文件用途如下所示：
我們可以構建一個開發版本來支持實時重新加載：
pnpm dev這將在 build/chrome-mv3-dev 中創建擴展的構建版本，如果要構建生產環境版本，請使用下面的命令：
pnpm build這將在 build/chrome-mv3-prod 中創建擴展的生產版本。此外還可以選擇爲構建命令提供 --zip 標誌以創建準備上傳到網上商店的 zip 包：
pnpm build -- --zip
# OR
npm run build -- --zip
# OR
plasmo build --zip構建完成後可以在 Chrome 瀏覽器中去加載我們的插件，首先前往 chrome://extensions 並啓用開發者模式。
然後點擊 Load Unpacked 並導航到擴展程序的 build/chrome-mv3-dev（或 build/chrome-mv3-prod）目錄加載插件。
要查看你的彈出窗口，請單擊 Chrome 工具欄上的 pin 圖標，然後單擊你的擴展程序，將擴展程序固定到 Chrome 工具欄可以更方便訪問。
要深入瞭解如何使用 Plasmo，可以查看工作流部分相關文檔 https://docs.plasmo.com/workflows 每個工作流都附帶一個模塊化的示例，在 GitHub 倉庫中也有對應的示例代碼。
Git 倉庫：https://github.com/PlasmoHQ/plasmo
Github 愛好者 我們是一羣 Github 愛好者，專注分享有價值、有趣的開源項目和學習資料，包括 Python、Golang、Java、Rust、AI、前端、運維、數據分析、大數據、雲計算、Kubernetes、Service Mesh 等領域資源。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/3gM62jH_Q8ZFWQ53a_LTEQ