Skip to content

Latest commit

 

History

History
125 lines (85 loc) · 4.64 KB

README.md

File metadata and controls

125 lines (85 loc) · 4.64 KB

WebExtension Vite Starter

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

Popup

Options Page

Inject Svelte App into the Content Script

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

Vite Plugins

Svelte Plugins

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.