Registry / devops / webpack-target-webextension

webpack-target-webextension

JSON →
library2.1.3jsnpmunverified

A Webpack 5 plugin (also works with Rspack) that provides presets and fixes for building Web Extensions (Chrome, Firefox). It enables code splitting via dynamic import() and classic loaders, Hot Module Reload, and correct public path handling. Current stable version is 2.1.3, released under the MIT license. Key differentiators: supports Manifest V2 and V3, works with both webpack and rspack, and includes built-in chunk loaders for content scripts and background scripts. Note: webpack 4 users must use version 0.2.1.

devops
npm install webpack-target-webextension
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · WEBPACK-TARGET-WEB
W
webpack-target-webextension
devopsjavascriptv2.1.3
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–223 runs
build_error
glibc
node 18–223 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebExtension
✓ import WebExtension from 'webpack-target-webextension'
✗ const WebExtension = require('webpack-target-webextension').default;
Default export; CommonJS require with .default is a common mistake.
WebExtension (CJS)
✓ const WebExtension = require('webpack-target-webextension')
✗ const { WebExtension } = require('webpack-target-webextension')
CJS require gets the default export directly, not a named export.
TypeScript usage
✓ import WebExtension from 'webpack-target-webextension'
✗ import { WebExtension } from 'webpack-target-webextension'
This package does not ship TypeScript types; you may need to define your own or use @ts-ignore.

Minimal webpack config for a Web Extension using the plugin. Sets up entries for background, content script, and options page, with HTML generation and manifest copy.

const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const WebExtension = require('webpack-target-webextension'); module.exports = { context: __dirname, entry: { background: './src/background/index.js', content: './src/content-script/index.js', options: './src/options-page/index.js', }, output: { path: path.join(__dirname, 'dist'), }, plugins: [ new HtmlPlugin({ filename: 'options.html', chunks: ['options'] }), new WebExtension({ background: { pageEntry: 'background' }, }), new CopyPlugin({ patterns: [{ from: 'manifest.json' }], }), ], };
Debug
Known issues
gotchaAll JS files must be added to web_accessible_resources for dynamic import() to work in content scripts. This allows normal websites to fetch those files.
fix
Add '/*.js' to web_accessible_resources in manifest.json with appropriate matches.
affects: >=2.0.0
gotchaFor Manifest V3, if you use chrome.scripting.executeScript, you must have 'scripting' permission and options.background configured with classicLoader not false.
fix
Include 'scripting' in permissions and set background: { pageEntry: 'background' } with no classicLoader: false.
affects: >=2.0.0
gotchaThe plugin is designed for webpack 5; using it with webpack 4 will fail. Pin to version 0.2.1 for webpack 4 support.
fix
Use 'npm install webpack-target-webextension@0.2.1' for webpack 4.
affects: >=1.0.0
gotchaHot Module Reload (HMR) requires additional web_accessible_resources entries for /hot/*.js and /hot/*.json files during development.
fix
Add '"resources": ["/hot/*.js", "/hot/*.json"], "matches": ["<all_urls>"]' to web_accessible_resources.
affects: >=2.0.0
gotchaThe plugin's chunk loader for content scripts uses dynamic import() by default, which requires Firefox 89+ or Chrome 63+.
fix
For older browsers, set output.environment.dynamicImport to false to use alternative methods, or use the classic loader.
affects: >=2.0.0
Errors
Common errors & fixes
Error: ChunkLoadError: Loading chunk 0 failed. (error: TypeError: Failed to fetch dynamically imported module: ...)
Dynamic import() in content script is blocked because JS files are not listed in web_accessible_resources.
fix
Add '"resources": ["/*.js"], "matches": ["<all_urls>"]' to your manifest.json's web_accessible_resources.
TypeError: Cannot read properties of undefined (reading 'pageEntry')
The plugin requires a background page entry when using classic loader for background scripts.
fix
Configure the WebExtension plugin with background: { pageEntry: 'background' } in webpack config, and ensure the background entry exists.
Error: webpack-target-webextension requires webpack >=5.0.0
Installed version incompatible with webpack 4.
fix
Downgrade to version 0.2.1: 'npm install webpack-target-webextension@0.2.1'.
Module not found: Error: Can't resolve 'webpack-target-webextension'
Package not installed or not in node_modules.
fix
Run 'npm install webpack-target-webextension --save-dev'.
Upgrade
Version history
2.1.3latest on npm
Audit
Dependencies
webpackrequiredPeer dependency; plugin requires webpack ^5.0.0 (or Rspack).
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/crimx/webpack-target-webextension ↗
packagehttps://www.npmjs.com/package/webpack-target-webextension ↗
homepagehttps://webextension-webpack-plugin.org ↗