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)
HMR for extension pages and content scripts
Tailwind css And daisyUI
Vue Router setup incuding vite-plugin-pages for automatic route registration
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

WebExtension Libraries

webext-bridge - effortlessly communication between contexts

Vite Plugins

vite-plugin-pages - 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

VueUse - collection of useful composition APIs

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.

Coding Style

Use Composition API with <script setup> SFC syntax

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

Folders

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

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.

Credits

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