vite-web-extension-manifest
A Vite plugin to watch and copy the web extension manifest file during the build process, with dynamic target support for Chrome and Firefox.
Installation
First, install the plugin using npm or yarn:
npm install --save-dev vite-web-extension-manifest
or
yarn add --dev vite-web-extension-manifest
Usage
Add the plugin to your vite.config.js or vite.config.ts and specify your target browsers:
import { defineConfig } from "vite";
import viteWebExtensionManifest from "vite-web-extension-manifest";
export default defineConfig({
plugins: [
viteWebExtensionManifest("path/to/manifest.json", {
chrome: true,
firefox: true,
}),
],
});
Replace 'path/to/manifest.json' with the path to your manifest file. You can specify which browsers to target by setting the chrome and firefox options to true or false.
Manifest File Example
Your manifest file can include placeholders for dynamic content:
{
"{{chrome}}.manifest_version": 3,
"{{firefox}}.manifest_version": 2,
"name": "Example",
"version": "1.0.0",
"description": "Test Vite Plugin Extension with Vue",
"icons": {
"16": "icon/16.png",
"48": "icon/48.png",
"128": "icon/128.png"
},
"{{chrome}}.action": {
"default_popup": "popup/index.html"
},
"{{firefox}}.browser_action": {
"default_popup": "popup/index.html"
}
}
When building for Chrome, all {{chrome}} placeholders will be replaced accordingly, and similar for Firefox.
Output
The plugin will generate separate manifest files for each specified target:
manifest.chrome.json for Chromemanifest.firefox.json for Firefox
License
MIT
