開發瀏覽器 extension 的好工具 - plasmo

Posted on Edited on

前言

最近因為 ChatGPT 的關係，自己先做了個簡單的 Chrome Extension，但後來想做的功能變多，開發上也就需要有更好的工具協助

Plasmo

Plasmo 是一個很受歡迎的框架，目前擁有5.7k個星星。它專門用於撰寫瀏覽器的 extension，類似於前端的框架 Next.js ，幫忙處理開發上的大小事。它支援多個前端框架，例如 React, Svelte, and Vue，並可用於發布到多個商店，包括 Chrome、Firefox 和 Edge。

開發

建立初始環境，會建立最簡單的 Plasmo 檔案，協助開發

1
yarn create plasmo

plasmo 支援 hot reloading，可以在檔案有更新時自動重新載入，節省很多時間

1
yarn dev

記得到 chrome://extensions ，載入 extension，設定路徑為 build/chrome-mv3-dev

輸出 .zip

1
yarn build

發布

可以在同樣的後台管理 extension 一次上傳多個商店，包含 Edge, Chrome, Firefox。

總結

Plasmo 提供了許多便利的功能，例如開發環境的設定、打包和自動化部署等，這些工作都可以被 Plasmo 框架自動處理，讓開發人員可以專注於實際的開發。進而提高了 Extension 開發的便利性和效率。

Reference