Create a New Extension
NOTE: To use the
src directory for the source code module, please follow this
To run the interactive initialization wizard, use the following command:
pnpm create plasmo # OR yarn create plasmo # OR npm create plasmo
To 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).
The default project contains just a popup entry file. However, you can customize this behavior by using the
entry parameter with a comma-separated list of entry files to include in your initial project.
To see every available entry file, check this directory.
To use this flag, pick the entry files you would like to see in your project, omits its extension, and supply it to the
pnpm create plasmo --entry=options,newtab,content/inline # OR npm create plasmo -- --entry=options,newtab,content/inline
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.
Even more powerful, plasmo can create a new project based on a project in our examples. Pick an example you would like to use, and use it as a flag when running the
create plasmo command:
pnpm create plasmo --with-env # OR npm create plasmo -- --with-env
The above will generate a project using the with-env example under the name you will provide.
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.