Mobile Firefox (Fennec) add-on: executing code on page loads

Question

I am trying to write a mobile firefox plugin that executes a piece of javascript code automatically every time a page loads. I had written some code for an earlier version of Fennec, but with the multi-processing system in the newer Fennec version (https://wiki.mozilla.org/Mobile/Fennec/Extensions/Electrolysis/), this code had to be ported. I based myself on a tutorial from http://people.mozilla.com/~mfinkle/tutorials/ to get a version working that executes a piece of code whenever an option is selected in the browser menu. This solution consists of two parts, namely overlay.js (for the main (application) process) and content.js (for the child (content) process). Overlay.js is loaded in overlay.xul, while content.js is loaded for new tabs via the following code in overlay.js:

window.messageManager.loadFrameScript("chrome://coin/content/content.js", true);

The code in overlay.js sends a message to content.js whenever the option in the browser menu is clicked, and the required code is then correctly executed (some script tags are simply added to the head of the page). However, I don't know how to execute code automatically on a page load. I tried the following in content.js:

function addCoin(aMessage) { ... }

// this executes the desired code every time an option is clicked in the browser menu
addMessageListener("coin:addCoin", addCoin);

// this attempts to execute the code on every page load; i.e., after this script has     
been loaded for the new tab
addCoin(null);

The last statement however has no effect. Then, I tried adding the following statement at the end:

sendAsyncMessage("coin:scriptLoaded", { });

This statement sends a message to the overlay.js script, which registers a listener for this message and in response simply sends the same message as when the option in the browser menu is clicked, i.e., "coin:addCoin". However, this didn't work either. Finally, I tried looking for certain events the overlay.js script could listen for (something like "tabOpened" or something), but couldn't find anything.

Does anyone have any ideas on how to automatically execute code on every page load?

Regards,

William

score 3 · Accepted Answer · answered Jul 15 '11 at 05:24

3

In your content.js script you can simply register an event listener for the "load" event, just like you would have in the old single process Firefox:

addEventListener("load", someFunc, true);

This will call "someFunc" any time a webpage loads in the tab.

Any global code in content.js is executed when the tab is initial created, not when a page loads. Use global code to set up event listeners or message listeners. The web content will still fire events you can catch in the content.js (child script).

answered Jul 15 '11 at 05:24

Mark Finkle

966
4
5

Hello Mark, thanks for your swift reply (and for your tutorial! :). I had tried something similar in content.js after posting my question, trying addEventListener (with "load" and "DOMContentLoaded"), then prepending content, content.document, content.windowRoot, .. For some reason, it did not work without the "true" parameter (not sure why). So, it works now, thanks a lot! – William Van Woensel Jul 15 '11 at 08:44
content.addEventListener(...) works for some events, but the trick is setting the event listener when the "content" object is valid, and has not already fired the event you want to listen for. "content" is the web page's DOM window, so it is changed as new pages are loaded. Using the global object for addEventListener means the listener is always available and using "true" means the event is captured, even if it does not bubble on it's own. Not all DOM events require the "true", since they already bubble. – Mark Finkle Jul 15 '11 at 13:57
Ok, things are becoming more clear to me know :) Thanks again. – William Van Woensel Jul 15 '11 at 14:51

score 1 · Answer 2 · answered Jun 17 '13 at 15:18

This worked for me.

in content.js:

var addEventListener;

if (window.BrowserApp) { // We are running in Mobile Firefox
    addEventListener = window.BrowserApp.deck.addEventListener;
} else {
    var appcontent = document.getElementById("appcontent");
    if (appcontent) {
        addEventListener = appcontent.addEventListener;
    }
}

if (addEventListener) {

    var onDOMContentLoaded = function() { /* Code here */ };
    addEventListener("DOMContentLoaded", onDOMContentLoaded, true);

    var onLoad = function() { /* Code here */ };
    addEventListener("load", onLoad, true);

    // etc ...
}

Mobile Firefox (Fennec) add-on: executing code on page loads

2 Answers2