A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3, vue3 and vite and a lot more pre-configured.

• 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 pre-configured etc
• Composables for
  • i18n
  • Theme
  • Notifications
  • Loading
  • Error handling
  • useBrowserStorage for extension settings and user options management
• pre-configured Pinia Store (optional persistent and non-persistent)
  • System wide
  • Easily extendable
  • Type safe

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

. ├── 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. Some prebuilt components are available like `Header`, `Footer`, `LocaleSwitch`, `ThemeSwitch`, `LoadingSpinner`, `ErrorBoundary`, `EmptyState` etc │ ├── composables # Vue composables/hooks │ │ ├── useBrowserStorage # Browser storage for both `sync` and `local` │ │ ├── useLocale # Manage locale in your extension │ │ ├── useTheme # Manage theme in your extension │ ├── 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.chrome.config.ts # Chrome specific Vite configuration overrides ├── vite.config.ts # Base Vite configuration ├── vite.firefox.config.ts # Firefox specific Vite configuration overrides ├── tailwind.config.cjs # Tailwind CSS configuration └── package.json # Project dependencies and scripts

// Example usage const exampleUsage = () => { // Using sync storage const { data: syncSettings, promise } = useBrowserSyncStorage('settings', { theme: 'dark', notifications: true, preferences: { language: 'en', fontSize: 14 } }) // `promise` resolves with the actual data value (not the default one) // Using local storage const { data: userProfile, promise } = useBrowserLocalStorage('profile', { name: 'John Doe', lastLogin: null, favorites: ['item1', 'item2'] }) // The data ref can be used directly in templates or watched console.log(syncSettings.value.theme) // 'dark' console.log(userProfile.value.name) // 'John Doe' }

• 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

• Pinia - Intuitive, type safe, light and flexible Store for Vue
• VueUse - collection of useful composition APIs
• Notivue - Powerful toast notification system for Vue and Nuxt.
• Vue-i18n - Internationalization plugin for Vue.js

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

• 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.

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

• 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

Create a repo from this template on GitHub.

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

• 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

• 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.

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

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.

Muhammad Ubaid Raza	Dreamliner	Jihoon Yi	Diego Ponciano	igorfz	hi2code
Null