jsn-webpack-extension-manifest-plugin

JsnWebpackManifestExtensionPlugin

Should work with webpack >= 4.41.2 and nodejs >= 8.10.0

Plugin simplifies the development of browser extensions

Install

npm i -D jsn-webpack-extension-manifest-plugin

Description and usage

This plugin allows to use in chrome extension's manifest.json file paths to resources with prefixes @ and @!.

Prefix @ will be resolved during webpack compilation to resource path loaded with file-loader.

Prefix @! will be resolved during webpack compilation to compiled chunk path.

Examples

Project structure:

• build
• src
  • client
    • client-script.js
  • hello_world.js
• manifest.json

Webpack config:

module.exports = {
    entry: {
        helloworld: 'src/hello_world.js'
    },
    output: {
        filename: 'js/[name].build.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {test: /src\/client\/.+\.js$/, use: 'file-loader'}
        ]
    },
    plugins: [
        new JsnWebpackExtensionManifestPlugin({
            manifest: path.resolve(__dirname, 'manifest.json'),
            outputFilename: 'manifest.json',
            useLoader: false
        })
    ]
};

Manifest:

{
  "background": [
    "@!helloworld"
  ],
  "web_accessible_resources": [
    "@src/client/client-script.js"
  ]
}

After compilation manifest will be placed to build directory and resources prefixed with @ or @! will be replaced.

Result manifest.json

{
  "background": [
    "js/helloworld.build.js"
  ],
  "web_accessible_resources": [
    "js/client/c265935b2ca8ab17df005645b08b714c.js"
  ]
}

Plugin options

Option	Type	Allowed values	Default value	Description
name (optional)	string	*		Name of the plugin instance (this will be used to name intermediate js file)
manifest (required)	string	*		Absolute path to the manifest file
entryName (optional)	string	*	manifest.json	Entry name for child compiler
outputFilename (optional)	string	*	manifest.json	Path to the output manifest file relative to output.path of main compiler
useLoader (optional)	boolean	true, false	true	By default plugin will use file-loader to load all files, but if you already configured loaders for files that will be stated in manifest - you may want to disable this option
merge (optional)	object, object[]	*	{}	Fields that will be merged into manifest. Make sure that you DO NOT use prefixed with @ or @! paths to resources, because they WILL NOT be processed. If you want to merge into the manifest more than one object - you can pass to this property array of objects