Plasmo

The Browser Extension Framework

README

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


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 CLI Demo

Features


First-class React + Typescript Support
Live-reloading + React HMR
Remote code bundling (e.g for gtag4)
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.

Usage


  1. ``` null
  2. pnpm create plasmo example-dir
  3. cd example-dir
  4. pnpm dev

  5. ```

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:

  1. ``` null
  2. ext-dir
  3. assets
  4. |   icon512.png
  5. popup
  6. |   index.tsx
  7. |   button.tsx
  8. options
  9. |   index.tsx
  10. |   utils.ts
  11. |   input.tsx
  12. contents
  13. |   site-one.ts
  14. |   site-two.ts
  15. |   site-three.ts
  16. ...

  17. ```

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

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.

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