wext-manifest-transformer

Transformer module for Webextension manifest.json

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

---

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

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

Table of Contents

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

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 with the help of vite-plugin-wext-manifest plugin.

Installation

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

1# via npm
2npm install wext-manifest-transformer
3
4# or yarn
5yarn add wext-manifest-transformer

Usage

You can easily use this module together with the vite-plugin-wext-manifest to output the manifest.json as part of your build process with auto rebundling on file change. This also lets you build v2 manifest & v3 manifest for different browsers from the same manifest.json.

Sample manifest with vendor prefixed keys

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

1import { transformer } from 'wext-manifest-transformer';
2// Or using CommonJS
3// const { transformer } = require('wext-manifest-transformer');
4
5// 1. Define your manifest with vendor-prefixed keys
6const manifest = {
7	"name": "My Awesome Extension",
8	"version": "1.0",
9	"__chrome|opera__manifest_version": 3,
10	"__firefox__manifest_version": 2,
11	"__dev__name": "My Awesome Extension (Dev)",
12	"options_ui": {
13		"page": "options.html",
14		"__chrome__open_in_tab": true,
15		"__firefox__browser_style": true
16	},
17	"__chrome|prod__host_permissions": [
18		"https://*.google.com/"
19	],
20	"__firefox|prod__host_permissions": [
21		"https://*.mozilla.org/"
22	]
23};
24
25// 2. Transform the manifest for a specific target
26
27// Example for Chrome in a development environment
28const chromeDevManifest = transformer(manifest, 'chrome', 'development');
29console.log(chromeDevManifest);
30/*
31Output:
32{
33  "name": "My Awesome Extension (Dev)",
34  "version": "1.0",
35  "manifest_version": 3,
36  "options_ui": {
37    "page": "options.html",
38    "open_in_tab": true
39  }
40}
41*/
42
43// Example for Firefox in a production environment
44const firefoxProdManifest = transformer(manifest, 'firefox', 'production');
45console.log(firefoxProdManifest);
46/*
47Output:
48{
49  "name": "My Awesome Extension",
50  "version": "1.0",
51  "manifest_version": 2,
52  "options_ui": {
53    "page": "options.html",
54    "browser_style": true
55  },
56  "host_permissions": [
57    "https://*.mozilla.org/"
58  ]
59}
60*/

---

FAQs

1.What are vendor prefixed manifest keys

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

1{
2  "__chrome__name": "AwesomeChrome",
3  "__firefox__name": "AwesomeFirefox",
4  "__edge__name": "AwesomeEdge",
5  "__opera__name": "AwesomeOpera"
6}

if the TARGET_BROWSER is chrome this compiles to:

1{
2  "name": "AwesomeChrome",
3}

---

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

1{
2  "__dev__name": "NameInDevelopment",
3  "__prod__name": "NameInProduction",
4  "__chrome|firefox|dev__description": "DescriptionInDevelopmentForSetOfBrowsers",
5  "__chrome|firefox|prod__description": "DescriptionInProductionForSetOfBrowsers"
6}

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

1{
2  "name": "NameInProduction",
3  "description": "DescriptionInProductionForSetOfBrowsers"
4}

else

1{
2  "name": "NameInDevelopment",
3  "description": "DescriptionInDevelopmentForSetOfBrowsers"
4}

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