English | 简体中文 | Tiếng Việt | Deutsch | French | Indonesian | Русский | Turkish | 日本語 | 한국어
**Production Cloud:** We've built a cloud offering for browser extensions called [Itero](https://itero.plasmo.com). Check it out if you want instant beta testing and more awesome features. # Plasmo Framework The [Plasmo](https://www.plasmo.com/) 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](https://nextjs.org/) for browser extensions!  ## Highlighted Features - First-class [React](https://reactjs.org/) + [Typescript](https://www.typescriptlang.org/) Support - [Declarative Development](https://docs.plasmo.com/framework#where-is-the-manifestjson-file) - [Content Scripts UI](https://docs.plasmo.com/csui) - [Tab Pages](https://docs.plasmo.com/framework/tab-pages) - Live-reloading + React HMR - [`.env*` files](https://docs.plasmo.com/framework/env) - [Storage API](https://docs.plasmo.com/framework/storage) - [Messaging API](https://docs.plasmo.com/framework/messaging) - [Remote code bundling](https://docs.plasmo.com/framework/remote-code) (e.g., for Google Analytics) - Targeting [multiple browser and manifest pairs](https://docs.plasmo.com/framework/workflows/build#with-specific-target) - [Automated deployment via BPP](https://docs.plasmo.com/framework/workflows/submit) - Optional support for [Svelte](https://github.com/PlasmoHQ/with-svelte) and [Vue](https://github.com/PlasmoHQ/with-vue) And many, many more! 🚀 ## System Requirements - Node.js 16.x or later - MacOS, Windows, or Linux - (Strongly Recommended) [pnpm](https://pnpm.io/) ## Examples We have examples showcasing how one can use Plasmo with [Firebase Authentication](https://github.com/PlasmoHQ/examples/tree/main/with-firebase-auth), [Redux](https://github.com/PlasmoHQ/examples/tree/main/with-redux), [Supabase authentication](https://github.com/PlasmoHQ/examples/tree/main/with-supabase), [Tailwind](https://github.com/PlasmoHQ/examples/tree/main/with-tailwindcss), and many more. To check them out, [visit our examples repository](https://github.com/PlasmoHQ/examples). ## Documentation Check out the [documentation](https://docs.plasmo.com/) 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"](https://buildingbrowserextensions.com/plasmo) ## 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](https://docs.plasmo.com/framework/customization/src). 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](https://docs.plasmo.com/framework/workflows/faq#what-are-the-officially-supported-browser-targets). ## Community The Plasmo community can be found on [Discord](https://www.plasmo.com/s/d). This is the appropriate channel to get help with using the Plasmo Framework. Our [Code of Conduct](https://github.com/PlasmoHQ/plasmo/blob/main/.github/CODE_OF_CONDUCT.md) applies to all Plasmo community channels. ## Contributing Please see the [contributing guidelines](https://github.com/PlasmoHQ/plasmo/blob/main/.github/CONTRIBUTING.md) to learn more. A big thanks to all of our amazing [contributors](https://github.com/PlasmoHQ/plasmo/graphs/contributors) ❤️ Feel free to join the fun and send a PR! ### Plasmo Framework