Event before 'load event' for Firefox extension?

Question

I'm writing a Firefox extension,

This is my XUL (no problem there)

<?xml version="1.0"  encoding="ISO-8859-1"?>
<!DOCTYPE overlay SYSTEM "chrome://locale/myDtd.dtd">
<page id="overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <script type="application/x-javascript" src="chrome://addon/content/test.js" />
</page>

And here is the problematic part of the Javascript test.js

window.addEventListener("load",
    function(event) {
        var appcontent = window.document.getElementById("appcontent");
        appcontent.addEventListener("load",onEventLoad,true);
    }, true);

The second 'load' listener on appcontent is too slow for my needs. The 'load' event is triggered when the DOM is done loading.

My question: Does anyone have an idea of how to run code as soon as a document starts loading (before the load event of the DOM) ? (wish a onBeforeLoad or onRequestStart event existed)

In Chrome extensions, we can use "run_at": "document_start" in 'manifest.json', and in Safari extensions, we can use 'Starting script' in extension builder but in Firefox ... I don't know how to do the same trick.

I need this to start looking at elements in the DOM as soon as they arrive (but that's another story).

I appreciate any help.

Answer 1

There's a good explanation here:

http://blog.webmynd.com/2011/04/04/equivalent-to-beforeload-event-for-firefox-extensions/

The suggested solution relies on Firefox Observers and http-on-modify-request:

Components.classes["@mozilla.org/observer-service;1"]
  .getService(Components.interfaces.nsIObserverService)
  .addObserver({
    observe: function(aSubject, aTopic, aData) {
      if ("http-on-modify-request" == aTopic) {
        var url = aSubject
          .QueryInterface(Components.interfaces.nsIHttpChannel)
          .originalURI.spec;
        if (url && url.match('facebook')) {
          aSubject.cancel(Components.results.NS_BINDING_SUCCEEDED);
        }
    }
  }
}, "http-on-modify-request", false);

Answer 2

Can you take var appcontent = window.document.getElementById("appcontent"); out of the eventlistener and do a setInterval until it actually sees that DOM element get populated?

init();

function init(){
    var intval = setInterval ( "checkForElement()", 200 );
}

function checkForElement(){
    if (document.getElementById('appcontent') != 'undefined'){
        clearInterval(intval);
        var appcontent = window.document.getElementById("appcontent");
        appcontent.addEventListener("load",onEventLoad,true);
    }
}

You might have to do some alert(document.getElementById('appcontent')); debugging to see if each browser treats a null element the same way.

Answer 3

Are you setting the src of your appcontent element as an attribute in the XUL source code? That makes things tricker, as XUL doesn't like you accessing elements while it's loading. What you could try is adding a derived XBL binding to the element, and defining a capturing event handler there. Or you might find that the DOMContentLoaded event is early enough. Otherwise I would suggest leaving the appcontent element blank and only loading it after you've added your load event handler in the main window's load event handler.