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

---

🛠️ 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

---

💡 Coding Style

• TypeScript with strict types
• ESLint & Prettier enforced
• Vue 3 Composition API (<script setup>)
• File-based routing and auto-imports

---

🤝 Contributing

Contributions are welcome! Please open issues or submit pull requests for improvements or new features.

---

🙏 Support

If you find this project useful, please consider supporting the author and starring ⭐ the repository.

---

👥 Contributors

Muhammad Ubaid Raza

Dreamliner

Jihoon Yi

Diego Ponciano

igorfz

hi2code

Null