There's a really cool Chrome extension I commented about here on DEV called "Reload Extensions", and it's saved me from an extension loading bug (in addition to the general inconvenience of reloading unpacked extensions):

Solomon • Feb 23 '19

Yep! Especially when the extension icons don't update after I enable/load an extension (which I think is unintended behavior), I just go to reload.extensions and everything works as intended!

But it can get even more convenient for us aspiring extension developers:

kinghat • Feb 23 '19

are you using the extensions reloader url to automate the reloading?

(kudos to @kinghat for aiding in the research of this post!)

Requirements

Let's go back to the basics!

You need to have the following software installed:

• git
• a text editor
• Google Chrome, Brave, Vivaldi, or any browser that supports the installation of Chrome extensions.

Instructions

The Extension

Run the following commands in your terminal to build a copy of Jerome Dane's chrome.management API-based fork of the extension source code:

git clone https://github.com/JeromeDane/chrome-extension-auto-reload
cd chrome-extension-auto-reload
npm install
npm audit fix
npm run build

Now, load the contents of chrome-extension-auto-reload/build/ into Chrome as an unpacked extension and configure it like so:

• Navigate to chrome://extensions using the address bar.
• Toggle on "Developer Mode" in the top right corner if you haven't already.
• Click on "Load Unpacked" and browse to the build directory we generated earlier.
• Click the "Details" button seen in Figure 1. Figure 1: the extension card with the "Details" button.
• Scroll to the "Extension options" link and click on it.
• At the top of the page, change the "reload method" dropdown to equal "Manage API". This allows it to work with all extension scripts on the latest version of Chrome.

Your Project

Navigate to your extension project's directory, create a new file called gulpfile.js, and paste the following contents into it:

var gulp = require("gulp");
var watch = require("gulp-watch");
var io = require("socket.io");

gulp.task("chrome-watch", function() {
  var WEB_SOCKET_PORT = 8890;
  io = io.listen(WEB_SOCKET_PORT);
  watch("**/*.*", function(file) {
    io.emit("file.change", {});
  });
});

Install the Gulpfile's dependencies into your extension project like so: npm install gulp gulp-watch socket.io --save-dev. Assuming it isn't a Node project yet, you'll need to run npm init and fill out the metadata to be placed into package.json first.

Run npx gulp chrome-watch and enjoy!

Thanks for reading!

If you gained some knowledge from this post, please smash that ❤️ button an odd number of times.

Sources

• https://github.com/JeromeDane/chrome-extension-auto-reload
• Conversations with @kinghat regarding my previous post on this topic.