foray1010/chrome-manifest-loader

Chrome manifest loader for webpack

chrome-manifest-loader

npm install --save-dev chrome-manifest-loader extract-loader file-loader

Chrome manifest loader for webpack

• support Chrome, Firefox and Opera manifest.json

• import assets that is defined in manifest.json

• map package.json version to manifest.json version

Development Setup

We are using corepack to manage the yarn version

corepack enable

Usage

first, import manifest.json in your index js once

Require assets and map the asset path

Wrap your asset path with require()

• the asset path should be relative to current manifest.json path

• if no ./ or ../ prefix, it will be consider as under node_modules

webpack.config.js

{
  "module": {
    "rules": [
      {
        test: /\/manifest\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          'extract-loader',
          'chrome-manifest-loader'
        ],
        // needed for webpack 4 to override default json loader
        type: 'javascript/auto'
      }
    ]
  }
}

manifest.json

{
  "icon": {
    "16": "require(./img/icon16.png)"
  }
}

output

{
  "icon": {
    "16": "file path defined by other loader, eg: file-loader"
  }
}

Map package.json version to manifest.json version

Option: mapVersion: true

webpack.config.js

{
  "module": {
    "rules": [
      {
        test: /\/manifest\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          'extract-loader',
          {
            loader: 'chrome-manifest-loader',
            options: {
              mapVersion: true
            }
          }
        ],
        // needed for webpack 4 to override default json loader
        type: 'javascript/auto'
      }
    ]
  }
}

package.json

{
  "version": "1.0.1"
}

manifest.json

{}

output (manifest.json)

{
  "version": "1.0.1"
}

Map browserslist config to minimum_chrome_version

Option: mapMinimumChromeVersion: true

webpack.config.js

{
  "module": {
    "rules": [
      {
        test: /\/manifest\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          'extract-loader',
          {
            loader: 'chrome-manifest-loader',
            options: {
              mapMinimumChromeVersion: true
            }
          }
        ],
        // needed for webpack 4 to override default json loader
        type: 'javascript/auto'
      }
    ]
  }
}

.browserslistrc

chrome >= 51

manifest.json

{}

output (manifest.json)

{
  "minimum_chrome_version": "51"
}

chrome-manifest-loader's Issues

icons array is not recognized as array

Hey,
found a bug:
My icons array

 "icons": [
        {
            "src": "require(./icons/mt/apple-touch-icon-192x192.png)",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "require(./icons/mt/apple-touch-icon-512x512.png)",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],

gets transformed into a object

"icons":{
    "0":{
        "src":"/images/src/common/components/app/icons/mt/apple-touch-icon-192x192.png",
        "sizes":"192x192",
        "type":"image/png"
     },
    "1":{
        "src":"/images/src/common/components/app/icons/mt/apple-touch-icon-512x512.png",
        "sizes":"512x512",
        "type":"image/png"
    }
}

in version v0.2.0.

The version v0.1.2 works fine.

Custom .browserslistrc location

Could you please consider adding a param that would point to a custom .browserslistrc location?
Thanks for the effort! 💪

Can't get it to run

Not sure what I'm doing wrong, but I keep getting the error message:

ERROR in ./manifest.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'
You may need an appropriate loader to handle this file type.

My config looks like this:

module.exports = {
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\/manifest\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          'extract-loader',
          {
            loader: 'chrome-manifest-loader',
            options: {
              mapVersion: true
            }
          }
        ]
      },
      {
        test: /\.(png)$/,
        use: 'file-loader'
      }
    ],
  }
};

The index only contains:

require('./manifest.json')

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Is this possible to use with background scripts inside of chrome manifest.json?

Thank you for creating this! After many hours of searching, this is exactly what I was looking for. Right now, I am trying to build an angular app as a chrome extension and am having a bit of trouble getting it to work with my background script definition inside of manifest.json

I believe I have been able to follow all of the documentation correctly, but my dist/manifest.json file ends up looking like this:

{
    "name": "My Extension",
    "version": "1.0",
    "description": "",
    "manifest_version": 2,
    "permissions": [
        "alarms",
        "tabs",
        "activeTab",
        "webNavigation",
        "storage"
    ],
    "background": {
        "scripts": [
            "require(./background.js)", // Background is not replaced with the build script
            "runtime.js"
        ]
    },
    "browser_action": {
        "default_popup": "index.html"
    }
}

Is it possible for this extension to load the compiled background scripts? Here is my manifest.json, webpack.config, and entry script definitions:

src/Manifest.json

{
    "name": "My Extension",
    "version": "1.0",
    "description": "",
    "manifest_version": 2,
    "permissions": [
        "alarms",
        "tabs",
        "activeTab",
        "webNavigation",
        "storage"
    ],
    "background": {
        "scripts": [
            "require(./background.js)",
            "runtime.js"
        ]
    },
    "browser_action": {
        "default_popup": "index.html"
    }
}

src/background.ts

import * as data from "./manifest.json";
require('./manifest.json');

console.log(JSON.stringify(data));

webpack.config

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: {
    main: "./src/main.ts",
    background: "./src/background.ts",
  },
  output: {
    filename: "[chunkhash].js",
    chunkFilename: "[chunkhash].js",
  },
  resolve: {
    extensions: [".ts", ".js", ".json"],
  },
  module: {
    rules: [
      {
        test: /\/manifest\.json$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
            },
          },
          "extract-loader",
          "chrome-manifest-loader",
        ],
        // needed for webpack 4 to override default json loader
        type: "javascript/auto",
      },
      {
        test: /\.(ts|js)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-typescript"],
          plugins: [
            ["@babel/plugin-proposal-decorators", { legacy: true }],
            ["@babel/plugin-proposal-class-properties", { loose: true }],
          ],
        },
      },
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          ident: "postcss",
          syntax: "postcss-scss",
          plugins: () => [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        },
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()],
};

Any help or guidance in the right direction would be much appreciated. Thanks again for making this.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.