wext-manifest-webpack-plugin

1.4.1 verified Sat Apr 25 auth: no javascript

Webpack plugin that solves the problem of generating JS files for manifest.json entries in web extensions (Chrome, Firefox, Edge, Opera). It automatically finds JS files referenced in the manifest entry, copies the manifest to the output, and removes the generated JS file from the compilation to avoid duplicate or extraneous output. Version 1.4.1 supports both webpack 4 and 5. It is commonly used with wext-manifest-loader and the web-extension-starter project. The plugin is maintained by a single developer with updates focused on compatibility and stability. It fills a niche gap not addressed by other webpack extension plugins like @pmmmwh/react-refresh-webpack-plugin or webpack-ext-reloader by providing a minimal, focused solution for manifest handling.

Common errors

error TypeError: WextManifestWebpackPlugin is not a constructor ↓

cause Using ES module import with default export on a CJS-only package.

fix

Use const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

error Module not found: Error: Can't resolve 'wext-manifest-loader' ↓

cause Missing wext-manifest-loader dependency required for processing manifest.json.

fix

Install wext-manifest-loader: npm install --save-dev wext-manifest-loader

error Unexpected token 'export' in manifest.json ↓

cause Webpack attempts to parse manifest.json with default JSON loaders instead of wext-manifest-loader.

fix

Add rule with type: 'javascript/auto' and use: 'wext-manifest-loader' for manifest.json files.

Warnings

gotcha Plugin requires wext-manifest-loader for JSON handling; omission causes manifest not to be copied. ↓

fix Add wext-manifest-loader as a devDependency and configure a webpack rule for manifest.json with type: 'javascript/auto'.

gotcha Plugin does not accept any constructor options; passing options may lead to silent failures. ↓

fix Instantiate with new WextManifestWebpackPlugin() without arguments.

gotcha The plugin is CJS-only; using ES module import will fail. ↓

fix Use require() or configure bundler accordingly.

deprecated Webpack 4 support is considered deprecated; upgrade to webpack 5 for best compatibility. ↓

fix Upgrade to wext-manifest-webpack-plugin >=1.4.0 and webpack >=5.

Install

npm install wext-manifest-webpack-plugin

yarn add wext-manifest-webpack-plugin

pnpm add wext-manifest-webpack-plugin

Imports

WextManifestWebpackPlugin

wrong

import WextManifestWebpackPlugin from 'wext-manifest-webpack-plugin';

correct

const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

CJS-only package; does not support ESM import. TypeScript users must use require or enable esModuleInterop.

WextManifestWebpackPlugin

wrong

import WextManifestWebpackPlugin from 'wext-manifest-webpack-plugin';

correct

import WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

For TypeScript with CJS interop, use import = require or enable esModuleInterop.

Plugin
wrong
```
new WextManifestWebpackPlugin({ ... options })
```
correct
```
new WextManifestWebpackPlugin()
```
The constructor takes no options. Passing options will be silently ignored.

Quickstart

Demonstrates basic webpack config using the plugin with wext-manifest-loader for a Chrome extension.

const path = require('path');
const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');

const destPath = path.resolve(__dirname, 'dist');
const targetBrowser = 'chrome';

module.exports = {
  entry: {
    manifest: './source/manifest.json',
  },
  output: {
    path: path.join(destPath, targetBrowser),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        type: 'javascript/auto',
        test: /\.json$/,
        use: 'wext-manifest-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new WextManifestWebpackPlugin(),
  ],
};