How to listen to page loads from Fennec extension?

Question

I'm working on a simple extension for Fennec, which must add special HTML element to every loaded page. I've created this simple overlay.js:

var MyAddon = {
    onLoad: function(aEvent){
        var appcontent = document.getElementById("appcontent"); // Firefox
        if (!appcontent) {
            appcontent = document.getElementById("browsers"); // Fennec
        }
        if (appcontent) {
            appcontent.addEventListener("DOMContentLoaded", MyAddon.onDocumentLoad, true);
        }
    },

    onUnLoad: function(aEvent){
        var appcontent = document.getElementById("appcontent"); // Firefox
        if (!appcontent) {
            appcontent = document.getElementById("browsers"); // Fennec
        }
        if (appcontent) {
            appcontent.removeEventListener("DOMContentLoaded", MyAddon.onDocumentLoad, true);
        }
    },

    onUIReady: function(aEvent){
    },

    onUIReadyDelayed: function(aEvent) {
    },

    onDocumentLoad: function(aEvent) {
    alert("OK");
    }
};

window.addEventListener("load", MyAddon.onLoad, false);
window.addEventListener("unload", MyAddon.onUnLoad, false);
window.addEventListener("UIReady", MyAddon.onUIReady, false);
window.addEventListener("UIReadyDelayed", MyAddon.onUIReadyDelayed, false);

The problem is that alert is shown only one time when browser is started, I'd expect it to show on every page that loads. What am I doing wrong?

Fennec version: 4.0b5 (testing on Desktop version for Windows)

Thanks!

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

Unfortunately, this is more complex for Fennec. There is no such event as "DOMContentLoaded" coming from the content document. This is because the main window, where your overlay attached the Javascript, lives in a different process than the child windows (content windows)

You have to:

load a script with each new tab:

browser.messageManager.loadFrameScript("chrome://my_add_on/content/content.js", true);
Inside content.js, listen to the event DOMContentLoaded:

addEventListener("DOMContentLoaded", process, true); function process(event) { ... }

For more info, check this pages:

How to listen to page loads from Fennec extension?

1 Answers1

Linked