Update: there's a better way to do this
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 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 inspiring this post!)
Configuration
Prerequisites
You need to have the following software installed:
- Visual Studio Code
- Extensions Reloader
-
Google Chrome, Brave, Vivaldi, 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), andxdg-open http://reload.extensions(GNU/Linux) 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, which lets you add this to your settings.json:
Windows
"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
</span><span class="nl">"emeraldwalk.runonsave"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"commands"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"match"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/extension-project-folder/.*"</span><span class="p">,</span><span class="w">
</span><span class="nl">"cmd"</span><span class="p">:</span><span class="w"> </span><span class="s2">"open -a 'Google Chrome' http://reload.extensions"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
GNU/Linux
</span><span class="nl">"emeraldwalk.runonsave"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="nl">"commands"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="p">{</span><span class="w">
</span><span class="nl">"match"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/extension-project-folder/.*"</span><span class="p">,</span><span class="w">
</span><span class="nl">"cmd"</span><span class="p">:</span><span class="w"> </span><span class="s2">"google-chrome http://reload.extensions"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
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:
"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.
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
Top comments (5)
did some digging and found these solutions: stackoverflow.com/questions/296326...
one of the best ive found so far is: stackoverflow.com/a/31733718/8023318 the nice thing about this is it doesnt make chrome active by doing:
"cmd": "google-chrome http://reload.extensions"Hello @kinghat !
I just wanted to let you know that I tested the answer you linked by installing this extension, pulling this Gulpfile into my unpacked extension's directory, running
gulp chrome-watch, and making trivial edits to some metadata and JavaScript. As a result, the task detected the changes:However, when I got back to Chrome the updates hadn't been made, and I had to manually press the reload button anyway to get them to show up.
I think this is because Chrome doesn't reload extensions when the
chrome://extensionspage is reloaded by the "Chrome Unpacked Extension Auto Reload" tool, however that probably used to be the case.so im not using it that way. just using it to reload the extension when i save. or in the extensions case, files are changed. and it seems to be working fine.
there is this guy who was trying to fix it up but the extension author stopped replying. he has his own crx thats not been published. here is a history of the PR he was trying to make: github.com/robin-drexler/chrome-ex... you can follow his name to his GH and see his crx. though, im not using that one.
if you give that one a go, will you lmk if that one works better?
It works!
dev.to/sgvictorino/reloading-your-...
Unfortunately the add-on is not available for Firefox. And is not compatible with Firefox when installed manually.