📢 NOTE: If you would like to use the
srcdirectory for your source code (
ts), please make sure to follow this guide.
To run the interactive initialization wizard, use the following command:
pnpm dlx plasmo init # OR npm v7 npm x plasmo init
To skip the naming prompt, supply a name as a positional argument:
pnpm dlx plasmo init "My Awesome Extension" # OR npm v7 npm x plasmo init "My Awesome Extension"
NOTE: you can install the plasmo CLI as a global command with
pnpm i -g plasmo(switch
pnpmwith your favorite package manager).
Once you've set up your project, start developing your extension by navigating to your project directory and running:
pnpm dev # OR npm run dev # OR plasmo dev
Plasmo will create a dev bundle for your extension and a live-reloading development server, automatically updating your extension bundle on file changes and reloading your browser on source code changes.
To create a production bundle for distribution, run:
pnpm build # OR npm run build # OR plasmo build
Optionally supply a
--zip flag to the build command to create a zip bundle ready to be uploaded to the web stores:
pnpm build -- --zip # OR npm run build -- --zip # OR plasmo build --zip
build commands accept a
--target flag, which can be used to specify a specific browser and manifest version combination to build for:
plasmo dev --target=firefox-mv2 plasmo build --target=firefox-mv2
The final bundle will be available in either the
build/firefox-mv2-dev or the
Officially supported targets are:
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 to
chrome://extensions and enable Developer Mode.
Click on "Load Unpacked" and navigate to your extension's
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.
popup.tsx file or a
popup/index.tsx file that exports a default React component. With that, your popup is ready to be used 🚀!
Create either an
options/index.tsx file to render the options_ui 👌
newtab.tsx file or a
newtab/index.tsx file, and Plasmo will take care of the rest to render your new tab page 🤘!
background.ts file in the root directory, and start hacking 💪