A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
Popup
Options Page
Inject Vue App into the Content Script
- โก๏ธ 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
webextension-polyfill
- WebExtension browser API Polyfill with typeswebext-bridge
- effortlessly communication between contexts
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
- VueUse - collection of useful composition APIs
- UnoCSS - the instant on-demand Atomic CSS engine
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi
- 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
Create a repo from this template on GitHub.
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
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.
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.
If you have a web browser, you can get a fully pre-configured development environment with one click:
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.
This template is originally made for the volta.net browser extension.
This is a variant of Vitesse, check out the full variations list.