JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 100
  • Score
    100M100P100Q91015F
  • License MIT

Run and build your extension on Chrome with auto-reload support

Package Exports

  • webpack-run-chrome-extension

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 (webpack-run-chrome-extension) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpack-run-chrome-extension workflow npm

Run your extension on Chrome with auto-reload support

Opens up a new Chrome browser window with an extension loaded. This plugin accepts all flags Chrome does (see browserFlags) and loads on a clean profile by default. The browser loads the extension pragmatically in developer mode with live-reload support for JavaScript changes.

Highlights

  • Zero-config auto-reload. (customizable)
  • Fresh profile with developer mode enabled by default on every run. (customizable)
  • Opens the handy "chrome://extensions" by default for fast debugging.
  • Uses the system browser instead of fully downloading Chrome (!!). (accepts Canary builds)
  • Closing the webpack process instantly kills all child processes. No extra steps to open/close Chrome.
  • Supports virtually all Chrome flags.

See it in action

git clone git@github.com:cezaraugusto/webpack-run-chrome-extension.git
cd webpack-run-chrome-extension && yarn install
yarn demo

npm start

Usage

yarn add webpack-run-chrome-extension -D

If you want to watch for file changes in your extension, watch mode must be enabled.

// webpack config file
+ const RunChromeExtension = require('webpack-run-chrome-extension')

module.exports {
+  watch: true,
  plugins: [
+   new RunChromeExtension({
+     extensionPath: 'path/to/extension'
+   })
  ]
}

Lazy sample

const RunChromeExtension = require('webpack-run-chrome-extension')

new RunChromeExtension({
  extensionPath: 'path/to/extension/dir', // Only required field
  browserFlags: [
    '--enable-experimental-extension-apis',
    '--embedded-extension-options'
  ],
  userDataDir: 'path/to/user/data/dir',
  startingUrl: 'https://example.com',
  autoReload: true,
  port: 8081
})

API

new RunChromeExtension(options)

Options

extensionPath (required)

Type: string

Path to your extension. Must point to the same directory as the manifest file.

browserFlags (optional)

Type: Array<string>

Additional flags to pass to Chrome. Defaults to these flags.

For a full list of available flags, see https://peter.sh/experiments/chromium-command-line-switches/.

userDataDir (optional)

Type: string | boolean

What Chrome profile path to use. A boolean value of false sets the profile to the default user profile. Defaults to a fresh Chrome profile.

startingUrl (optional)

Type: string

What URL to start the browser with. Defaults to about:blank

autoReload (optional)

Type: boolean

Whether to enable auto-reload on save. Defaults to true

port (optional)

Type: number

What port should run the extension reloader. Defaults to 8080

License

MIT (c) Cezar Augusto.