Create a New Extension
To run the interactive initialization wizard, use the following command:
pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmoTo skip the naming prompt, supply a name as a positional argument:
pnpm create plasmo "My Awesome Extension"
# OR
yarn create plasmo "My Awesome Extension"
# OR
npm create plasmo "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).
With src directory
By default, Plasmo expects all source code to be in the root directory. However, you can follow this guide to use the src directory as the home for your source code.
With specific entry files
The default project contains just a popup entry file. However, you can customize this behavior by using the entry flag with a comma-separated list of entry files to include in your initial project.
To use this flag, pick the entry files you would like to see in your project, omit its file extension, and supply it to the --entry flag:
There are many entry files to choose from. Check out this directory (opens in a new tab) to see all the different entry files available to you.
pnpm create plasmo --entry=options,newtab,contents/inline
# OR
npm create plasmo -- --entry=options,newtab,contents/inlineThe command above will create a project with the options page, a newtab page, and an inline content script UI.
NOTE: npm does not pass arguments down to its child command. Thus, you must supply a -- to escape npm before specifying plasmo's parameters and flags.
With an example template
Even more powerful, Plasmo can create a new project based on one of our examples (opens in a new tab). Pick an example, and use its name as a flag when running the create plasmo command:
pnpm create plasmo --with-env
# OR
npm create plasmo -- --with-envThe above will generate a project using the with-env (opens in a new tab) example.
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.
