WebExtension Vite Starter

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

Features

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

Pre-packed

WebExtension Libraries

• webextension-polyfill - WebExtension browser API Polyfill with types

Vite Plugins

• @vitejs/plugin-react - React plugin for Vite.

Coding Style

• ESLint
• Prettier

Dev tools

• 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

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

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

npx degit bas-d/vite-react-browser-extension-template my-webext
cd my-webext
npm i

Usage

Folders

• src - main source.
  • content - scripts and components to be injected as content_script
  • background - scripts for background.
  • page - example page in your extension
  • components - React components.
  • manifest.ts - manifest for the extension.
• build - extension package root.
  • assets - static assets.
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

Development

npm dev

Then load extension in browser with the build/ folder.

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

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

Build

To build the extension, run

npm build

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

Credits

This template is originally made by Anthony Fu and adopted to work with React.