Question

I’m trying to load and manipulate a hidden <browser /> tag in my overlay (part of my addon’s functionality) in my Firefox Addon. But, I can’t access any of the elements I add in my overlay from document.

For example, this isn’t working:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://foxy_bucks/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://foxy_bucks/locale/overlay.dtd">
<overlay id="foxy_bucks-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <browser id="bContainer" src="http://google.com/"></browser>
    <script type="text/javascript">
        window.addEventListener("load", function(){
            alert(document.bContainer.src);
        }, false);
    </script>
</overlay>

Could someone point me into the right direction?

Answer 1

Overlays always have to extend an existing element. If you have a tag at the top level of an overlay with an ID that doesn’t yet exist in the document then this element is simply ignored (<script> tags being a noteworthy exception from the rule). This happens in your case, the ID bContainer doesn’t exist in the document you are overlaying so your <browser> tag is simply ignored. This mechanism allows for example having content for the Firefox and SeaMonkey Tools menu in the same overlay – this menu has a different ID in Firefox and SeaMonkey so the section overlaying the SeaMonkey menu is simply ignored in Firefox and vice versa.

If you want to add an element to the document then you need to overlay its root element. For the Firefox browser window it would look like this (note that main-window is the ID of the root element):

<overlay id="foxy_bucks-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <window id="main-window">
    <browser id="bContainer" src="http://google.com/"></browser>
  </window>
  ...
</overlay>

A side-note: to access an element by its ID you need to use document.getElementById():

alert(document.getElementById("bContainer").src);