vite-vue3-browser-extension-v3

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3, vue3 and vite and alot more preconfigured.

Please take a moment to fill out a 3 question Feedback Form and let us know if you would be interested in purchasing a feature rich template, along with any features (auth, payment integration and more) you would like to see.

Note: Your responses will help shape the future of this project and ensure we meet your needs better.

---

Screenshots

Features

• Boiler plate Pages for
  • Background
  • Action Popup
  • Options
  • Content Script
  • Devtools panel
  • Browser Side Panel
  • Setup pages for Install and Update events
  • Offscreen pages for audio, screen recording etc
  • Sample pages for Contact, About, Pricing etc
• Dynamic/ Directory based routing. Just add a file in src/pages or relevant ui directory and it will be automatically registered as a route
• State & UI Components
  • Header
  • Footer
  • Locale Switch (i18n)
  • Theme Switch (dark/light)
  • Loading Spinner
  • Error Boundary
  • Empty State
  • Notifications using notivue
• Store for options preconfigured etc
• Composables for
  • i18n
  • Theme
  • Notifications
  • Loading
  • Error handling
  • useBrowserStorage for extension settings and user options management
• Preconfigured Pinia Store (optional perisitent and non-persistent)
  • System wide
  • Easily extendable
  • Type safe

Please create an issue if you feel some feature is missing or could be improved.

Directory Structure

.
├── dist                     # Built extension files
│   ├── chrome              # Chrome-specific build
│   └── firefox             # Firefox-specific build
├── public                  # Static assets
│   └── icons              # Extension icons
├── scripts                 # Build/dev scripts
├── src                     # Source code
│   ├── assets             # Global assets (images, styles)
│   ├── background         # Extension background script
│   ├── components         # Shared Vue components
│   ├── composables        # Vue composables/hooks
│   ├── content-script     # Content scripts injected into pages
│   ├── devtools          # Chrome devtools panel
│   ├── locales           # i18n translation files
│   ├── offscreen         # Offscreen pages (audio, recording)
│   ├── stores            # Pinia stores
│   ├── types             # TypeScript type definitions
│   ├── ui                # UI pages
│   │   ├── action-popup  # Browser toolbar popup
│   │   ├── common        # Shared pages
│   │   ├── content-script-iframe        # Content script app injected into pages by content script
│   │   ├── devtools-panel # Devtools panel UI
│   │   ├── options-page  # Extension options
│   │   ├── setup        # Install/update pages
│   │   └── side-panel   # Browser side panel
│   └── utils            # Shared utilities
├── manifest.config.ts    # Base manifest configuration
├── vite.config.ts       # Base Vite configuration
├── tailwind.config.cjs  # Tailwind CSS configuration
└── package.json         # Project dependencies and scripts

Development tools

Vite Plugins

• unplugin-vue-router - File system based route generator for Vite
• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
• unplugin-turbo-console - Improve the Developer Experience of console
• @intlify/unplugin-vue-i18n - unplugin for Vue I18n

Vue Plugins

• Pinia - Intuitive, type safe, light and flexible Store for Vue
• VueUse - collection of useful composition APIs
• [Notivue](
• Vue-i18n - Internationalization plugin for Vue.js

Plugins

• Marked - A markdown parser and compiler. Used for CHANGELOG.md to show in Update page

UI Frameworks

• tailwindcss - A utility-first CSS framework
• daisyUI - The most popular component library for Tailwind CSS

Tailwind css forms and typography plugins are enabled for default styling of form controls.

WebExtension Libraries

• webext-bridge - effortlessly communication between contexts
• webextension-polyfill - A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

Coding Style

• TypeScript - Typed JavaScript at Any Scale
• ESLint - Linting utility for JavaScript and JSX
• Prettier - Code formatter
• Use Composition API with <script setup> SFC syntax
• Use Composition API with setup SFC syntax in Pinia stores

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

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

Browser Related Configurations

• manifest.config.ts - Base extension manifest with common configuration
• manifest.chrome.config.ts - Chrome/ chromium based browsers specific manifest
• manifest.firefox.config.ts - Firefox spefic manifest
• vite.config.ts - Base vite configuration
• vite.chrome.config.ts - Chrome/ chromium based browsers specific vite configuration
• vite.firefox.config.ts - Firefox specific vite configuration

Scripts

• pnpm dev - Start development server
• pnpm build - Build extension
• pnpm lint - Lint files

You can also use pnpm dev:chrome, pnpm dev:firefox, pnpm build:chrome, pnpm build:firefox, pnpm lint:fix

Then load extension in browser with the dist/ folder

Note: Pack files under dist/chrome or dist/firefox, you can upload to appropriate extension store.

Support

If you like this project, you can support me by donating mubaidr and starring ⭐ this repository.

Hire me

I am a full stack developer. I am open to work. If you are looking for a developer or have a project you want to start, please visit my profile and website here: mubaidr.

Contributors

Muhammad Ubaid Raza

Jihoon Yi

Diego Ponciano

igorfz

hi2code

Null