TypeScript Chrome Extension Starter

Getting Started

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

tsup Docs

Manifest

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

Files

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.

Uploading to the browser

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.

When to reload the extension

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.