wext-manifest-loader

Webpack Loader 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 10 or later installed. Then run the following:

1# via npm
2npm install --save-dev wext-manifest-loader wext-manifest-webpack-plugin
3
4# or yarn
5yarn add wext-manifest-loader wext-manifest-webpack-plugin --dev

Usage

You can easily use this module together with the wext-manifest-webpack-plugin to output the manifest.json as part of your build process without any additional js bundle and with auto rebundling on file change.

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

Sample manifest with vendor prefixed keys

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

webpack.config.js

1// ... other plugins
2const WextManifestWebpackPlugin = require("wext-manifest-webpack-plugin");
3
4const targetBrowser = process.env.TARGET_BROWSER;
5const destPath = path.join(__dirname, 'extension');
6
7module.exports = {
8    entry: {
9        manifest: './src/manifest.json',
10        // ...
11    },
12
13    output: {
14        path: path.join(destPath, targetBrowser),
15        filename: 'js/[name].bundle.js',
16    },
17
18    module: {
19        rules: [
20            {
21                type: 'javascript/auto', // prevent webpack handling json with its own loaders,
22                test: /manifest\.json$/,
23                use: 'wext-manifest-loader',
24                exclude: /node_modules/,
25            },
26        ]
27    },
28
29    plugins: [
30        new WextManifestWebpackPlugin(),
31        // ...
32    ],
33};

Options

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.

webpack.config.js

1module.exports = {
2  module: {
3    rules: [
4      {
5        type: 'javascript/auto', // prevent webpack handling json with its own loaders,
6        test: /manifest\.json$/,
7        use: {
8            loader: 'wext-manifest-loader',
9            options: {
10                usePackageJSONVersion: true,
11            },
12        },
13        exclude: /node_modules/,
14      },
15    ],
16  },
17};

---

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

Credits

Thanks to @fregante for suggesting to convert initial (wext-manifest) module to webpack loader(wext-manifest-loader)

License

MIT © Abhijith Vijayan