webpack-ext-reloader

 

Add hot reloading to your webpack WebExtension! 🔥 

https://www.npmjs.com/package/webpack-ext-reloader

A Webpack plugin to automatically reload browser extensions during development.

Installing

For npm:

npm install webpack-ext-reloader --save-dev

For yarn:

yarn add webpack-ext-reloader --dev

What is this?

This is a webpack plugin that brings hot reloading functionality to WebExtensions, essentially resembling webpack-dev-server but for WebExtensions.

This project is a fork of webpack-extension-reloader, maintained and updated by the team at Simplify. The goal is to continue supporting the latest version of webpack (webpack-extension-reloader only supports webpack v4) while introducing new improvements, such as HMR.

Note: This plugin does not support Hot Module Replacement (HMR) yet.

How to use

Note I: Either entry or manifest is needed. If both are provided, the entry will override the information from manifest.json. If neither is provided, the default entry values (as shown above) are used.

Run your application with Webpack in watch mode:

NODE_ENV=development webpack --config myconfig.js --mode=development --watch 

Note II: You need to set --mode=development to activate the plugin. If you didn't set it in the webpack.config.js already, you need to run with --watch since the plugin will be able to sign the extension only if webpack triggers the rebuild.

Multiple Content Script and Extension Page support

If your extension uses more than one content script or extension page, like:

entry: {
  'my-first-content-script': './my-first-content-script.js',
  'my-second-content-script': './my-second-content-script.js',
  background: './my-background-script.js',
  'popup': './popup.js',
  'options': './options.js',
}

Use the entries.contentScript or entries.extensionPage options as an array:

plugins: [
  new ExtReloader({
    entries: { 
      contentScript: ['my-first-content-script', 'my-second-content-script'],
      background: 'background',
      extensionPage: ['popup', 'options'],
    }
  }),
]

CLI

If you'd rather skip the plugin setup, you can use the client included with the package. Install the package globally or use npx:

npx webpack-ext-reloader

If run directly, it will use the default configurations. But if you'd like customization:

npx webpack-ext-reloader --config wb.config.js --port 9080 --no-page-reload --content-script my-content.js --background bg.js --extension-page popup.js

For multiple content scripts or extension pages, separate the options with commas (without spaces):

npx webpack-ext-reloader --content-script my-first-content.js,my-second-content.js --extension-page popup.js,options.js

Client options

Name	Default	Description
--help		Shows help
--config	webpack.config.js	Path to the webpack configuration file
--port	9090	Port to run the server on
--manifest		Path to the extension's manifest.json file
--content-script	content-script	Entry/entries name(s) for the content script(s)
--background	background	Entry name for the background script
--extension-page	popup	Entry/entries name(s) for the extension page(s)
--no-page-reload		Disable auto-reloading of all pages running the plugin

Whenever content or background scripts are modified, the extension will reload.
Note: This plugin only works in development mode. Remember to set the NODE_ENV before running the commands above.

from https://github.com/SimplifyJobs/webpack-ext-reloader