WebExtension Vite Starter

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

126741653-43125b62-6578-4452-83a7-bee19be2eaa2

Features

  • ⚑️ Instant HMR - use Vite on dev (no more refresh!)
  • πŸ₯ Vue 3 - Composition API, <script setup> syntax and more!
  • πŸ’¬ Effortless communications - powered by webext-bridge and VueUse storage
  • πŸƒ Windi CSS - on-demand CSS utilities
  • 🦾 TypeScript - type safe
  • πŸ“¦ Components auto importing
  • 🌟 Icons - Access to icons from any iconset directly
  • 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
  • πŸ“ƒ Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

Vite Plugins

Vue Plugins

UI Frameworks

  • Windi CSS - next generation utility-first CSS framework

Icons

Coding Style

Dev tools

  • TypeScript
  • pnpm - fast, disk space efficient package manager
  • tsup - Zero config TypeScript bundler powered by esbuild
  • esno - TypeScript / ESNext node runtime powered by esbuild
  • npm-run-all - Run multiple npm-scripts in parallel or sequential

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 antfu/vitesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

  • views - frontend for the extension (popup and options).
  • src - background scripts and content scripts.
    • manifest.ts - manifest for the extension.
  • extension - extension package root, also holds assets.
  • scripts - development helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder,

Build

To build the extension, run

pnpm build

And then pack files under extension.

GitHub

https://github.com/antfu/vitesse-webext