Question

I’m trying to manipulate the XUL elements in the Firefox add-on page using the Add-on SDK. I wouldn’t mind using lower-level modules. I used DOM inspector to see the structure for the add-on page. It looks like this for the add-on page:

#document
--page (id='addons-page', windowtype='Addons:Manager', etc.)
----...
----hbox
----hbox
----etc.

So I tried this bit of code in exports.main:

let delegate = {
  onTrack: function(window) {
    console.log('window is being tracked: ' + window); // outputs [object ChromeWindow

    let doc = window.document;
    var addOnPage = doc.getElementById('addons-page');
    console.log(window.document.page);  // outputs undefined
    console.log(addOnPage);             // outputs null

    var xulElements = window.document.getElementsByClassName('addon-control');

    console.log('our elements: ' + xulElements); // outputs [object HTMLCollection]
    console.log('our elements length: ' + xulElements.length); // outputs length of 0
  }
};
var tracker = new winUtils.WindowTracker(delegate);

The first problem is that the window tracker only open when Firefox is first started. How can I get it to listen and wait for the add-on page to be opened?

The second problem (probably related to the first) is that getting the elements doesn’t seem to be working (xulElements.length is 0).

Any ideas?

Answer 1

Two issues here:

1. Add-on Manager doesn’t usually open as a separate window so using WindowTracker is pointless. It is a page loaded into the browser.
2. You access the window before it has a chance to load to it isn’t surprising that you don’t see any elements.

Given that page-mod module doesn’t seem to work for this page, listening to the chrome-document-global-created notification is probably the best solution. This code works for me:

var observers = require("observer-service");
observers.add("chrome-document-global-created", function(wnd)
{
  if (wnd.location.href == "about:addons")
  {
    // Wait for the window to load before accessing it
    wnd.addEventListener("load", function()
    {
      console.log(wnd.document.getElementsByClassName('addon-control').length);
    }, false);
  }
});