Vite 中文文档

WebExtension Vite Starter


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

PopupOptions PageInject Vue App into the Content Script

Features


⚡️ Instant HMR- use Vite*on dev (no more refresh!)
🥝* Vue 3 - Composition API, <script setup> syntax and more!
💬* Effortless communications - powered by webext-bridge and VueUse storage
🌈* UnoCSS - The instant on-demand Atomic CSS engine.
🦾* TypeScript - type safe
📦* Components auto importing
🌟* Icons - Access to icons from any iconset directly
🖥* Content Script - Use Vue even in content script
🌍* WebExtension - isomorphic extension for Chrome, Firefox, and others
📃* Dynamic manifest.json with full type support

Pre-packed


WebExtension Libraries


webextension-polyfill - WebExtension browser API Polyfill with types
webext-bridge - effortlessly communication between contexts

Vite Plugins


unplugin-auto-import - Directly use browser and Vue Composition API without importing
unplugin-vue-components - components auto import
unplugin-icons - icons as components
Iconify - use icons from any icon sets 🔍Icônes

Vue Plugins


VueUse - collection of useful composition APIs

UI Frameworks


UnoCSS - the instant on-demand Atomic CSS engine

Coding Style


Use Composition API with <script setup> SFC syntax
ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools


TypeScript
pnpm - fast, disk space efficient package manager
esno - TypeScript / ESNext node runtime powered by esbuild
npm-run-all - Run multiple npm-scripts in parallel or sequential
web-ext - Streamlined experience for developing web extensions

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


  1. ``` shell
  2. npx degit antfu/vitesse-webext my-webext
  3. cd my-webext
  4. pnpm i
  5. ```

Usage


Folders


src - main source.
contentScript - scripts and components to be injected as content_script
background - scripts for background.
components - auto-imported Vue components that are shared in popup and options page.
styles - styles shared in popup and options page
assets - assets used in Vue components
manifest.ts - manifest for the extension.

extension - extension package root.
assets - static assets (mainly for manifest.json ).
dist - built files, also serve stub entry for Vite on development.

scripts - development and bundling helper scripts.

Development


  1. ``` shell
  2. pnpm dev
  3. ```

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

  1. ``` shell
  2. pnpm start:firefox
  3. ```

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.


Build


To build the extension, run

  1. ``` shell
  2. pnpm build
  3. ```

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

Credits


This template is originally made for the volta.net browser extension.

Variations


This is a variant of Vitesse, check out the full variations list.