vite-vue3-browser-extension-v3

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

For a basic template, check out: : vite-chrome-extension

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 chrome 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 a Chrome Extension 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-chrome-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 chrome extension events
  - pages - pages for install and update events
- offscreen - Chrome extension offscreen pages, can be used for audio, screen recording
- 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
- firefox - Firefox extension

Browser Related Configurations

manifest.config.ts - Base extension manifest with common configuration
manifest.chrome.config.ts - Chrome specific manifest
manifest.firefox.config.ts - Firefox spefic manifest
vite.config.ts - Base vite configuration
vite.chrome.config.ts - Chrome 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.