Skip to Content
LaunchExt | Chrome 扩展开发平台 (Next.js + Plasmo) 🚀 Read more → 
文档Framework快速开始

Plasmo Framework

Plasmo  Framework 是一个功能丰富的浏览器扩展 SDK，由开发者专为开发者打造。专注于产品构建，无需担心配置文件细节和浏览器扩展的特殊性。

⭐

堪称浏览器扩展领域的 Next.js ！

CLI 演示

核心特性

还有更多强大功能等待探索！🚀

系统要求

  • Node.js 16.14.x 或更高版本
  • macOS、Windows 或 Linux 系统
  • （强烈推荐）pnpm  包管理器

快速开始

pnpm create plasmo
# 或者
yarn create plasmo
# 或者
npm create plasmo

Plasmo 项目文件结构

此命令将为您创建最简单的 Plasmo 浏览器扩展项目。项目结构简洁明了：

文件名功能描述
popup.tsx导出一个默认的 React 组件，该组件将在扩展弹出页面中渲染。这就是处理扩展弹出窗口所需的全部内容！
assetsPlasmo 自动生成优化尺寸的图标 并从 “icon.png” 文件应用到清单中
package.json标准的 Node.js 项目描述文件，包含可选的 “manifest” 属性用于自定义 Plasmo 配置
.prettierrc.cjs确保代码风格一致性
.gitignoreGit 忽略配置文件
.github用于自动化部署的 GitHub Actions 工作流
README.md项目基础文档
tsconfig.jsonTypeScript 配置设置
📢

重要提示： 默认情况下，所有源代码都位于项目根目录。如需使用 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 工具栏，以便快速访问。

manifest.json 文件在哪里？

Plasmo 对清单文件进行了抽象化处理。框架会根据您的源代码文件和代码中导出的配置，在底层自动生成清单文件，类似于 Next.js  使用文件系统和页面组件来抽象页面路由和 SSG 的方式。

我们将进一步优化，实现自动权限管理和基于需求的权限方案，无需手动指定权限！（此功能即将推出）

下一步行动

前往扩展页面章节，深入了解 Plasmo 扩展中的不同 UI 元素并获取开发灵感。每个工作流程都配有模块化示例，展示框架的简洁性。查看我们的 GitHub 示例仓库 获取更多实例。

访问自定义配置章节，了解如何根据您的需求定制 Plasmo。

要学习如何将 Plasmo 与其他工具（如 TailwindCSS 或 Firebase）集成，请查看快速开始章节中的示例列表。

社区支持

加入 微信群  上的 Plasmo 社区。如果您遇到困难需要帮助，或者想深入讨论 Plasmo 和浏览器扩展开发，这里是最佳去处！

如果在 Plasmo Framework 中发现任何问题，请使用我们的问题报告表单进行反馈。

我们的行为准则 适用于所有 Plasmo 社区渠道。

使用 Plasmo Framework 的项目案例

最后更新于
Quickstarts新建扩展