How to install search plugin together with your extension

A lot of modern sites has own search system. Such system usually performs search on a site and provide search result to a user in accordance with his request.

If you are working on some extension for such site, you can also create and install search plugin for the site.

There are two search plugin formats supported by Firefox:
MozSearch and OpenSearch. Hope that above links will help you to create necessary search plugin.

Then you need to distribute it with your extension. You should do two basic things:
1. Create searchplugins folder in the root of your extension.
2. Add your search plugin to this folder.

So, inside XPI your searchplugins folder will be located on the same level with chrome.manifest and install.rdf files.

There is also one small trick that can be used in your extension. You can select your installed search plugin as default search provider on the first run of your extension. To do that simply add two lines of code:

  var sb = document.getElementById("searchbar");
  sb.searchService.currentEngine = sb.searchService.getEngineByName("YourEngineName");

How to change size of image for toolbarbutton on the fly

Sometimes you need to use for toolbarbutton an image which is returned by some third-party service. And it's size can be much greater than you need:

<toolbarbutton id="my-btn-id" label="My Button" image="http://somesite.com/images/img.png"/>

In this case you need to add one line of code in CSS file:

#my-btn-id .toolbarbutton-icon {
  width: 16px;
  height: 16px;
} 

This simple trick will allow you to get toolbarbutton image with necessary size.

Header for richlistbox component

Using of header in listbox XUL control is quite common task. But there is no clear information about ability to use header in richlistbox control. I've found quite obvious but undocumented solution for this problem. The next short example will show how to add header to richlistbox control.

<richlistbox rows="10" flex="1">
    <listhead>
        <listheader label="My header" flex="1"/>
    </listhead>
    <richlistitem>
        <label value="Item1"/> 
    </richlistitem>
    <richlistitem>
        <label value="Item2"/> 
    </richlistitem>
</richlistbox>