https://github.com/mubaidr/vite-vue3-browser-extension-v3
Another vite powered web extension (chrome, firefox, etc.) starter template.
https://github.com/mubaidr/vite-vue3-browser-extension-v3
chrome extension hacktoberfest nuxtui nuxtui-v3 vite vue3 webextension
Last synced: 30 days ago
JSON representation
Another vite powered web extension (chrome, firefox, etc.) starter template.
- Host: GitHub
- URL: https://github.com/mubaidr/vite-vue3-browser-extension-v3
- Owner: mubaidr
- Created: 2023-02-26T06:59:37.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-05-05T17:27:20.000Z (about 1 month ago)
- Last Synced: 2025-05-11T03:44:30.772Z (about 1 month ago)
- Topics: chrome, extension, hacktoberfest, nuxtui, nuxtui-v3, vite, vue3, webextension
- Language: Vue
- Homepage:
- Size: 2.28 MB
- Stars: 643
- Watchers: 5
- Forks: 89
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Vite Vue 3 Browser Extension (Manifest V3)
[](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml)
A modern, opinionated starter template for building browser extensions using [Vite](https://vitejs.dev/), [Vue 3](https://vuejs.org/), 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
```bash
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
```ts
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
```bash
.
├── 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 (``)
- 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](https://www.patreon.com/c/mubaidr) and starring ⭐ the repository.
---
## 👥 Contributors
<table>
<tbody>
<tr>
<td align="center">
<a href="https://github.com/mubaidr">
<img src="https://avatars.githubusercontent.com/u/2222702?v=4" width="80" alt="mubaidr"/>
<br /><sub><b>Muhammad Ubaid Raza</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Dreamlinerm">
<img src="https://avatars.githubusercontent.com/u/90410608?v=4" width="80" alt="Dreamlinerm"/>
<br /><sub><b>Dreamliner</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/baramofme">
<img src="https://avatars.githubusercontent.com/u/44565599?v=4" width="80" alt="baramofme"/>
<br /><sub><b>Jihoon Yi</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/poncianodiego">
<img src="https://avatars.githubusercontent.com/u/20716004?v=4" width="80" alt="poncianodiego"/>
<br /><sub><b>Diego Ponciano</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/IgorFZ">
<img src="https://avatars.githubusercontent.com/u/85708187?v=4" width="80" alt="IgorFZ"/>
<br /><sub><b>igorfz</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/hi2code">
<img src="https://avatars.githubusercontent.com/u/51270649?v=4" width="80" alt="hi2code"/>
<br /><sub><b>hi2code</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/justorez">
<img src="https://avatars.githubusercontent.com/u/17308328?v=4" width="80" alt="justorez"/>
<br /><sub><b>Null</b></sub>
</a>
</td>
</tr>
</tbody>
</table>