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

2 minute read

There’s a really cool Chrome extension I commented on DEV about called “Reload Extensions”, and it’s saved me from an extension loading bug (in addition to the general inconvenience that is reloading unpacked extensions).

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

well i mean are you tying it into a save trigger by your code editor or something? id like to set that up somehow.

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

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 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) {
       console.log('change detected', file.relative);
       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!


That’s it!

Thanks for reading!

I haven’t tested this on every OS and browser, so please let me know if this functions for you by commenting on this article on dev.to.

Sources

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