Enhancing content with XBL

My first naïve attempt at attaching content to an arbitrary web page via XBL bindings was motivated by the Mikhail Paparita's example. This was long ago and at that time I asked myself and others why I failed to add further content by using the XBL content tag; after all it is supposed to serve exactly this purpose.

Today I found myself trying to enhance a select box with further options, a trivial task for a bookmarklet or for a Greasemonkey script, but I wanted to achieve this with a binding to a remotely served XBL file.

The select box is found in the Munich public library's catalogue search form, more precisely, on a subframe of this page.
The HTML code is quite straightforward. In red is the code I wanted to incorporate:

<select class="input" name="NNORRQ"  title="Trefferzahl">
             <option value="200">200</option>
             <option value="100">100</option>
             <option value="50"> 50</option>
             <option value="20" selected>20</option>
             <option value="10">10</option>
             <option value="5"> 5</option>
</select>

As I said before, my first try went along these lines:

<?xml version="1.0" encoding="ISO-8859-1"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml">
   <binding id="listsize">
           <content>
               <html:option value="200"> 200</html:option>
               <html:option value="100"> 100</html:option>
               <html:option value="50"> 50</html:option>
               <children/>
           </content> 
   </binding>
</bindings>

Result: the new options were there, but they were not selectable! Moreover, I could see the added content in the rendered page, but not in the HTML source code. My guess is that this is due to the new content being anonymous content, that is, it is ultimately rendered but nevertheless it is not accessible from the DOM API. And this leads me to think that this is the same reason why the new options are not selectable. In fact, if they were, they would be accessible from the DOM API.

In this scenario the approach of Paparita and others makes completely sense:

do not use xbl:content, use xbl:constructor instead

and the DOM methods to dynamically enhance the bound element. Remember that the constructor element lives inside an implementation, and that the code in the constructor is run at the time of the binding. Similarly there is a destructor which gets called upon releasing the binding. So the working solution is as follows:

<?xml version="1.0" encoding="ISO-8859-1"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="listsize">
  <implementation>
      <constructor>
          <![CDATA[
              var newOption = function(selElm, val){
                  var sel = document.createElement('OPTION');
                  sel.setAttribute('value', val);
                  sel.appendChild(document.createTextNode(val));
                  selElm.insertBefore(sel,selElm.firstChild);
              }
              newOption(this, '50');
              newOption(this, '100');
              newOption(this, '200');
          ]]>
      </constructor>
  </implementation>
</binding>
</bindings>

The CSS directive is simply:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("https://ssl.muenchen.de/EF/opac.html") {
select.input[name="NNORRQ"] {
    -moz-binding:url(http://esquifit.googlepages.com/listsize_2.xml#listsize);
}
}