DEV Community


Posted on • Updated on • Originally published at


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):

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:

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

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


Let's go back to the basics!

You need to have the following software installed:


The Extension

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

git clone
cd chrome-extension-auto-reload
npm install
npm audit fix
npm run build
Enter fullscreen mode Exit fullscreen mode

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 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("");

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

Install the Gulpfile's dependencies into your extension project like so: npm install gulp gulp-watch --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.


Top comments (5)

kinghat profile image

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

solomon profile image


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 profile image
kinghat • Edited

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.

Thread Thread
solomon profile image

Maybe you're on an older version of Chrome?

Thread Thread
kinghat profile image

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

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!