Package Exports

crx-auto-reload-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (crx-auto-reload-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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+:

// 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:

Options

{
    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

server side with 'webpack --watch' mode

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.

client side

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

crx-auto-reload-plugin