a fork version of vitesse-webext, but with react
⚡️Instant HMR - use Vite on dev (no more refresh!)
💬Effortless communications - powered by
🍃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
manifest.jsonwith full type support
webextension-polyfill- WebExtension browser API Polyfill with types
webext-bridge- effortlessly communication between contexts
- Windi CSS - next generation utility-first CSS framework
- 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
src- main source.
contentScript- scripts and components to be injected as
background- scripts for background.
components- auto-imported React 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.
Then load extension in browser with the
For Firefox developers, you can run the following command instead:
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.
To build the extension, run
And then pack files under
extension, you can upload
extension.xpi to appropriate extension store.