UUatch

Usage

Folders

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - auto-imported Vue components that are shared in popup and options page.
  • styles - styles shared in popup and options page
  • assets - assets used in Vue components
  • manifest.ts - manifest for the extension.
• extension - extension package root.
  • assets - static assets (mainly for manifest.json).
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

Using Gitpod

If you have a web browser, you can get a fully pre-configured development environment with one click:

Build

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.