How to reload your unpacked Chrome extensions on-save from anywhere!

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.

Comments

[kinghat]

nice @sgvictorino ! i wonder if this version will work for me w/o gulp like the current one?

[Solomon]

Thanks!

Unfortunately, some piece of software needs to run and send messages to the reload extension. In the previous post, that software was a command running on save in VS Code that opened a URL (reload.extensions), and in this post, some sort of build system (Gulp in the example) watches for file changes and then sends a message to the extension's server (see this code) to trigger the reload.

You can use another build system, but that will require some customization from the post's Gulpfile.

[kinghat]

i was thinking that but im not sure why the original extension, not the @JeromeDane one, is working for me. i was using the run on save previously but i have that disabled and the reload extension extension disabled as well. 🤷‍♂️

looks like it was only half working. the background script wasnt being reloaded. my bad.

[Solomon]

Maybe you're on an older version of Chrome?

[kinghat]

nah im on stable: Version 72.0.3626.119 (Official Build) (64-bit). odd.