Listen to image load in Add-On SDK

Question

Is it possible to listen to the loading of images (or stylesheets) via the Mozilla Add-On SDK?

Having the user load a new URL can be found via the Page-Mod module, AJAX calls via overriding XMLHttpRequest.prototype.*().

Yet both only listen to loading of entirely new pages, not to the attached images of a page. Also, the image source might be changed for example in Javascript.

(It might be possible to use a http-on-modify-request, as pointed to here, but how can you access the nsIHttpChannel's URL and parameters?)

Answer 1

You can listen to every network request via

var {Cc, Ci} = require("chrome");
var httpRequestObserver = {
    observe: function(subject, topic, data) {
        if (topic == "http-on-modify-request") {
            var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
            var myURL = httpChannel.URI.spec;
            console.log("url: " + myURL);
        }
    },

    register: function() {
        var observerService = Cc["@mozilla.org/observer-service;1"]
            .getService(Ci.nsIObserverService);
        observerService.addObserver(this, "http-on-modify-request", false);
    },

    unregister: function() {
        var observerService = Cc["@mozilla.org/observer-service;1"]
            .getService(Ci.nsIObserverService);
        observerService.removeObserver(this, "http-on-modify-request");
    }
};

httpRequestObserver.register();

exports.onUnload = function(reason) {
    httpRequestObserver.unregister();
};

See also Firefox Addon observer http-on-modify-request not working properly.

URI access

The nsIHttpChannel extends nsIChannel, which has a URI Attribute of type nsIURI, which has a spec attribute that contains the whole URL (including schema, parameters, ref, etc).