Please take a moment to fill out our 3 question Feedback Form and let us know if you would be interested in purchasing template, along with any features you would like to see.

We're developing a new and improved browser extension template with exciting features like authentication, payment processing, and more. Your feedback is crucial to us! Thank you for your time and support!

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

vite-vue3-browser-extension-v3

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

Features

Vue 3 - Composition API, Script setup and more!
Vue 3 app in Content Script too (template added)
Vue devtools support
HMR for extension pages and content scripts, with Firefox support
Sample onInstall & onUpdate pages
Tailwind css And daisyUI
Tailwindcss plugins for Typography, forms, prettier and daisy ui
Vue Router setup incuding unplugin-vue-router for automatic route registration
vscode recommended settings and extensions for extension/ plugin development
Effortless communications - powered by webext-bridge
Components auto importing
Icons - Access to icons from any iconset directly
- By default Material Design Icons set is enabled
TypeScript - type safe
Eslint & Prettier configured for vue, javascript, TypeScript
CRXJS Vite Plugin Build Chrome, Firefox and Other Extensions with Vite
Github build and release actions

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

Pre-packed

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

Vue Plugins

Pinia - Intuitive, type safe, light and flexible Store for Vue
VueUse - collection of useful composition APIs

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

Coding Style

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

Usage

Project Structure

src - main source.
- content-script - scripts and components to be injected as content_script
- iframe content script iframe vue3 app which will be injected into page
- background - scripts for background.
- popup - popup vuejs application root
- pages - popup pages
- options - options vuejs application root
- pages - options pages
- setup - Page for Install and Update extension events
- pages - pages for install and update events
- offscreen - extension offscreen pages, can be used for audio, screen recording etc
- pages - application pages, common to all views (About, Contact, Authentication etc)
- components - auto-imported Vue components that are shared in popup and options page.
- assets - assets used in Vue components
dist - built files
- chrome - Chrome extension, can be publishd to Opera, Edge and toher chromium based browsers store etc
- firefox - Firefox extension

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

Extra info

In src/background/index.ts you can find an example of chrome.runtime.onInstalled.addListener.

We add ?type to the url to tell if it's update or install event. Then in src/setup/pages/index.ts we check for the type and show the appropriate page.