Julias0/substack-code

vite-vue3-chrome-extension-v3

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

Features

• CRXJS Vite Plugin Build a Chrome Extension with Vite
• HMR for extension pages and content scripts
• Vue 3 - Composition API, Script setup and more!
• Vue Router setup incuding vite-plugin-pages for automatic route registration
• Effortless communications - powered by webext-bridge and VueUse storage
• Components auto importing
• Icons - Access to icons from any iconset directly
• TypeScript - type safe
• Eslint & Prettier configured for vue, javascript, typescript

Pre-packed

WebExtension Libraries

• webext-bridge - effortlessly communication between contexts
• webextension-polyfill - A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

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

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

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

• src - main source.
  • content-script - scripts and components to be injected as content_script
  • background - scripts for background.
  • popup - popup pages
  • options - options pages
  • 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 extension/ folder.

Build

To build the extension, run

pnpm build

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

Credits

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