![\"plasmo](\"https://www.plasmo.com/assets/banner-black-on-white.png\")
\n \n\n \n \n \n
\n \n ![\"See](\"https://img.shields.io/npm/l/plasmo\"/)
![\"NPM](\"https://img.shields.io/npm/v/plasmo?logo=npm\"/)
![\"Follow](\"https://img.shields.io/twitter/follow/plasmohq?logo=twitter\"/)
![\"Watch](\"https://img.shields.io/twitch/status/plasmohq?logo=twitch&logoColor=white\"/)
![\"Join](\"https://img.shields.io/discord/946290204443025438?logo=discord&logoColor=white\"/)
\n English | 简体中文 | Tiếng Việt | Deutsch | French\n
\n\n# Plasmo Framework\n\nThe [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.\n\n> It's like [Next.js](https://nextjs.org/) for browser extensions!\n\n\n\n## Features\n\n- First-class [React](https://reactjs.org/) + [Typescript](https://www.typescriptlang.org/) Support\n- [Declarative development](https://docs.plasmo.com/#where-is-the-manifestjson-file)\n- Live-reloading\n- [`.env*` files](https://docs.plasmo.com/workflows/env)\n- [Remote code bundling](https://docs.plasmo.com/workflows/remote-code) (e.g for gtag4)\n- Targetting [multiple browser and manifest pairs](https://docs.plasmo.com/workflows#--target-flag)\n- Automated deployment (via [BPP](https://docs.plasmo.com/workflows/submit))\n- Optional support for [Svelte](https://github.com/PlasmoHQ/with-svelte) and [Vue](https://github.com/PlasmoHQ/with-vue)\n- And many, many more! 🚀\n\n## System Requirements\n\n- Node.js 16.x or later\n- MacOS, Windows, or Linux\n- (Strongly Recommended) [pnpm](https://pnpm.io/)\n\n## Examples\n\nWe 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).\n\n## Documentation\n\nCheck out the [documentation](https://docs.plasmo.com/) to get a more in-depth view into the Plasmo Framework.\n\n## Usage\n\n```\npnpm create plasmo example-dir\ncd example-dir\npnpm dev\n```\n\nThe road ahead is filled with many turns.\n\n- Popup changes go in `popup.tsx`\n- Options page changes go in `options.tsx`\n- Content script changes go in `content.ts`\n- Background service worker changes go in `background.ts`\n\n### Directories\n\nYou can also organize these files in their own directories:\n\n```\next-dir\n├───assets\n| └───icon512.png\n├───popup\n| ├───index.tsx\n| └───button.tsx\n├───options\n| ├───index.tsx\n| ├───utils.ts\n| └───input.tsx\n├───contents\n| ├───site-one.ts\n| ├───site-two.ts\n| └───site-three.ts\n...\n```\n\nFinally, 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/customization#using-src-directory-for-source-code). Note that `assets` and other config files will still need to be in the root directory.\n\n## Community\n\nThe 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.\n\nOur [Code of Conduct](./.github/CODE_OF_CONDUCT.md) applies to all Plasmo community channels.\n\n## Contributing\n\nPlease see the [contributing guidelines](https://github.com/PlasmoHQ/plasmo/blob/main/.github/CONTRIBUTING.md) to learn more.\n\n## Disclaimer\n\nPlasmo is currently alpha software, and some things might change from version to version, so please be mindful and use it at your own risk.\n\n# License\n\n[MIT](./license) ⭐ [Plasmo](https://www.plasmo.com)\n","readmeFilename":"readme.md"}