Skip to content
A webpack plugin for hot-reload chrome extension in develop.
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
script
src
template
test/utils
.gitignore
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

crx-reload-webpack-plugin

A webpack plugin for hot-reload chrome extension in develop.

Why

Befor I develop chrome extension, I found I need a tool to reload extension and website when extension files changed. I found two projects: wcer and crx-reload.But they not good enough, cann't accord different file change to reload, and wcer no longer update after 2018.1. So, I wirte the plugin for better develop chrome extension.

What

crx-reload-webpack-plugin is a webpack4 plugin for reload extension and website when your extension files changed.

Features:

  • auto listen manifest.js file change and generate corresponding manifest.json.
  • reload different website accord different file change.
    • manifest.js: reload the extension.
    • content: reaload all tab.
    • popup: just reload the popup.html tab.
    • background: just reload background.html tab.
    • options: just reload options.html tab.
    • custom: you can appoint listen files and injected file.

How

Install

npm i -D crx-reload-webpack-plugin

Usage:

const CrxReloadPlugin = require('crx-reload-webpack-plugin')

module.exports = {
  ...: ...,
  plugins: [
    new CrxReloadPlugin({
      manifest: path.resolve(__dirname, './src/manifest.js'),
      port: 9999, // the server port in plugin, be used for notice chrome reload
      path: {
        background: path.resolve(__dirname, './src/background/')
      }
    })
  ],
  ...: ...
}

Options type:

  • manifest: string (required)

    This is manifest file absolute path. The js file need export a object like manifest.json.

  • port: number (optional)

    Default is 9999. This is the server's port in plugin. The server is used for notice chrome reload.

  • path: object (optional)

    • background: Array<string>
    • options: Array<string>
    • popup: Array<string>
    • content: Array<string>

    This object is a collection of absolute paths. Plugin will listen these paths. For example:

    paths: {
      background: ['work/testExtension/src/background.js'],
      options: ['work/testExtension/src/options/'],
      popup: ['work/testExtension/src/popup.js','work/testExtension/src/popup.html'],
      content: ['work/testExtension/src/options.js']
    }

    When paths.options inclued files change, the options html tab reload, other field same. Its value is a string array, can include file or folder.

    Is's default value is:

    const context = webpackConfig.context // such as /work/testExtension/src
    paths: {
      background: [path.resolve(context, 'background')], // ../src/background/*
      options: [path.resolve(context, 'options')], // ../src/options/*
      popup: [path.resolve(context, 'popup')], // ../src/popup/*
      content: [path.resolve(context, 'content')] // ../src/content/*
    }
  • extraPaths Array<object> (optional)

    • name: string, is a key and it cann't repeat.
    • inject: string, is a path that is a js files , will be injected.
    • listens: Array<string>, is a array of path string, when these file changed, reload injected js and its html.
  • logLevel string (optional)

    Default is error, it is plugin log level, you can set to info to get plugin work detail.

  • autoRetry bollean (optional)

    Default is false. When server (in plugin) was stop, this decide client (Chrome) whether auto reconnect. You can manually reload background.js tab.

Example

You can reference template/ and config/webpack.extension.js. This is a basic extension develop structure.

PS:

I recommand you open chrome-extension://xxxxxxxxx/_generated_background_page.html page to develop background.js.Otherwise, reload background will failure, because in devtool page(default) cann't get tab's id to reload.

You can’t perform that action at this time.