plasmo README

The project's README from github.com/PlasmoHQ/plasmo. As one markdown file: README.md.

plasmo logo

See License NPM Install Follow PlasmoHQ on Twitter Watch our Live DEMO every Friday Join our Discord for support and chat about our projects

English | 简体中文 | Tiếng Việt | Deutsch | French | Indonesian | Русский | Turkish | 日本語 | 한국어

Production Cloud: We've built a cloud offering for browser extensions called Itero. Check it out if you want instant beta testing and more awesome features.

Plasmo Framework

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

It's like Next.js for browser extensions!

CLI Demo

Highlighted Features

And many, many more! 🚀

System Requirements

Examples

We have examples showcasing how one can use Plasmo with Firebase Authentication, Redux, Supabase authentication, Tailwind, and many more. To check them out, visit our examples repository.

Documentation

Check out the documentation to get a more in-depth view into the Plasmo Framework.

Browser Extensions Book

For a more in-depth view into how browser extensions work, and how to develop them, we highly recommend Matt Frisbie's new book "Building Browser Extensions"

Usage

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

The road ahead is filled with many turns.

Directories

You can also organize these files in their own directories:

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
...

Finally, you can also avoid putting source code in your root directory by putting them in a src sub-directory, following this guide. Note that assets and other config files will still need to be in the root directory.

Supported Browsers

To see a list of supported browser targets, please refer to our documentation here.

Community

The Plasmo community can be found on Discord. This is the appropriate channel to get help with using the Plasmo Framework.

Our Code of Conduct applies to all Plasmo community channels.

Contributing

Please see the contributing guidelines to learn more.

A big thanks to all of our amazing contributors ❤️

Feel free to join the fun and send a PR!

Plasmo Framework

Plasmo Examples

Plasmo Storage

Browser Platform Publisher

Disclaimer

Plasmo is currently alpha software, and some things might change from version to version, so please be mindful and use it at your own risk.

License

MIT ⭐ Plasmo

plasmo (PlasmoHQ/plasmo)

Searching Database…

13.2K ·GitHub
Plasmo
这是什么？Plasmo 是一个浏览器扩展框架，负责打包、生成 manifest 和开发工具，让你可以专注于编写扩展的实际功能逻辑，而不必处理配置文件。
这是打包工具还是完整的框架？它是一个完整的 SDK/框架，而不仅仅是打包工具。它的定位类似于浏览器扩展版的 Next.js，提供页面、脚本和配置方面的约定。
用 Plasmo 该如何组织扩展代码？Plasmo 采用基于文件的约定：弹窗代码放在 popup.tsx 中，选项页放在 options.tsx 中，内容脚本放在 content.ts 中，后台 Service Worker 放在 background.ts 中。这些文件也可以放进各自的文件夹，或者统一放在 src 子目录中。
使用 Plasmo 之前需要安装什么？你需要在 macOS、Windows 或 Linux 上安装 Node.js 16.x 或更高版本，并强烈推荐使用 pnpm 作为包管理器。
Plasmo 足够稳定，能用于生产环境的扩展吗？该项目自我描述为 alpha 阶段的软件，意味着不同版本之间的行为可能会有变化，因此在生产环境中使用时应当谨慎。
使用它需要了解 React 和 TypeScript 吗？Plasmo 默认围绕一流的 React 和 TypeScript 支持进行构建，因此需要熟悉这两者。此外，它也可选支持 Svelte 和 Vue。
使用一个 Plasmo 项目可以面向哪些浏览器？Plasmo 支持用同一套代码面向多种浏览器和 manifest 版本；完整的支持目标列表请参见文档。
可以用 Svelte 或 Vue 代替 React 吗？可以。除了默认的 React 和 TypeScript 设置外，Plasmo 还可选支持 Svelte 和 Vue。
开发时支持实时重载吗？支持。Plasmo 内置了基于 React HMR 的实时重载功能，开发时修改内容可以立即生效。
如何自动发布我的扩展？Plasmo 集成了 BPP（Browser Platform Publisher），可以自动将你的扩展部署到各个浏览器应用商店。
什么是 Itero？Itero 是 Plasmo 官方推出的浏览器扩展云服务，除了开源框架之外，还提供即时 Beta 测试等额外功能。
What are similar projects?wxt, novu, CopilotKit, git-history, taro, ext-saladict, streamfirefly, Tailtab
Which topics is it in?firefox-addon, bundler, reactjs, storage, messaging, chrome-extension, browser-extension, vue, sdk, framework, react, frontend
Creator
PlasmoHQ
Size
6.2 MB
Stars
13.2K
Updated
CommitMay 17Releasev0.90.5May 17
Age
4y
Commits · 90 Days