Reloading your Chrome extensions on-save in VS Code!
Tags: chrome, extension, vscode, json
Published: 2019-02-24 00:24:04

---
title: Reloading your Chrome extensions on-save in VS Code!
published: true
description: 
tags: chrome, extension, vscode, json
---
*Update: [there's a better way to do this](https://dev.to/sgvictorino/reloading-your-unpacked-chrome-extensions-on-save-from-anywhere-884)*


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

# Configuration

## Prerequisites

You need to have the following software installed:
- [Visual Studio Code](https://code.visualstudio.com/Download)
- [Extensions Reloader](https://github.com/arikw/chrome-extensions-reloader)
- [Google Chrome](https://www.google.com/chrome), [Brave](brave.com), [Vivaldi](https://vivaldi.com), or any browser that supports the installation of Chrome extensions. The example command configurations are for Chrome, but `start http://reload.extensions` (Windows), `open http://reload.extensions` (Mac), and `xdg-open http://reload.extensions` ([GNU/Linux](https://en.wikipedia.org/wiki/GNU/Linux_naming_controversy)) can work with any of the aforementioned browsers, assuming they are your computer's default.

You can get this Visual Studio Code extension called [RunOnSave](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave), which lets you add this to your `settings.json`:

## Windows

```json
    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "\\\\extension-project-folder\\\\.*",
                "cmd": "start chrome http://reload.extensions"
            }
        ]
    }
```

Just make sure to replace "extension-project-folder" with the name of your project's folder.

The double escaping of the backslashes isn't required on Unix-like operating systems like Mac and GNU/Linux.

## macOS

```json
    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "/extension-project-folder/.*",
                "cmd": "open -a 'Google Chrome' http://reload.extensions"
            }
        ]
    }
```

## GNU/Linux

```json
    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": "/extension-project-folder/.*",
                "cmd": "google-chrome http://reload.extensions"
            }
        ]
    }
```

## Autosave configuration

(this step is optional but recommended)

For minimal interruptions, I recommend setting the save mode to auto save when the VS Code window loses focus in `settings.json`:

```json
"files.autoSave": "onWindowChange"
```

## That's it!

It's kind of annoying (because it focuses your browser every time you switch away from VS Code) unless you're only switching between Code and Chrome, in which case it works really well!

I haven't tested this on every OS and browser, so let me know if this functions for you in the comments below.

<hr/>

Thanks for reading!

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

# Sources

https://stackoverflow.com/a/32775952
https://stackoverflow.com/a/23039509
https://superuser.com/a/790678
https://askubuntu.com/a/19920
https://github.com/emeraldwalk/vscode-runonsave/blob/master/README.md