vite-vue3-browser-extension-v3

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

Please check: vite-chrome-extension for a more simpler template

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
• 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
  • Material Design Icons - Material Design Icons

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, also serve stub entry for Vite on development.

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.

Development

pnpm dev

Then load extension in browser with the dist/ folder.

Build

To build the extension, run

pnpm build

And then pack files under dist, you can upload dist.crx or dist.xpi to appropriate extension store.

Contributors

Muhammad Ubaid Raza

Alexander

Jihoon Yi

Null

Credits

This template is heavenly inspired by: https://github.com/antfu/vitesse-webext