crx-auto-reload-plugin

A webpack plugin to auto reload while developing chrome extension. 一个用于开发Chrome扩展时监视文件修改并自动重载的Webpack插件。

Usage no npm install needed!

<script type="module">
  import crxAutoReloadPlugin from 'https://cdn.skypack.dev/crx-auto-reload-plugin';
</script>

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().

Inspired By