@dumlj/crx-live-reload-webpack-plugin NPM

Crx Live Reload Webpack Plugin

Livereload over SSE for develop Chrome Extension.

BACKGROUND

Since Chrome extensions can only load local files, devServer hot reload does not work (only the browser can be reloaded or the scripts can be re-executed remotely). We need to use scripts to make it reload automatically, which contains the background and content-script modules.

FEATURE

Automatically inject reboot scripts.
Both background and content-script can use reboot capabilities.

INSTALL

# use npm
$ npm install --dev @dumlj/crx-live-reload-webpack-plugin
# use yarn
$ yarn add --dev @dumlj/crx-live-reload-webpack-plugin
# use pnpm
$ pnpm add @dumlj/crx-live-reload-webpack-plugin -D

USAGE

import { CrxLiveReloadWebpackPlugin } from '@dumlj/crx-live-reload-webpack-plugin'

export default {
  mode: 'development',
  entry: {
    background: path.join(__dirname, 'background.ts'),
    contentScript: path.join(__dirname, 'contentScript.ts'),
  },
  plugins: [
    ...new CrxLiveReloadWebpackPlugin({
      // enter devServer host and port
      // chrome extension can not mount files online.
      host: '127.0.0.1',
      port: 8080,
    }),
  ],
  devServer: {
    hot: true,
    // livereload can not reboot background.js, close it.
    liveReload: false,
    devMiddleware: {
      // as you know
      writeToDisk: true,
    },
  },
}