@aiou/webext-template
a fork version of vitesse-webext, but with react
thanks to awesome work https://github.com/xlzy520/vitesse-webext/tree/refactor/mv3 support chrome manifest v3
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
Features
⚡️ Instant HMR - use Vite on dev (no more refresh!)🌐 React💬 Effortless communications - powered bywebext-bridge
🍃 tailwindcss - on-demand CSS utilities🦾 TypeScript - type safe🖥 Content Script - Use React even in content script🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others📃 Dynamicmanifest.json
with full type support
Pre-packed
WebExtension Libraries
-
webextension-polyfill
- WebExtension browser API Polyfill with types -
webext-bridge
- effortlessly communication between contexts
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
Usage
Folders
-
src
- main source.-
contentScript
- scripts and components to be injected ascontent_script
-
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.
Development
pnpm dev
Then load extension in browser with the extension/
folder.
For Firefox developers, you can run the following command instead:
pnpm 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
pnpm build
And then pack files under extension
, you can upload extension.crx
or extension.xpi
to appropriate extension store.
built with