A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
Popup
Options Page
Inject React App into the Content Script
- ⚡️ 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
webextension-polyfill
- WebExtension browser API Polyfill with typeswebext-bridge
- effortlessly communication between contexts
unplugin-auto-import
- Directly usebrowser
without importingunplugin-icons
- icons as componentsvite-plugin-windicss
- WindiCSS support
- Windi CSS - next generation utility-first CSS framework
- 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
Create a repo from this template on GitHub.
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
src
- main source.contentScript
- scripts and components to be injected ascontent_script
background
- scripts for background.components
- auto-imported Vue components that shared in popup and options page.styles
- styles shared in popup and options pagemanifest.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.
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.
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.
This template was made based on antfu/vitesse-webext, one of many @antfu's wonderful works.
For Vue 3, check out the original template.