Numeric Production Mechanism

    wext-manifest-loader
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    wext-manifest-loader

    Webpack Loader for Webextension manifest

    🙋‍♂️ Made by @abhijithvijayan

    Donate: PayPal, Patreon

    Buy Me a Coffee


    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

    Chrome Firefox Opera Edge

    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:

    # via npm
    npm install --save-dev wext-manifest-loader wext-manifest-webpack-plugin
    
    # or yarn
    yarn 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

    // ... other plugins
    const WextManifestWebpackPlugin = require("wext-manifest-webpack-plugin");
    
    const targetBrowser = process.env.TARGET_BROWSER;
    const destPath = path.join(__dirname, 'extension');
    
    module.exports = {
        entry: {
            manifest: './src/manifest.json',
            // ...
        },
    
        output: {
            path: path.join(destPath, targetBrowser),
            filename: 'js/[name].bundle.js',
        },
    
        module: {
            rules: [
                {
                    type: 'javascript/auto', // prevent webpack handling json with its own loaders,
                    test: /manifest\.json$/,
                    use: 'wext-manifest-loader',
                    exclude: /node_modules/,
                },
            ]
        },
    
        plugins: [
            new WextManifestWebpackPlugin(),
            // ...
        ],
    };

    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

    module.exports = {
      module: {
        rules: [
          {
            type: 'javascript/auto', // prevent webpack handling json with its own loaders,
            test: /manifest\.json$/,
            use: {
                loader: 'wext-manifest-loader',
                options: {
                    usePackageJSONVersion: true,
                },
            },
            exclude: /node_modules/,
          },
        ],
      },
    };

    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 enviroment

    {
      "__dev__name": "NameInDevelopment",
      "__prod__name": "NameInProduction",
    }

    if the NODE_ENV is production this compiles to:

    {
      "name": "NameInProduction",
    }

    else

    {
      "name": "NameInDevelopment",
    }

    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

    Credits

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

    License

    MIT © Abhijith Vijayan

    Install

    npm i wext-manifest-loader

    DownloadsWeekly Downloads

    1,849

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • abhijithvijayan