The template is developed using Pnpm, but feel free to use another package manager.
pnpm i // or install dependencies which your preferred package manager
To build use:
pnpm build
This compiles your Typescript and bundles the public folder into dist.
Use:
pnpm build:dev
to build in watch mode. I've found that the watch mode build sometimes causes issues with Chrome not being able to find the manifest.json. If that happens, just run a normal build.
By setting NODE_ENV to "development", type declarations and sourcemaps will be included in the
build output.
By setting NODE_ENV to "production", console statements will be removed in the build output.
This template uses tsup to to compile TypeScript and bundle the extension
This template comes with a preconfigured manifest.json.
You will need to configure the extension's name, description, permissions and the URLs where you want to run the content script. This is also where you can add icons for your extension.
Manifest V3 Permission Guidelines
This template already has an options page, popup, content script and background service worker.
Choose what you need to use and you can delete the rest. Don't forget to update the manifest.json
and tsup.config.ts files if you do add or remove anything.
In the tsup.config.ts file, you need to make sure that you configure all of the entry points.
Basically, any file that you need in the final bundle, must be set as an entry point. All of the
other files, imported by your entry point files, will be tree shaken and bundled.
I have added some placeholder icons, remember to change them.
You can use this tool to create the icons you need from a single image.
The generated dist folder is ready to be uploaded to your browser.
In Google Chrome go to Settings -> Manage Extensions and click Load unpacked.
Choose the dist folder and confirm. You should now be able to see the extension in the list of
your browser extensions.
| Files changed | Requires Reload |
|---|---|
| manifest.json | Yes |
| Background scripts | Yes |
| Content scripts | Yes and refresh the page |
| Popup.html | No |
| Options.html | No |
To reload the extenion:
In Google Chrome go ddto Settings -> Manage Extensions and click the reload symbol on your extension.
Remember that any changes you make in the source code will need to be bundled.