webpack-chrome-extension-launcher

Chrome Extension Launcher

Jumptstart your Chrome extension development.

Why

Usually when developing a Chrome extension, you must first go to the chrome://extensions/ page, enable developer mode, load the unpacked extension, select its path, and finally open background page devtools.

This webpack plugin spares you all of those clicks. 💅

Get Started

Install Chrome Extension Launcher :

npm i -D webpack-chrome-extension-launcher
# or 
yarn add -D webpack-chrome-extension-launcher

Add to your Webpack config :

const ChromeExtensionLauncher = require('webpack-chrome-extension-launcher')
 
module.exports = {
  // your webpack config
  mode: 'development'
  //...
  
  plugins: [new ChromeExtensionLauncher()],
}

🚀 A dedicated Chrome instance loaded exclusively with your unpacked extension will launch once after initial compilation (no need to worry about watch mode), with the following perks :

• Developer mode enabled.
• chrome://extensions/ as homepage.
• Background page devtools opened on startup.
• Webpack process killed on Chrome instance exit.

Options

• autoDevtools: have Chrome devtools automatically opened in new tabs.
• launchURL: start Chrome with a custom URL.
• path: Chrome Extension Launcher looks for an unpacked extension in the output.path property of your webpack config, but you can specify your own path.

new ChromeExtensionLauncher({
  autoDevtools: true,
  launchURL: 'https://github.com',
  path: '/path/to/extension'
})

Production build

Chrome Extension Launcher is automatically disabled in mode: 'production'.

How about

Hot reloading

If you don't want to click on the reload button every time you make a change,
use together with Chrome Extension Reloader from Rubens Pinheiro.

Better logging

If you want to centralize all your logs in the background page,
use together with Web Extension Background Logger from me. 🙂