Vite+ Web Extension Template

A minimal Chrome/Firefox extension template using React, TypeScript, Tailwind CSS, and Vite+. The vp CLI is provided by nix-vite-plus through devenv.

Requirements

• Nix with flakes enabled
• devenv
• A package manager supported by Vite+ (pnpm is pinned via packageManager)

Setup

devenv shell
vp install

Development

Chrome is the default target:

vp build --mode development --watch

Or use the package scripts:

pnpm dev:chrome
pnpm dev:firefox

Load the generated extension directory in your browser:

• Chrome: dist_chrome
• Firefox: dist_firefox

Production builds

pnpm build:chrome
pnpm build:firefox

The browser target is selected with BROWSER=chrome|firefox; vite.config.ts defaults to Chrome.

Checks and formatting

pnpm check
pnpm lint
pnpm fmt

These commands are handled by Vite+ (vp check, vp lint, and vp fmt).