A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

Made based on https://github.com/antfu/vitesse-webext, big thanks to @antfu!

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 🦾 TypeScript - type safe
• 🖥 Content Script - UseReact even in content script
• 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
• 📃 Dynamic manifest.json with full type support

• webextension-polyfill - WebExtension browser API Polyfill with types
• webext-bridge - effortlessly communication between contexts

• ESLint

• TypeScript
• esno - TypeScript / ESNext node runtime powered by esbuild
• npm-run-all - Run multiple npm-scripts in parallel or sequential
• web-ext - Streamlined experience for developing web extensions

Create a repo from this template on GitHub.

If you prefer to do it manually with the cleaner git history

npx degit quolpr/react-vite-webext my-webext
cd my-webext
yarn

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

yarn dev

Then load extension in browser with the extension/ folder.

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

yarn 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.

To build the extension, run

yarn build

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

This repo was made based on https://github.com/antfu/vitesse-webext