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

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

License

MIT