PlasmoHQ / plasmo
🧩 The Browser Extension Framework
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing PlasmoHQ/plasmo in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewProduction 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!
Highlighted Features
- First-class React + Typescript Support
- Declarative Development
- Content Scripts UI
- Tab Pages
- Live-reloading + React HMR
.env*files- Storage API
- Messaging API
- Remote code bundling (e.g., for Google Analytics)
- Targeting multiple browser and manifest pairs
- Automated deployment via BPP
- Optional support for Svelte and Vue
And many, many more! 🚀
System Requirements
- Node.js 16.x or later
- MacOS, Windows, or Linux
- (Strongly Recommended) pnpm
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.
- Popup changes go in
popup.tsx - Options page changes go in
options.tsx - Content script changes go in
content.ts - Background service worker changes go in
background.ts
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
<a href="https://github.com/PlasmoHQ/plasmo/graphs/contributors"> <img src="https://contrib.rocks/image?repo=PlasmoHQ/plasmo" /> </a>Plasmo Examples
<a href="https://github.com/PlasmoHQ/examples/graphs/contributors"> <img src="https://contrib.rocks/image?repo=PlasmoHQ/examples" /> </a>Plasmo Storage
<a href="https://github.com/PlasmoHQ/storage/graphs/contributors"> <img src="https://contrib.rocks/image?repo=PlasmoHQ/storage" /> </a>Browser Platform Publisher
<a href="https://github.com/PlasmoHQ/bpp/graphs/contributors"> <img src="https://contrib.rocks/image?repo=PlasmoHQ/bpp" /> </a>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.