How to reload your unpacked Chrome extensions on-save from anywhere!
Tags: chrome, extension, gulp, javascript
Published: 2019-02-27 00:28:28

---
title: How to reload your unpacked Chrome extensions on-save from anywhere!
published: true
description: Upgrade your development environment with this extension and Gulp!
tags: chrome, extension, gulp, javascript
---

There's a really cool Chrome extension I [commented](https://dev.to/sgvictorino/comment/91dc) 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):

{% devcomment 92b9 %}

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

{% devcomment 92b7 %}

(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](https://git-scm.com)
- [a text editor](https://code.visualstudio.com/Download)
- [Google Chrome](https://www.google.com/chrome), [Brave](brave.com), [Vivaldi](https://vivaldi.com), or any browser that supports the installation of Chrome extensions.

# Instructions

## The Extension

Run the following commands in your [terminal](https://hyper.is) to build a copy of [Jerome Dane](https://github.com/JeromeDane)'s `chrome.management` API-based fork of the extension source code:
```shell
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](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](https://thepracticaldev.s3.amazonaws.com/i/22wzl66j3g06sy2hpdj2.png)
*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:
```js
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!

<hr/>

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](https://dev.to/kinghat) regarding my previous [post](https://blog.solomonvictorino.com/reload-chrome-extensions-on-save-vs-code/) on this topic.