⚡️ WebExtension Vite Starter Template
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
Popup
Options Page
Inject Vue App into the Content Script
<script setup>
syntax and more!webext-bridge
and VueUse storagemanifest.json
with full type supportwebextension-polyfill
- WebExtension browser API Polyfill with typeswebext-bridge
- effortlessly communication between contextsunplugin-auto-import
- Directly use browser
and Vue Composition API without importingunplugin-vue-components
- components auto importunplugin-icons
- icons as components
<script setup>
SFC syntax
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 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 pageassets
- assets used in Vue componentsmanifest.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.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.