webpack-target-webextension

WebExtension Target for Webpack 4. Supports code-splitting with native dynamic import(with tabs.executeScript as fallback).

You can use the neutrino-webextension preset directly which uses this library.

The code is based on the official web target.

Limitation

In content scripts native dynamic import subjects to target page content security policy. This library adds tabs.executeScript as fallback method should native dynamic import fails.

But do note that tabs.executeScript does not work for pages without tab, like background page and browser action page(also known as popup page). This is fine since they are all extension internal pages where native dynamic import should always work.

Caveats

Native dynamic import is buggy in Firefox. A workaround is to write a postbuild script targeting only Firefox build. It collects all the dynamic chunks and appends them to every entries in htmls and the manifest.json script lists.

The Firefox addons-linter is also making aggressive errors on dynamic import. A workaround is to just replace the import with other name. Since all the dynamic chunks are loaded in Firefox the import() code should never be run.

Installation

yarn

1yarn add webpack-target-webextension

npm

1npm install webpack-target-webextension

Usage

You might also need to remove the @babel/plugin-syntax-dynamic-import plugin.

1// webpack.config.js
2
3const path = require('path')
4const WebExtensionTarget = require('')
5
6// Optional webpack node config
7const nodeConfig = {}
8
9module.exports = {
10  node: nodeConfig
11  // Need to set these fields manually as their default values rely on `web` target.
12  // See https://v4.webpack.js.org/configuration/resolve/#resolvemainfields
13  resolve: {
14    mainFields: ['browser', 'module', 'main'],
15    aliasFields: ['browser']
16  },
17  output: {
18    globalObject: 'window'
19    // relative to extension root
20    publicPath: '/assets/',
21  },
22  optimization: {
23    // Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=1108199
24    splitChunks: { automaticNameDelimiter: '-' },
25  },
26  target: WebExtensionTarget(nodeConfig)
27}

1// manifest.json
2
3{
4  // Make sure chunks are accessible.
5  // For example, if webpack outputs js and css to `assets`:
6  "web_accessible_resources": ["assets/*"],
7}

1// src/background.js
2
3// For fallback `tabs.executeScript`
4import 'webpack-target-webextension/lib/background'
5
6// ... your code

Hot Module Reload and development tips

This target supports HMR too, but you need to tweak manifest.json and open some webpack options to make it work.

Changes in manifest.json

Those changes are only needed in development!! Don't add them in production!!

Please include this line in the manifest to make sure HMR manifest and new chunks are able to downloaded.

1"web_accessible_resources": ["*.js", "*.json"],

Please include this line if you want to use eval based sourcemaps.

1"content_security_policy": "script-src 'self' blob: filesystem: 'unsafe-eval';",

Changes in webpack config

1devServer: {
2  // Have to write disk cause plugin cannot be loaded over network
3  writeToDisk: true,
4  hot: true,
5  hotOnly: true,
6  // WDS does not support chrome-extension:// browser-extension://
7  disableHostCheck: true,
8  injectClient: true,
9  injectHot: true,
10  headers: {
11    // We're doing CORS request for HMR
12    'Access-Control-Allow-Origin': '*'
13  },
14  // If the content script runs in https, webpack will connect https://localhost:HMR_PORT
15  // More on https://webpack.js.org/configuration/dev-server/#devserverhttps
16  https: true
17},