Extension-hmr-reload-plugin

What is it

This is a hot module replacement (HMR) Webpack plugin for developing browser extensions (Chrome/Edge/Firefox). With the advent of AI and modern browser functionalities, AI-based browser extension applications are emerging. If you are interested in browser extension development and Webpack, this might help you.

Features

• Auto-reload of background and content-script in development mode, eliminating the need to manually reload the extension frequently.
• Uses webextension-polyfill for compatibility across different browsers.
• Friendly TypeScript type hints.

Which env is available

Webpack 5 and scaffolds based on Webpack 5. If your project uses Webpack 4.

Why was it created

When developing browser extensions locally, due to the nature of local installation and debugging and browser restrictions, background and content-script do not automatically update, even if the local files have indeed been updated. This requires developers to manually refresh the extension files (background) and the web page (content-script) in the browser. This plugin provides the capability to automatically reload the extension and refresh the related web pages.

How to use

In Webpack:

const { HmrReloadPlugin } = require("extension-hmr-reload-plugin")
module.exports = {
    ...
    plugins: [
        ...
        new HmrReloadPlugin(),
    ]
}

Plugin Options

port

The port for the plugin server, default is 4001.

injections

An array of filenames that need to inject the hot reload script. Check the filenames in your output directory, for example:

# your outputdir
output 
	- background.js
	- background.xxx.js
	- content
		- content-script.js
	- sidepanel.js
	- ...

You can fill in the configuration like this, the filenames will be matched based on inclusion, corresponding to background reload and webpage refresh:

new HmrReloadPlugin({
  injections: {
    reload: ['background.js'],
    refresh: ['content-script'],
  },
}),

listenDir

string

The directory to watch for file changes. When you change a file and save it, it will first trigger compilation and then trigger the plugin hook. The default value is the same-level path of the configuration file ./.

reloadDir

string[]

The directories to trigger reload after file changes. The default value is ['background', 'content']. Adjust it according to your project structure. Here is an example project structure:

# your project
src
	- background
		- ...
webpack.config.js

Example configuration:

// plugin options
new HmrReloadPlugin({
  injections: {
    reload: ['background.js'],
    refresh: ['content-script.js'],
  },
  listenDir: path.resolve('./src'),
  reloadDir: ['background', 'content']
})

// your project
output
	- background.js
	- content-script.js
	- sidepanel.js
	- ...
src
	- background
		- main.js
	- content
		- main.js
	- sidepanel
		- ...
webpack.config.js

How it works

1. Starts a local WebSocket server.
2. Starts chokidar listener and reads the reloadDir configuration.
3. Reads the injections configuration, calls Webpack hooks to inject code, triggers hooks to push messages to the client after the compilation, and reloads the extension background and webpage if the changed files match the reloadDir configuration.

Contribute

The author's energy is limited and has only implemented the Webpack 5 plugin. If you are using other tools like Vite or want to adapt it to Webpack 3/4, feel free to contact the author and contribute your open-source power.

Github Link

https://github.com/GITfsj/ExtensionHmrReloadPlugin/blob/main/README.md

npm install
npm run build

NPM Link

You can directly install to use through NPM

https://www.npmjs.com/package/extension-hmr-reload-plugin?activeTab=readme

npm install --save-dev extension-hmr-reload-plugin