Chrome Extension Auto Reload Webpack Plugin

Feature

- Auto reload the chrome extension on changes while developing.
- Auto open up popup/options page in tab after plugin load/reload.
- No pollution to the output while building for production, only works with '--watch'.

Installation

``bash
npm install crx-auto-reload-plugin --save-dev
// or
yarn add crx-auto-reload-plugin --dev
`

Usage

Import and use the plugin in your webpack configuration file.

For example, in project created by vue-cli 3+:

`js
// vue.config.js
const CrxAutoReloadPlugin = require('crx-auto-reload-plugin');

module.exports = {
//...
configureWebpack: config => {
// ...
config.plugins.push(
new CrxAutoReloadPlugin(),
)
// ...
}
//...
}
`

Check these out, if you want a out-of-box vue-cli preset for chrome extension develop:

- MightyVincent/vue-cli-preset-crx - A vue-cli project preset for chrome extension
- MightyVincent/tidy-tabs - A chrome extension developed with this plugin

Options

`json5
{
interval: 2000, // watch interval
openPopup: true, // should open popup page after plugin load/reload
openOptions: false, // should open options page after plugin load/reload
}
``

How it works

$3

- Parse and modify the 'manifest.json' asset if exists to inject auto reload script.
- Always generate a 'auto-reload.js' asset in every build, for watching changes.

$3

- Watch for 'auto-reload.json' file's 'lastModified' change and auto call chrome.runtime.reload().

Inspired By

+ Webpack Chrome Extension Reloader by YuraDev
+ crx-hotreload by xpl