Awesome
WebExtension Vite Starter
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
<p align="center"> <sub>Popup</sub><br/> <img width="655" src="https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/> <sub>Options Page</sub><br/> <img width="655" src="https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/> <sub>Inject Vue App into the Content Script</sub><br/> <img src="https://user-images.githubusercontent.com/11247099/130695439-52418cf0-e186-4085-8e19-23fe808a274e.png"> </p>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 typeswebext-bridge
- effortlessly communication between contexts
Vite Plugins
unplugin-auto-import
- Directly usebrowser
and Vue Composition API without importingunplugin-vue-components
- components auto importunplugin-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
npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i
Usage
Folders
src
- main source.contentScript
- scripts and components to be injected ascontent_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 pageassets
- assets used in Vue componentsmanifest.ts
- manifest for the extension.
extension
- extension package root.assets
- static assets (mainly formanifest.json
).dist
- built files, also serve stub entry for Vite on development.
scripts
- development and bundling helper scripts.
Development
pnpm dev
Then load extension in browser with the extension/
folder.
For Firefox developers, you can run the following command instead:
pnpm start:firefox
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
pnpm build
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.