A Webpack plugin to enable hot reloading while developing Chrome extensions.

Have your ever being annoyed while developing a Google Chrome extension, and being unable to use webpack-hot-server because it's not a web app but a browser extension?

Well, now you can do hot reloading!

Basically something similar to what the webpack hot reload middleware does. When you change the code and the webpack trigger and finish the compilation, your extension is notified and then reloaded using the chrome.runtime API. Check out Hot reloading Chrome extensions using Webpack for more background.

Add webpack-chrome-extension-reloader to the plugins section of your webpack configuration file.

const ChromeExtensionReloader  = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

You can also set some options (the following are the default ones):

entry: {
    'content-script': './my-content-script.js',
    background: './my-background-script.js'
},
//...
plugins: [
    new ChromeExtensionReloader({
      port: 9090, // Which port use to create the server
      reloadPage: true, // Force the reload of the page also
      entries: { //The entries used for the content/background scripts
        contentScript: 'content-script', //Use the entry names, not the file name or the path
        background: 'background'
      }
    })
]

And then just run your application with Webpack in watch mode:

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

If you don't want all the plugin setup, you can just use the client that comes with the package:

wcer

If you run directly, it will use the default configurations, but if you want to customize you can call it with the following options:

wcer --config wb.config.js --port 9080 --no-page-reload content-script my-content.js --background bg.js 

Every time webpack triggers a compilation, the extension reloader are going to do the hot reload :)
Note: the plugin only works on development mode, so don't forget to set the NODE_ENV before run the command above

Please before opening any issue or pull request check the contribution guide.

Inside this repository have an example plugin, so you can test and see it working After clone the repo, run:

yarn build

And then run:

yarn sample

This will make the webpack run in watch mode for the sample plugin source and output the built files on the "dist" directory. Load the extension (the files in "sample/dist" directory) in Chrome using the "load unpacked extension", open a new tab in any site and open the developer panel on it. Watch the dev. tools console tab, and do some changes on the background or content script. Voila!

Note: You must have both background and content scripts for this plugin to work, and they must be specified in separate entry chunks in your webpack config.

The reloading script will be injected only on the main entries chunks (in background and content script). Any other chunks will be ignored.

This project is under the MIT LICENSE