@bumble/reloader NPM

npm.io

`bumble-reloader`

An automatic reloader for Chrome extension development.

Getting started

First install this package in your project:

$ npm i bumble-reloader -D

Then initialize the extension reloader. You can read about how it works at the bottom of the page.

$ npx bumble-reloader --setup

The first time you run this, it will ask for the path to your extension folder. This is the folder that contains your extension's manifest.json file.

After you enter the extension path, bumble-reloader will create a reloader extension folder next to your extension.

The name of the folder will be your extension folder's name followed by _reloader.

This new folder is a Chrome extension for you to use during development. It is a copy of your extension that will automatically reload itself in Chrome during development.

Install this reloader extension in Chrome and complete the setup with bumble-reloader.

Don't exit the installer, you will need to come back after installing the reloader.

Copy the reloader extension id from chrome://extensions, and paste it into the terminal prompt.

Now you're set up! The installer will create the config file and update the reloader extension code.

You will probably want to add the reloader folder to your .gitignore.

During development

bumble-reloader

Just run bumble-reloader from the terminal when you want to start working.

It will watch your extension folder for changes, and update the reloader extension.

By default, bumble-reloader will show logs from your extension background page in the terminal.

How It Works

When you run npx bumble-reloader --setup, it will do three things:

create a reloader.config.yaml file next to your package.json.
create a reloader version of your extension next to your extension that uses Chrome native messaging to communicate with a watcher script.
create a "Native Host Messaging" manifest to tell Chrome to allow the extension to communicate with the watcher script.