How to check for 403 and 404 errors when changing

Question

I am making a userscript for the TamperMonkey Chrome extension (it is the same than making a userscript for GreaseMonkey).

In my script, I am iterating over some document external resources (img, css, links, scripts) via document.getElementsByTagName() and I am changing their srcor href attributes to another url.

For the majority of cases, the new url is loading properly but in some cases, it ends on a 404 or 403 error from my proxy.

Could you give me some pointers about how to handle (if possible) properly the "resource cannot be loaded with the new url" ? Also, in the case where the asked resource result in a redirected url, can I be told that the resource was redirected (how to check for the 302) ?

I am using bare javascript for now, no jquery. But if jQuery can help me, I am willing to adopt it.

I considered about testing the headers from XMLHttpRequest result for every resource url, but it looks to me like using a artillery gun to kill a fly. I would rather use a proper handler that could be triggered just in case of unavailable resource.

Edit : alternatively, I would be ok if chrome would have a sort of status property for each loaded object that I could check...

Answer 1

I would check the document.styleSheets in javascript.

Here is a working jsfiddle for stylesheets:

http://jsfiddle.net/BQxBz/4/

var styleSheetExists = function(name) {
    for (var i in document.styleSheets) {
        if (typeof document.styleSheets[i] == "object") {
            link = document.styleSheets[i].href;
            if (link === null) {
                continue;
            }

            if (link.indexOf(name, link.length - name.length) !== -1) {
                return true;
            }
        }
    }
    return false;
}

$(document).ready(function() {
    console.log(styleSheetExists('jquery-ui.css'));
    console.log(styleSheetExists('doesnotexist.css'));
});

For javascript I would use object detection: thus see if a certain object that should be loaded by a certain script. For example to detect jQuery:

http://jsfiddle.net/TqQtE/

if (typeof jQuery == "undefined")
{
  // load jquery
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

Answer 2

It's just an idea, I'm not sure about the viability but it might be worth trying. Explaining in code:

var errorHandler = function(event) {
  // Do something if the script could not be loaded
};

var scripts = document.getElementsByTagName("script");
for(var i = 0, len = scripts.length; i < len; i++) {
  scripts[i].onerror = errorHandler;
  scripts[i].src = /* Some way to get your new src */;
}

I'm not sure if the onload, onerror handlers work when you change the src of an existing script tag.

Please report your findings. ;)

Answer 3

I considered about testing the headers from XMLHttpRequest result for every resource url, but it looks to me like using a artillery gun to kill a fly.

well... that's what i did, but our scripts have different purposes.

    function conectar(metodo, endereco, resposta, corpo) {
        callback = function(xhr) { resposta(xhr) };
        GM_xmlhttpRequest({
            "method"    : metodo,
            "url"       : endereco,
            "onerror"   : callback,
            "onload"    : callback,
            "headers"   : {'Content-Type' : 'application/x-www-form-urlencoded'},
            "data"      : corpo
        });
    }

and then

conectar('HEAD', linkkhref, resp)

check mine here: RandomProxyHeader