Skip to content

hasaniskandar/vite-preact-compat-webext

 
 

Repository files navigation

WebExtension Vite Starter

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

Popup

Options Page

Inject React App into the Content Script

Features

  • ⚡️ Instant HMR - use Vite on dev (no more refresh!)
  • ⚛️ React - via preact/compat
  • 💬 Effortless communications - powered by webext-bridge
  • 🍃 Windi CSS - on-demand CSS utilities
  • 🦾 TypeScript - type safe
  • 🖥 Content Script - Use React 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

UI Frameworks

  • Windi CSS - next generation utility-first CSS framework

Coding Style

Dev tools

  • TypeScript
  • Yarn - 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 yarn installed, run: npm install --global yarn

npx degit hasaniskandar/vite-preact-compat-webext my-webext
cd my-webext
yarn

Usage

Folders

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

Development

yarn dev

Then load extension in browser with the extension/ folder.

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

yarn 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

yarn build

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

Credits

This template was made based on antfu/vitesse-webext, one of many @antfu's wonderful works.

Variations

For Vue 3, check out the original template.

About

⚡️ WebExtension Vite Starter Template

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.0%
  • HTML 3.3%
  • JavaScript 2.7%
  • CSS 2.0%