Development Cycle
📢 NOTE: If you would like to use the
src
directory for your source code (tsx
andts
), please make sure to follow this guide.
Create a new extension
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
(switchpnpm
with your favorite package manager).
Run the development server
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.
Create a production bundle
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
--target
flag
The dev
and 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 build/firefox-mv2-prod
directory.
Officially supported targets are:
chrome-mv3
(default)firefox-mv2
Loading the extension
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 build/chrome-mv3-dev
(or build/chrome-mv3-prod
) directory.
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.
Adding a Popup Page
Create a popup.tsx
file or a popup/index.tsx
file that exports a default React component. With that, your popup is ready to be used 🚀!
See with-popup
Adding the Options UI
Create either an options.tsx
or options/index.tsx
file to render the options_ui 👌
See with-options
Adding a New Tab Page
Create a newtab.tsx
file or a newtab/index.tsx
file, and Plasmo will take care of the rest to render your new tab page 🤘!
See with-newtab
Adding a Background Service Worker
Create a background.ts
file in the root directory, and start hacking 💪
See with-background