Question

I am new to Firefox add-on development and confused what type of browser objects/API is exposed to add-on code.
I have searched and read many tutorials, all of these do not answer my confusion.
for example i have some questions.

1. How can i access onload event of browser or when my add-on is initialized?
2. How can i access onload event of active tab/window when a page is loaded?
3. Can i use jQuery to access the DOM of any tab/window.

Please provide any good resorce which may be tutorial, api reference or any good book.

Answer 1

This should answer your first two questions: https://developer.mozilla.org/en/Code_snippets/On_page_load. The usual approach is to overlay the browser window with a trivial XUL overlay that will only load a script (or maybe two, jQuery as well). That script attaches a load event handler to the browser window – you shouldn’t do anything before the browser window finishes loading. In your load event listener you register a listener for DOMContentLoaded events in the browser meaning that you get notified whenever a page loads.

As to jQuery, the most “complicated” part is that other extensions also run in the context of the same browser window. So you cannot use jQuery the usual way – it registers the global variable $ which might conflict with variables of other extensions. Instead you encapsulate the functionality of your extension in an object with some unique name that relates to the name of your extension:

var myExtension = {
  $: jQuery.noConflict(true),
  init: function() {
    ..
  },
  onPageLoad: function(event) {
    var doc = event.originalTarget;
    var element = this.$("#foo", doc);
    ...
  }
}

window.addEventListener("load", function() { myExtension.init(); }, false);

Here I make jQuery’s $ function a property of your object rather than a global variable. You can later apply it on a particular document, simply specify that document as second parameter.