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:

1npm install --save-dev vite-web-extension-manifest

or

1yarn add --dev vite-web-extension-manifest

Usage

Add the plugin to your vite.config.js or vite.config.ts and specify your target browsers:

1import { defineConfig } from "vite";
2import viteWebExtensionManifest from "vite-web-extension-manifest";
3
4export default defineConfig({
5  plugins: [
6    viteWebExtensionManifest("path/to/manifest.json", {
7      chrome: true,
8      firefox: true,
9    }),
10  ],
11});

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:

1{
2  "{{chrome}}.manifest_version": 3,
3  "{{firefox}}.manifest_version": 2,
4  "name": "Example",
5  "version": "1.0.0",
6  "description": "Test Vite Plugin Extension with Vue",
7  "icons": {
8    "16": "icon/16.png",
9    "48": "icon/48.png",
10    "128": "icon/128.png"
11  },
12  "{{chrome}}.action": {
13    "default_popup": "popup/index.html"
14  },
15  "{{firefox}}.browser_action": {
16    "default_popup": "popup/index.html"
17  }
18}

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 Chrome
• manifest.firefox.json for Firefox

License

MIT