Adding a Search Engine to the Mozilla Firefox Searchbar (MozSearch Plugin)

This will take you step by step through creating a custom entry on the Firefox Searchbar. A popular reason for doing this is if you have an Intranet with a search engine. As it allows you to then search your intranet as simply as it would using Google, or another Internet search engine. One of the first searchbar add-ons that I created was for the Internal employee directory at work.

This is designed to work with Firefox 2 and later. I’ve tested it using Firefox 2 (Beta 1) and Firefox 3 (Minefield – based on a nightly build). Earlier versions used a different file format (although I’m not sure if any of the later 1.x series included forwards compatibility, the Firefox 2 browser does include backwards compatibility if you want to just copy your old search bar extensions across).

If you are running an older version of Firefox see Firefox 2 beta – review and download information.

The example that I am going to use is adding the search feature from the Blog on my www.watkissonline.co.uk web site.

Gathering Search Information Needed

Before we create the xml file needed we should first find the information we need from the website.
We need to know how the search form works. Normally this will use a http get request, which is the easiest to work with as it shows up in the url. If the search form uses a post then you will need to examine the page html to see what parameters are past. The following assumes that the sites uses a get request.

Go to the website In this case https://watkissonline.co.uk/index.php and enter a search string into the search form. I will search for the word “test”.
In this case I get sent to the page: https://watkissonline.co.uk/index.php?s=test
Looking at the url provided we can see the page that is called “https://watkissonline.co.uk/index.php“, and the parameters sent to that page “s=test“. The question mark ‘?’ is just a separator between the page address and the options. This is the information we will need when we create our xml form. This is the most straight forward type of search with only one parameter. It is possible to handle some more complex searches, but I’m keeping it as simple as possible.

If the website has a favicon.ico file, then you need to know the address of that, which is the website address followed by favicon.ico. In this case http://www.watkissonline.co.uk/favicon.ico

If the site does not have a favicon (ie. doesn’t show an icon on the url bar), or if you want a different icon (e.g. if you have multiple search engines with the same icon), then you can create your own. Just create an image that is 16×16 pixels in size,and save it as a png file (other formats are supported). The GIMP is a good graphics editor that could be used to create an alternative icon.

The searchbar xml configuration file

The configuration goes into a single xml file. I have called it watkissblog.xml
Full details of how to create this file are available MozSearch plugins at Mozilla developers.

The line numbering is included for reference only. There will be no line numbers in the actual xml file.

1. <searchplugin xmlns=”http://www.mozilla.org/2006/browser/search/”> </searchplugin>
2. <shortname>Stewart’s Blog</shortname>
3. <description>Search the Blog of Stewart Watkiss</description>
4. <inputencoding>UTF-8</inputencoding>
5. <image width=”16″ height=”16″>** Image goes here **</image>
6. <url type=”text/html” method=”GET” template=”https://watkissonline.co.uk/index.php”> </url>
7.   <param name=”s” value=”{searchTerms}”/>
8. <searchform>https://watkissonline.co.uk/index.php</searchform>

Line 1 identifies this as a mozilla search plugin.
Line 2 gives the name of the search engine (this will be displayed in numerous places including in the search bar)
Line 3 gives a description
Live 4 sets the input encoding (for English sites then UTF-8 will be fine, but if you use Non-Latin characters then you may need to select an appropriate value
Line 5 is the image. Note I have not included the image encoding as it is a very long value, but the ** image goes here ** text should be replaced as described later
Line 6 is the page that will serve up the search results (ie. https://watkissonline.co.uk/index.php).
Line 7 lists the search parameters. In this case ‘s’ indicates this is the search parameter and {searchTerms} is whatever is entered in the searchbar.
Line 8 details the which has the search function on it, which allows the user to go direct to the search button (by searching without a value in it)

We now just need to add the image. If you cannot natively translate an image file into base64 encoded text, then you will probably want to use the page at: The data: URI kitchen. Tick the base64 box, and then enter the address of the favicon.ico file into the URI file, or use the browse button to find your local image. Clicking on generate will then give you the encoded image on the URL. Copy the whole entry replacing the ** image goes here ** text. Then save the file.

Installing the new search bar plug-in

To install copy your new xml file into your browsers plugin directory. On Linux it may be /usr/lib/mozilla-firefox/searchplugins, on Windows C:\Program Files\Firefox\searchplugins (although either of these may include the version number or a slightly different name). If you then restart the browser the searchbar plugin will have been installed.

Making the searchbar plug-in available to visitors of your web site

You can make the plugin available by adding the following entry to the HEAD section of your html.


<link rel="search" type="application/opensearchdescription+xml" title="Stewart's Blog" href="http://www.watkissonline.co.uk/software/watkissblog.xml" />


If a visitor then clicks on the pull down menu in the search bar they will be given an option to add your site.

Alternatively the following javascript could be used to add the engine:

<script type="text/javascript">
function addEngine()
{
 if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")) {
  window.sidebar.addSearchEngine(
"http://www.watkissonline.co.uk/software/watkissblog.xml", "", "Stewart Blog", 0);
 } else {
  alert("Sorry, you need a Mozilla-based browser to install a search plugin.");
 }
}
</script>

Insert this in the head section of the page.

Normally you would have someone click on a link for this to happen. For example:

<a href="javascript:addEngine()">Add Search Engine</a>


Add Search Engine to Stewart’s Blog

I have included the javascript and the link into the Watkissonline Blog Pages