Home

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

Pre-packed

WebExtension Libraries

Vite Plugins

Vue Plugins

UI Frameworks

Coding Style

Dev tools

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

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

Volta

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

Variations

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