vite-plugin-wext-manifest

Vite Plugin for Webextension manifest

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

---

Generate browser tailored manifest.json for Web Extensions that you specify properties to appear only in specific browsers.

❤️ it? ⭐️ it on GitHub or Tweet about it.

Table of Contents

• Browser Support
• Installation
• Usage
• FAQs
• Issues
  • 🐛 Bugs
• LICENSE

Browser Support

✔	✔	✔	✔

This loader will take a definition input for the manifest, and return you content for the specified browser.

Looking for Web Extension starter

Checkout web-extension-starter that uses this package

Installation

Ensure you have Node.js 18 or later installed. Then run the following:

# via npm
npm install --save-dev vite-plugin-wext-manifest

# or yarn
yarn add vite-plugin-wext-manifest --dev

Usage

You can easily use this module to output the manifest.json as part of your build process with auto rebundling on file change.

Note: Make sure you pass a TARGET_BROWSER env variable with one of chrome/firefox/edge/brave/opera/vivaldi/arc/yandex value

Sample manifest with vendor prefixed keys

https://github.com/abhijithvijayan/web-extension-starter/blob/react-typescript/source/manifest.json

vite.config.ts

// ... other plugins
import vitePluginWextManifest from "./vite-plugin-wext-manifest";

export default defineConfig(({ mode }) => {
	const sourcePath = path.resolve(__dirname, "source");

	return {
		root: sourcePath,

		plugins: [
			vitePluginWextManifest({
				manifestPath: "manifest.json",
				usePackageJSONVersion: true,
			}),
			// ...
		],
	}
});

Options

manifestPath

Type: String

Path to the manifest.json to transform.

usePackageJSONVersion

Type: Boolean Default: false

If true, updates manifest.json version field with package.json version. It is often useful for easy release of web-extension.

---

FAQs

1.What are vendor prefixed manifest keys

Vendor prefixed manifest keys allow you to write one manifest.json for multiple vendors.

{
  "__chrome__name": "AwesomeChrome",
  "__firefox__name": "AwesomeFirefox",
  "__edge__name": "AwesomeEdge",
  "__opera__name": "AwesomeOpera"
}

if the TARGET_BROWSER is chrome this compiles to:

{
  "name": "AwesomeChrome",
}

---

Add keys to multiple vendors by seperating them with | in the prefix

{
  __chrome|opera__name: "AwesomeExtension"
}

if the vendor is chrome or opera, this compiles to:

{
  "name": "AwesomeExtension"
}

2. How can I conditionally set keys based on environment

{
  "__dev__name": "NameInDevelopment",
  "__prod__name": "NameInProduction",
  "__chrome|firefox|dev__description": "DescriptionInDevelopmentForSetOfBrowsers",
  "__chrome|firefox|prod__description": "DescriptionInProductionForSetOfBrowsers"
}

if the NODE_ENV is production and the TARGET_BROWSER is chrome this compiles to:

{
  "name": "NameInProduction",
  "description": "DescriptionInProductionForSetOfBrowsers"
}

else

{
  "name": "NameInDevelopment",
  "description": "DescriptionInDevelopmentForSetOfBrowsers"
}

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

See Bugs

Linting & TypeScript Config

• Shared Eslint & Prettier Configuration - @abhijithvijayan/eslint-config
• Shared TypeScript Configuration - @abhijithvijayan/tsconfig

License

MIT © Abhijith Vijayan