Plasmo 框架
Plasmo (opens in a new tab) 框架是一个功能齐全的浏览器扩展 SDK，由黑客为黑客打造。构建您的产品，并停止担心配置文件和构建浏览器扩展的奇怪之处。
它就像浏览器扩展的 Next.js (opens in a new tab)！
突出特性
- 首选 React (opens in a new tab) + Typescript (opens in a new tab) 支持
- 声明式开发 (opens in a new tab)
- 内容脚本 UI (opens in a new tab)
- 标签页 (opens in a new tab)
- 实时重载 + React HMR
.env*文件 (opens in a new tab)- 存储 API (opens in a new tab)
- 消息 API (opens in a new tab)
- 远程代码打包 (opens in a new tab)（例如，用于 Google Analytics）
- 针对 多个浏览器和清单对 (opens in a new tab) 的支持
- 通过 BPP 自动部署 (opens in a new tab)
- 可选支持 Svelte (opens in a new tab) 和 Vue (opens in a new tab)，以及 许多其他工具 (opens in a new tab)
还有更多！🚀
系统要求
- Node.js 16.14.x 或更高版本
- macOS、Windows 或 Linux
- （强烈推荐）pnpm (opens in a new tab)
入门指南
pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmo
此命令将为您设置最简单的 Plasmo 浏览器扩展项目。结构非常简单：
| 文件名 | 描述 |
|---|---|
popup.tsx | 此文件导出一个默认的 React 组件，该组件将渲染到您的弹出页面中。这是您需要处理扩展弹出窗口的所有内容！ |
assets | Plasmo 自动生成较小的图标 并根据 "icon.png" 文件将其应用到清单中 |
package.json | 您通常的 Node.js 项目描述符，带有一个可选的 "manifest" 属性以根据需要自定义 Plasmo |
.prettierrc.cjs | 用于代码样式一致性 |
.gitignore | 您的好邻居 Git 忽略文件 |
.github | GitHub Actions 工作流以实现自动部署 |
README.md | 基本文档 |
tsconfig.json | TypeScript 配置 |
注意： 默认情况下，所有代码都位于项目的根目录中。要将源代码放在 src 目录中，请遵循此
指南。
开发服务器
为了实现实时重载和 HMR，您可以使用以下命令启动开发服务器：
pnpm dev上述命令将监视文件更改并在 build/chrome-mv3-dev 中重新生成扩展包，并在浏览器中自动重新加载您的扩展。
生产构建
对于生产构建，运行以下命令：
pnpm build这将在 build/chrome-mv3-prod 中创建扩展的生产版本。
在 Chrome 中加载扩展
我们计划在未来实现自动化，但目前，您需要采取以下步骤在 Chrome 中加载您的扩展。
转到 chrome://extensions 并启用开发者模式。
点击“加载已解压的”并导航到您的扩展的 build/chrome-mv3-dev（或 build/chrome-mv3-prod）目录。
要查看您的弹出窗口，请点击 Chrome 工具栏上的拼图图标，然后点击您的扩展。
提示： 将您的扩展固定到 Chrome 工具栏以方便访问，方法是点击固定按钮。
清单文件在哪里？
Plasmo 抽象了清单文件。框架会根据您的源文件和从代码中导出的配置在后台生成清单文件，类似于 Next.js (opens in a new tab) 如何通过文件系统和页面组件抽象页面路由和静态站点生成。
我们将进一步抽象权限管理，采用基于需求的权限方案，从而无需手动指定权限！(即将推出)
下一步
前往 扩展页面部分 了解有关 Plasmo 扩展的不同 UI 元素的更多信息并获得灵感。每个工作流都附带一个模块化示例，展示框架的简洁性。在 我们的 GitHub 仓库 (opens in a new tab) 上查看示例。
查阅 自定义部分 以获取有关使 Plasmo 适应您需求的文档。
要了解如何将 Plasmo 与其他工具（如 TailwindCSS 或 Firebase）集成，请查阅 快速入门部分 中的示例列表。
社区
在 Discord (opens in a new tab) 上找到 Plasmo 社区。如果您遇到问题需要帮助或想了解更多关于 Plasmo 和浏览器扩展的信息，这里是交流的地方！
如果您在 Plasmo 框架中发现错误，请使用我们的 错误报告表单 进行报告。
我们的 行为准则 (opens in a new tab) 适用于所有 Plasmo 社区渠道。