An open API service indexing awesome lists of open source software.

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: 29 days ago
JSON representation

Another vite powered web extension (chrome, firefox, etc.) starter template.

Awesome Lists containing this project

README

        

# Vite Vue 3 Browser Extension (Manifest V3)

[![Build Status](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml/badge.svg)](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

![Screenshot 3](screenshots/Screenshot_20250425_003155.png)
![Screenshot 3](screenshots/Screenshot_20250425_003220.png)
![Screenshot 3](screenshots/Screenshot_20250425_003958.png)

---

## πŸ› οΈ 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>