WebExtension Vite Starter

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

<sub>Popup

Options Page

Inject Svelte App into the Content Script</sub>

Features

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 💬 Effortless communications - powered by webext-bridge and svelte-webext-stores
• 🍃 Windi CSS - on-demand CSS utilities
• 🦾 TypeScript - type safe
• 🌟 Icons - Access to icons from any iconset directly
• 🖥 Content Script - Use Svelte 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 Svelte runtime API without importing
• unplugin-icons - icons as components
  • Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-windicss - WindiCSS support

Svelte Plugins

• svelte-webext-stores - a Svelte store backed by browser.storage

UI Frameworks

• Windi CSS - next generation utility-first CSS framework

Coding Style

• ESLint with the SvelteKit defaults (as of the time of writing)

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 ohmree/sveltesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - Svelte components that are shared in popup and options page.
  • styles - styles shared in popup and options page
  • assets - static assets.
• dist - extension root (contains built files, also serve stub entry for Vite on development).
• scripts - development and bundling helper scripts.
  • manifest.ts - manifest for the extension.

Development

pnpm dev

Then load extension in browser with the dist/ folder.

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

pnpm start:firefox

web-ext auto reload the extension when dist/ 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 release:firefox

or

pnpm release:chromium

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

Credits

This is a Svelte port of Vitesse WebExt and owes everything to it, check out Vitesse's full variations list.