/preact-webext

⚡️ WebExtension Vite Starter Template with Preact

Primary LanguageTypeScriptMIT LicenseMIT

Preact Webext

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

Credits

This boilerplate is a shameless fork of antfu/vitesse-webext. You can say that I have just forked, edited a few lines and pushed.

oops, I haven't even changed the Readme :p

Features

  • ⚡️ Instant HMR - use Vite on dev (no more refresh!)
  • ⚛ Preact - For my comfort!
  • 💬 Effortless communications - powered by webext-bridge
  • 🦾 TypeScript - type safe
  • 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
  • 📃 Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

Dev tools

  • TypeScript
  • pnpm - fast, disk space efficient package manager
  • tsup - Zero config TypeScript bundler powered by esbuild
  • esno - TypeScript / ESNext node runtime powered by esbuild
  • npm-run-all - Run multiple npm-scripts in parallel or sequential

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 piyushsuthar/preact-webext my-webext
cd my-webext
pnpm i

Usage

Folders

  • views - frontend for the extension (popup, options and new-tab).
  • src - background scripts and content scripts.
    • manifest.ts - manifest for the extension.
  • extension - extension package root, also holds assets.
  • scripts - development helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder,

Build

To build the extension, run

pnpm build

And then pack files under extension.