一个构建现代浏览器插件的框架 - Plasmo

k8s技术圈

共 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 组件,该组件会渲染到你的弹出页面中。这就是你在插件弹出窗口上所需的全部内容!
assetsPlasmo 会自动生成一些小的图标并将它们从 icon512.png 文件中配置到清单中
package.json平时使用的 Node.js 项目的元信息声明
.prettierrc.cjs配置代码格式化
.gitignoregit ignore 文件
readme.mdREADME 文件
tsconfig.jsonTypeScript 配置文件

我们可以构建一个开发版本来支持实时重新加载:

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

浏览 56
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报