**生产云：**我们为浏览器扩展构建了一个名为Itero的云服务。如果您想要即时的测试版测试和更多出色的功能，请查看它。

Plasmo框架

Plasmo框架是一个功能丰富的浏览器扩展SDK，由黑客为黑客打造。构建您的产品，无需担心配置文件和构建浏览器扩展的奇怪特性。

它就像浏览器扩展的Next.js！

CLI演示

主要特点

一流的React + Typescript支持
声明式开发
内容脚本UI
标签页
实时重载 + React热模块替换
.env*文件
存储API
消息API
远程代码打包（例如，用于Google Analytics）
针对多个浏览器和清单对
通过BPP自动部署
可选支持Svelte和Vue

还有更多特性！🚀

系统要求

Node.js 16.x或更高版本
MacOS、Windows或Linux
（强烈推荐）pnpm

示例

我们有展示如何将Plasmo与Firebase身份验证、Redux、Supabase身份验证、Tailwind等一起使用的示例。要查看这些示例，请访问我们的示例仓库。

文档

查看文档以深入了解Plasmo框架。

浏览器扩展书籍

要更深入地了解浏览器扩展的工作原理及其开发方法，我们强烈推荐Matt Frisbie的新书"构建浏览器扩展"。

使用方法

pnpm create plasmo example-dir
cd example-dir
pnpm dev

前方的道路充满了许多转折。

弹出窗口的更改在popup.tsx中
选项页面的更改在options.tsx中
内容脚本的更改在content.ts中
后台服务工作者的更改在background.ts中

ext-dir
├───assets
|   └───icon.png
├───popup
|   ├───index.tsx
|   └───button.tsx
├───options
|   ├───index.tsx
|   ├───utils.ts
|   └───input.tsx
├───contents
|   ├───site-one.ts
|   ├───site-two.ts
|   └───site-three.ts
...

最后，您还可以通过将源代码放在src子目录中来避免将源代码放在根目录中，按照本指南操作。请注意，assets和其他配置文件仍需要位于根目录中。