英文 | 简体中文 | 越南语 | 德语 | 法语 | 印尼语 | 俄语 | 土耳其语 | 日语 | 韩语
**生产云:**我们为浏览器扩展构建了一个名为Itero的云服务。如果您想要即时的测试版测试和更多出色的功能,请查看它。
Plasmo框架
Plasmo框架是一个功能丰富的浏览器扩展SDK,由黑客为黑客打造。构建您的产品,无需担心配置文件和构建浏览器扩展的奇怪特性。
它就像浏览器扩展的Next.js!
主要特点
- 一流的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
和其他配置文件仍需要位于根目录中。
支持的浏览器
要查看支持的浏览器目标列表,请参阅我们的文档。
社区
Plasmo社区可以在Discord上找到。这是获取使用Plasmo框架帮助的适当渠道。
我们的行为准则适用于所有Plasmo社区渠道。
贡献
请查看贡献指南了解更多信息。
非常感谢我们所有了不起的贡献者 ❤️
欢迎加入我们,发送PR!
Plasmo框架
Plasmo示例
Plasmo存储
浏览器平台发布工具
免责声明
Plasmo目前是alpha软件,某些内容可能会随版本变化而改变,因此请谨慎使用,风险自负。