Workflows
/
Development Cycle

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.

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.

Pinning popup

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

Last updated on July 24, 2022