Creating a Custom Firefox Search Plugin

I decided to make a Firefox Search Plugin for this site, mostly because I was wondering how hard would it be. Surprisingly enough, it is a really easy task. You should be able to create one without any experience in writing FF plugins. All you need is the ability to edit 3 or 4 lines of XML. A half retarded monkey could do it. But since I do not have any monkeys around, I’m just going to show it to you people.

Firefox keeps the search plugins in two different places. One is the global directory which holds common plugins for all users:

%PROGRAMFILES%\Mozilla Firefox\searchplugins
/usr/lib/firefox/searchplugins

The other location is your local user profile:

%APPDATA%\Mozilla\Firefox\Profiles\default.bae\searchplugins
~/.mozilla/firefox//searchplugins

By default when you install new search plugins, they go into the user directory. If you look inside you will find bunch of xml files inside. After a brief inspection of these files you can see that they have a very similar structure.

In fact, let me show you my own plugin here and then we can go over the changes you need to make to it to adopt it to your own site:

1. <SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
2. <ShortName>Terminally Incoherent</ShortName>
3. <Description>Terminally Incoherent Site Seatch</Description>
4. <InputEncoding>utf-8</InputEncoding>
5. <Image width="16" height="16"> data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUg </Image>
6. <SearchForm>http://terminally-incoherent.com/blog/</SearchForm>
7. <Url type="text/html" method="GET" template="http://terminally-incoherent.com/blog">
8. <Param name="s" value="{searchTerms}"/>
10. </Url>
11. </SearchPlugin>

Line 1 is just a standard boilerplate – leave it alone. Line 2 text will show up in the search box when it is not in use – so put your sites name here. Description is really nonessential, but feel free to add yours. Same goes for encoding – leave it UTF unless you need to use a different standard.

I clipped line 5 for size. The base64 encoded data was actually spanning over 10 lines, but it would be pointless to put it all here. This is line tells Firefox what icon to display on the search box. I used the default Terminally Incoherent icon:

You will want to embed your image in the xml file. How do you do it? It’s simple – you encode it in base 64. You can do it online using this nifty online converter written by Antonnin Foller. Or you can pick another one – there are dozens of them on the web.

You will end up with a long alphanumeric string representing your image. Just paste it in after:

data:image/x-icon;base64,

As long as you use a popular image encoding, and make sure the image is 16×16 you should be fine. My icon is really a PNG file, but I’m pretty sure a JPG or a GIF would work just as well.

Lines 6, 7 and 8 are crucial. This is where you tell Firefox where your search box lives. Make sure you provide proper URL and specify the name of the search box. For example on my site this is “s”. If you don’t know what your’s is look at the HTML source for your search form. If you can’t figure it out, you are to dumb to do this and I can’t help you. :mrgreen:

Perhaps this is not the best written search plugin with respect to the style, or formating but it works. If it strikes your fancy, you can go ahead and download the plugin below:

[Terminally Incoherent Search Plugin]

This should actually also work in IE7 since the code should conform to the OpenSearch standard. Unfortunately it doesn’t because the SearchForm and Param tags are not supported. Meh… Screw IE7.

I also added auto discovery on this website. You can do this too by adding this to your header:

<link rel="search" type="application/opensearchdescription+xml" title="Title of Your site" href="URL of your searchplugin">

This will make the search box icon glow blue when someone browses to your website, and give them an option to install it automatically.

[tags]firefox, firefox search plugin, search plugin, open search, search[/tags]