Vite Vue 3 Browser Extension (Manifest V3)

A modern, opinionated starter template for building browser extensions using Vite, Vue 3, and Manifest V3. Supports Chrome, Firefox, and more. Includes pre-configured routing, state management, composables, and a rich set of UI components from Nuxt/UI v3.

🚀 Features

Multi-Context Ready: Boilerplate for background, popup, options, content script, devtools, side panel, and offscreen pages.
File-Based Routing: Add a file in src/pages or relevant UI directory—auto-registered as a route.
Composable Architecture: Prebuilt composables for i18n, theme, notifications, browser storage, and more.
State Management: Type-safe Pinia stores (persistent & non-persistent).
UI Components: Header, Footer, Locale & Theme Switch, Loading Spinner, Error Boundary, Empty State, Notifications.
Modern Tooling: Nuxt/UI 3, Tailwind CSS 4, ESLint, Prettier, auto-imports, and more.
WebExtension Utilities: webext-bridge for context communication, webextension-polyfill for browser API compatibility.

Screenshots

Screenshot 3

🛠️ Development

Quick Start


pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm install
pnpm dev

Build: pnpm build
Lint: pnpm lint
Dev (Chrome/Firefox): pnpm dev:chrome / pnpm dev:firefox
Build (Chrome/Firefox): pnpm build:chrome / pnpm build:firefox

Load the extension from the dist/chrome or dist/firefox folder in your browser.

🧩 Example: useBrowserStorage


const { data: syncSettings, promise } = useBrowserSyncStorage('settings', {
  theme: 'dark',
  notifications: true,
  preferences: { language: 'en', fontSize: 14 }
})

const { data: userProfile } = useBrowserLocalStorage('profile', {
  name: 'John Doe',
  lastLogin: null,
  favorites: ['item1', 'item2']
})

console.log(syncSettings.value.theme) // 'dark'
console.log(userProfile.value.name)   // 'John Doe'

🔌 Plugins & Libraries

Vite Plugins: unplugin-vue-router, unplugin-auto-import, unplugin-vue-components, unplugin-icons, unplugin-turbo-console, @intlify/unplugin-vue-i18n
Vue Plugins: Pinia, VueUse, Notivue, Vue-i18n
UI: Nuxt/UI, Tailwind CSS 4
WebExtension: webext-bridge, webextension-polyfill
Utilities: Marked (for markdown rendering)
Coding Style: TypeScript, ESLint, Prettier

📁 Directory Structure


.
├── dist/                # Built extension files (chrome/firefox)
├── public/              # Static assets (icons, etc.)
├── scripts/             # Build/dev scripts
├── src/                 # Source code
│   ├── assets/          # Global assets
│   ├── background/      # Background scripts
│   ├── components/      # Shared Vue components
│   ├── composables/     # Vue composables (hooks)
│   ├── content-script/  # Content scripts
│   ├── devtools/        # Devtools panel
│   ├── locales/         # i18n files
│   ├── offscreen/       # Offscreen pages
│   ├── stores/          # Pinia stores
│   ├── types/           # TypeScript definitions
│   ├── ui/              # UI pages (popup, options, etc.)
│   └── utils/           # Shared utilities
├── manifest.config.ts   # Base manifest config
├── vite.config.ts       # Base Vite config
├── tailwind.config.cjs  # Tailwind CSS config
└── package.json         # Dependencies & scripts