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, 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
  • 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
  • chrome - Chrome extension
  • firefox - Firefox extension

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/chrome or dist/firefox, you can upload 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