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 Plugin

Feature

Watch for 'manifest.json's changes and generate the file.
Auto reload the chrome extension on changes while developing.
No pollution to the output while building for production.

How it works

This is a webpack plugin, thus webpack is required.

server side with 'webpack --watch' mode

Parse and modify the 'manifest.json' file
- if exists 'background.page': append a '<script type="text/javascript" src="auto-reload.js"></script>' at the end of 'background.page' HTML
- else: add a 'auto-reload.js' to the 'background.scripts'
Add a 'auto-reload.js' asset

client side

With the server side, we will definitely modify and generate 'manifest.json' every time webpack builds, thus we only need to watch this one single file and reload extension while it changed.

Cache the current 'manifest.json' file's 'lastModified' on load
Every 2 seconds, compare the cached 'lastModified' with the newest 'lastModified'(as 'thisModified')
Reload extension if 'lastModified' < 'thisModified'

Installation

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

Usage

Import and use the plugin at the plugins section of your webpack configuration file.

For example:

const path = require('path');
const CrxAutoReloadPlugin  = require('crx-auto-reload-plugin');

module.exports = {
//...
    plugins: [
      new CrxAutoReloadPlugin({
        manifestPath: path.join(__dirname, '..', 'src', 'manifest.json') // required
      })
    ]
//...
}

crx-auto-reload-plugin