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!
Features
- First-class React + Typescript Support
- Declarative development with
manifest.jsonauto-generation (MV3) - Live-reloading
.env*files- [Remote code bundling (e.g., for gtag4)
- Automated deployment (via BPP)
- And many, many more! 🚀
System Requirements
- Node.js 16.x or later
- macOS, Windows, or Linux
- (Strongly Recommended) pnpm
Getting Started
pnpm dlx plasmo init
# OR npm v7
npm x plasmo init
This command will set up the simplest Plasmo browser extension project for you. The structure is straightforward:
| File name | Description |
|---|---|
popup.tsx | This file exports default a React component, which gets rendered into your popup page. This is all you need to work on your extension popup! |
assets | Plasmo automatically generates the smaller icons and applies them in the manifest for you from the "icon512.png" file |
package.json | Your usual Node.js project descriptor, with an optional "manifest" property to customize Plasmo to your need |
.prettierrc.cjs | For code styling consistency |
.gitignore | Your friendly neighborhood git ignore file |
readme.md | Basic documentation |
tsconfig.json | TypeScript configuration |
NOTE: If you would like to use the
srcdirectory for your source code (tsxandts), please make sure to follow this guide.
Building
For live-reloading support, build a development version with
pnpm devThis will create a built version of the extension in build/chrome-mv3-dev
For a production build,
pnpm buildThis will create a built version of the extension in build/chrome-mv3-prod
Loading the Extension in Chrome
We plan to automate this in the future, but for the time being, these are the steps you need to take to load your extension in Chrome.
Head over to chrome://extensions and enable Developer Mode.
Click on "Load Unpacked" and navigate to your extension's build/chrome-mv3-dev (or build/chrome-mv3-prod) directory.
To see your popup, click on the puzzle piece icon on the Chrome toolbar, and click on your extension.
Pro tip: pin your extension to the Chrome toolbar for easy access by clicking the pin button.
Where is the manifest.json file?
It will be generated on-the-fly for you. Plasmo generates the manifest based on your source files and configurations you export from your code - similar to how Next.js abstracts page routing and SSG with the file system and page components.
We will further abstract with auto-permissions and a needs-based permission scheme, removing the need to specify permissions manually! (Coming soon)
Next Steps
Check out the Workflows section for a deep dive on how to work with Plasmo. A modular example accompanies each workflow, showcasing the framework's simplicity. View examples on our GitHub repo.
Check out the Customization section for documentation on making Plasmo adapt to your needs.
To see how to integrate Plasmo with other tools (such as TailwindCSS or Firebase), check out the list of examples in the Quickstarts section.
Community
Find the Plasmo community 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.