WXT Starter Template

A WXT 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!
• 🌈 UnoCSS - The instant on-demand Atomic CSS engine.
• 🦾 TypeScript - type safe
• 📦 Components auto importing

Pre-packed

WebExtension Libraries

• wxt - Next-gen Web Extension Framework

Vite Plugins

• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• vite-plugin-vue-devtools - Unleash Vue Developer Experience

Vue Plugins

• VueUse - collection of useful composition APIs

UI Frameworks

• UnoCSS - the instant on-demand Atomic CSS engine

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

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 elonehoo-starter/wxt my-webext
cd my-webext
pnpm i

Development

pnpm dev

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

pnpm dev:firefox

Build

To build the extension, run

pnpm build

Credits

This template is originally made for the antfu/vitesse-webext browser extension.