Browser Extension Vue Kit

Starter kit for building browser extensions with Vue 3, Vite, Tailwind CSS, DaisyUI, and Lucide.

Screenshots

Features

• Vue 3 + Vue Router (memory history for popup)
• DaisyUI components + Lucide icons
• Light / dark theme toggle (data-theme)
• Auth pages (email + Google Identity)
• Shared state, axios fetcher, safe chrome.storage helper
• Manifest V3 via vite-plugin-web-extension
• Biome for lint/format

Project Setup

bun i
cp .env.example .env

Fill .env:

Variable	Purpose
VITE_START_URL	URL opened when bun dev launches the browser
VITE_SERVER_URL	API base URL for login/register
VITE_GOOGLE_OAUTH_CLIENT_ID	Chrome Identity OAuth client id

Commands

bun dev          # develop (web-ext + HMR)
bun run build    # production build → dist/
bun run check    # biome check --write

Load unpacked

1. bun run build
2. Open chrome://extensions
3. Enable Developer mode
4. Load unpacked → select the dist/ folder

Structure

src/
  assets/main.css     # Tailwind + DaisyUI
  background/         # MV3 service worker stub
  components/         # ThemeToggle, GoogleMark
  pages/              # Home, About, Login, Register
  pop-up/             # extension popup entry
  router/
  services/           # state, fetcher, storage
  manifest.json