Using the Findbar in Your Firefox Add-ons – Part 1/3

The Findbar Widget

This is the first post of a three part series that details my experiences with the findbar widget which is available in Firefox and also provides a bit of information on XBL and anonymous ids.

Firefox is my primary browser. Not because I love open source stuff (which I do) or that it is cross-platform (which I like) or that it is marketed as secure (no comment). But because of the tremendous power it provides to its add-ons. Some time ago I was experimenting with the findbar widget. The findbar widget is the same “find toolbar” introduced in the Firefox 1.0 preview release. I remember that I liked it at the first sight. To me, this was a good example of a non-intrusive user interface design philosophy that I prefer. The findbar widget was made available to Firefox add-ons starting from Firefox 3. Did you know that Firefox will open a quickfind bar if you type a single apostophe (‘) or a slash (/) and you can enable or disable it using the option accessibility.accesskeycausesactivation in about:config?

Available information on the findbar widget is sparse even today. The only page I could find easily is the one on the Mozilla website at https://developer.mozilla.org/En/XUL/Findbar.

Putting the findbar widget into a Firefox add-on turned out to be a really simple task. As simple as adding a findbar tag in the XUL file. For example, using a line like this.

<findbar id="FindToolbar"/>

It seems that the findbar widget only works with a browser widget and will automatically perform the search in the linked browser widget. So you also need to link the findbar to a browser widget. For example, if your browser widget has the id mybrowser, you can define the findbar as follows.

<findbar id="FindToolbar" browserid="mybrowser"/>

The browserid attribute only works when the findbar widget is being created. Changing the browserid later will not work. If you need to change the linked browser later, you need to use the browser property, using some Javascript code like:-

document.getElementById("FindToolbar").browser =
    document.getElementById("MyNewBrowser");

The iframe widget is another widget that is similar to the browser widget. The iframe widget can also display an html page inside it. My assumption is that the browser widget is a bit heavyweight than the iframe widget as the browser widget maintains the page history which may not always be necessary. Hence, the iframe widget can sometimes be a better lightweight option. I tried to use an iframe widget instead of the browser widget as browserid without much success. 🙁 So you need to stick with using a browser widget.

The findbar created like this will be hidden. In the next part, I will show you how to make the find bar visible properly and the problems that I faced and how I solved them.