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!
- First-class React + Typescript Support
- Declarative development
- Remote code bundling (e.g for gtag4)
- Targetting multiple browser and manifest pairs
- Automated deployment (via BPP)
- Optional support for Svelte and Vue
- And many, many more!
- Node.js 16.x or later
- MacOS, Windows, or Linux
- (Strongly Recommended) pnpm
Check out the documentation to get a more in-depth view into the Plasmo Framework.
pnpm create plasmo example-dir cd example-dir pnpm dev
The road ahead is filled with many turns.
- Popup changes go in
- Options page changes go in
- Content script changes go in
- Background service worker changes go in
You can also organize these files in their own directories:
ext-dir ├───assets | └───icon512.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.
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.
Please see the contributing guidelines to learn more.
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.