一个构建现代浏览器插件的框架 - Plasmo
共 1569字，需浏览 4分钟
·
2022-06-24 16:37
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 浏览器插件项目，结构很简单。
对应的这些文件用途如下所示：
| 文件名 | 描述 |
|---|---|
popup.tsx | 该文件导出默认的 React 组件，该组件会渲染到你的弹出页面中。这就是你在插件弹出窗口上所需的全部内容！ |
assets | Plasmo 会自动生成一些小的图标并将它们从 icon512.png 文件中配置到清单中 |
package.json | 平时使用的 Node.js 项目的元信息声明 |
.prettierrc.cjs | 配置代码格式化 |
.gitignore | git ignore 文件 |
readme.md | README 文件 |
tsconfig.json | TypeScript 配置文件 |
我们可以构建一个开发版本来支持实时重新加载：
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