WebExtension Vite Starter

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

_Popup

_{Options Page}

_{Inject React iframe-app into the Content Script}

Features

⚡️ Instant HMR - use Vite on dev (no more refresh!)
⚛️ - Use React with Hooks and more.
💬 Effortless communications - powered by webext-bridge
🌈 UnoCSS - The instant on-demand Atomic CSS engine.
🦾 TypeScript - type safe
📦 Components auto importing
🌟 Icons - Access to icons from any iconset directly
🖥 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
webext-bridge - effortlessly communication between contexts

Vite Plugins

unplugin-auto-import - Directly use browser and Vue Composition API without importing
unplugin-icons - icons as components
@vitejs/plugin-react - React plugin for Vite.

React Plugins

tbd

UI Frameworks

UnoCSS - the instant on-demand Atomic CSS engine

Coding Style

ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

TypeScript
pnpm - fast, disk space efficient package manager
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

If you don't have pnpm installed, run: npm install -g pnpm

npx degit louisremi/vite-react-extension my-webext
cd my-webext
pnpm i

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 most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

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

Forked from antfu/vitesse-webext, the original WebExtension Vite+Vue starter template.
React port originally based on sohcah/vite-react-webext

Variations

bas-d/vite-react-browser-extension-template has a solution to write firefox and chrome extensions at the same time. His template is also less opinionated (but its not compatible with Manifest v3 and my fork is more up-to-date, and easier to keep updated with the original)

tuan/vite-react-extension-template