Last Updated: February 25, 2016
·
1.423K
· idered

Bind css refresh to custom key shortcut in chrome

I like LiveReload or SoFresh tools for reloading css but those tools doesn't always work or works bad with a lot of stylesheets attached. Here's a simple instruction how to bind custom shortcut to css reload function:

Download Shortcut Manager

In SM settings set custom shortcut.

"Action" set to "Execute JavaScript" and paste this code in the "(2)" field:

var links = document.getElementsByTagName("link");

for(var i = 0; i < links.length; i++) {
    var link = links[i];
    if(link.rel === "stylesheet")
        link.href = link.href.replace(/\.css.*/, '.css?reload=' + new Date().getTime());
}

Set custom description

That's all! I hope it will help you :)

Cheers!

Reload code is modified version from stackoverflow topic, thanks Claude for sharing non jQuery version.

2 Responses
Add your response

If you're doing this from an editor to a webpage, maybe have this triggered on a focus() event of the page in question?

over 1 year ago ·

If you don't want to install shortcut manager, you can also simply add it as a bookmarklet: http://ted.mielczarek.org/code/mozilla/bookmarklet.html

over 1 year ago ·