JSPM

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

Run your extension on Google Chrome with auto-reload support

Package Exports

  • webpack-run-chrome-extension
  • webpack-run-chrome-extension/dist/module.js

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 browser extension on Chrome with zero-config auto-reload support

Opens up a new Chrome instance with an extension loaded. Resources declared in manifest.json are auto-reloaded by default, including JavaScript and CSS declared in Manifest HTML pages. This plugin accepts all flags Chrome does (see browserFlags) and loads on a clean profile by default.

Highlights

  • Zero-config auto-reload for virtually everything including all HTML overrides, and every resource you plan to require via <script> and <link> in manifest declared HTML pages.
  • 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 --save-dev

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 8081

License

MIT (c) Cezar Augusto.