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.

$3

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:

``sh


via npm

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

`js
import { transformer } from 'wext-manifest-transformer';
// Or using CommonJS
// const { transformer } = require('wext-manifest-transformer');

// 1. Define your manifest with vendor-prefixed keys
const manifest = {
"name": "My Awesome Extension",
"version": "1.0",
"__chrome|opera__manifest_version": 3,
"__firefox__manifest_version": 2,
"__dev__name": "My Awesome Extension (Dev)",
"options_ui": {
"page": "options.html",
"__chrome__open_in_tab": true,
"__firefox__browser_style": true
},
"__chrome|prod__host_permissions": [
"https://*.google.com/"
],
"__firefox|prod__host_permissions": [
"https://*.mozilla.org/"
]
};

// 2. Transform the manifest for a specific target

// Example for Chrome in a development environment
const chromeDevManifest = transformer(manifest, 'chrome', 'development');
console.log(chromeDevManifest);
/*
Output:
{
"name": "My Awesome Extension (Dev)",
"version": "1.0",
"manifest_version": 3,
"options_ui": {
"page": "options.html",
"open_in_tab": true
}
}
*/

// Example for Firefox in a production environment
const firefoxProdManifest = transformer(manifest, 'firefox', 'production');
console.log(firefoxProdManifest);
/*
Output:
{
"name": "My Awesome Extension",
"version": "1.0",
"manifest_version": 2,
"options_ui": {
"page": "options.html",
"browser_style": true
},
"host_permissions": [
"https://*.mozilla.org/"
]
}
*/
`

FAQs

$3

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

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

if the TARGET_BROWSER is chrome this compiles to:

`js
{
"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"
}
`

$3

`js
{
"__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:

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

else

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

Issues

_Looking to contribute? Look for the Good First Issue
label._

$3

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

See Bugs

$3

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

License

MIT © Abhijith Vijayan