Plasmo Framework
ThePlasmo (opens in a new tab) 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 likeNext.js (opens in a new tab) for browser extensions!
Highlighted Features
- First-classReact (opens in a new tab) +Typescript (opens in a new tab) Support
- Declarative Development (opens in a new tab)
- Content Scripts UI (opens in a new tab)
- Tab Pages (opens in a new tab)
- Live-reloading + React HMR
.env*files (opens in a new tab)- Storage API (opens in a new tab)
- Messaging API (opens in a new tab)
- Remote code bundling (opens in a new tab) (e.g., for Google Analytics)
- Targetingmultiple browser and manifest pairs (opens in a new tab)
- Automated deployment via BPP (opens in a new tab)
- Optional support forSvelte (opens in a new tab) andVue (opens in a new tab), anda lot of other tools (opens in a new tab)
And many, many more! 🚀
System Requirements
- Node.js 16.14.x or later
- macOS, Windows, or Linux
- (Strongly Recommended)pnpm (opens in a new tab)
Getting Started
pnpmcreateplasmo# ORyarncreateplasmo# ORnpmcreateplasmo
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 a default React component, which gets rendered into your popup page.This is all you need to work on your extension popup! |
assets | Plasmoautomatically generates the smaller icons and applies them in the manifest for you from the "icon.png" file |
package.json | Your usual Node.js project descriptor, withan optional "manifest" property to customize Plasmo to your needs |
.prettierrc.cjs | For code styling consistency |
.gitignore | Your friendly neighborhood Git ignore file |
.github | GitHub Actions workflows for automated deployment |
README.md | Basic documentation |
tsconfig.json | TypeScript configuration |
NOTE: By default, all your code lives on the root of your project. To use ansrc directory as the place your source code lives, please follow thisguide.
Development Server
For live-reloading and HMR, you can start the development server with:
pnpmdevThe above command will watch for file changes and regenerate a bundle of your extension inbuild/chrome-mv3-dev, and automatically reload your extension in your browser.
Production Build
For a production build, run:
pnpmbuildThis will create a production version of the extension inbuild/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 tochrome://extensions and enable Developer Mode.
Click on "Load Unpacked" and navigate to your extension'sbuild/chrome-mv3-dev (orbuild/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?
Plasmo abstracts away the manifest file. The framework generates the manifest under the hood based on your source files and configurations you export from your code, similar to howNext.js (opens in a new tab) 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
Go to theExtension Pages section to learn more about the different UI elements in a Plasmo extension and get inspiration. A modular example accompanies each workflow, showcasing the framework's simplicity. View examples onour GitHub repo (opens in a new tab).
Check out theCustomization 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 theQuickstarts section.
Community
Find the Plasmo community onDiscord (opens in a new tab). If you're stuck and want some help or looking to chat more about Plasmo and browser extensions, this is the place to be!
If you find a bug in the Plasmo Framework, please report it using ourBug Report Form.
OurCode of Conduct (opens in a new tab) applies to all Plasmo community channels.
Projects using Plasmo Framework
- Cradle (opens in a new tab)
- ArConnect (opens in a new tab)
- MICE (opens in a new tab)
- Hundreds of Repos on GitHub (opens in a new tab)
- Many hundreds more on the Chrome Web Store