Get Started
vite-plugin-web-extension lets you get started making Chrome extensions with just a manifest.json and a simple Vite build config:
It works by automatically detecting inputs from your manifest, then it orcastraits the different build steps for you.
Features
- 🔧 Automatically build inputs from in your
manifest.json - 🚀 Open a browser and install the extension during development
- ⚡ Super fast dev mode that automatically reloads your extension
- 🌐 Supports all browsers
- 🔥 Frontend frameworks for the popup, options page, and content scripts!
- 🤖 Typescript support out of the box!
- ✅ Manifest validation
Scaffolding a New Extension
To get started quickly, use the create-vite-plugin-web-extension starter kit to bootstrap a project for you automatically:
pnpm create vite-plugin-web-extension
npm create vite-plugin-web-extension
yarn create vite-plugin-web-extension
Then follow the prompts! There are several starting templates to pick from:
| Javascript | Typescript |
|---|---|
vanilla-js | vanilla-ts |
vue-js | vue-ts |
Want more starter kits? Feel free to open a PR!
See Manual Project Setup for more details on how to setup a project without using a starter kit.
How does the plugin work?
The plugin converts a single build into a 2 step process:
- Bundle all the HTML entry-points as a multi-page app
- Bundle everything else (background scripts/service worker, content scripts, etc) individually in library mode
Scripts have to be bundled individually, separate from each other and the HTML entry-points, because they cannot import additional JS files. Each entry-point needs to have everything it needs inside that one file listed in the final manifest.
During development, the plugin will manage rebuilding the extension AND reloading it in your browser.