WebExtension Vite Starter

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

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

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

Vite Plugins

• vite-plugin-components - components auto import
• vite-plugin-windicss - WindiCSS support

Vue Plugins

• vue-global-api - use Vue Composition API globally
• VueUse - collection of useful composition APIs

UI Frameworks

• Windi CSS - next generation utility-first CSS framework

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-icons - icons as Vue components

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi

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.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.