Javascript Vue

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template2 min read

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-ts – 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.

GitHub

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

React Admin Templates and Themes

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest