Development Cycle

📢 NOTE: If you would like to use the src directory for your source code (tsx and ts), 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 (switch pnpm 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