Monday, July 10, 2006

Firefox: Create your own search plugin

Firefox comes bundled with a small search box where you can type in any query and you'll instantly search using the selected engine. There are several engines already in the list: Google, Yahoo, Answers.com... but what if your favourite site isn't listed there or isn't available through the Mozilla addons site?

That's where this trick comes in handy. You can easily add whatever search engine you wish to that list by following a few steps.

The Engine
First, find a site that you commonly execute a search on and then perform a test search with their engine. Some sites are easier to create plugins from than others, but for demonstration purposes, I've chosen the CBC website at http://www.cbc.ca. The format of their search queries is really long, but you'll be ready in case you find something more challenging.

Once I've typed in my term in their search box (I'm using "TEST" this time), and pressed Enter, I arrive at the results page with the address bar of my browser showing this:
http://search.cbc.ca/search?ie=&site=CBC&output=xml_no_dtd&
client=CBC&lr=&getfields=description&proxystylesheet=CBC&oe=&
amp;searchWeb=cbc&q=TEST
Ouch! In this case, the action parameter should be http://search.cbc.ca/search (everything before the question mark), but not in this case (see below). The only parameter you're truly worried about is q, which is clearly set as "TEST". All of the other parameters do serve a function, but let's shove them aside for the moment.

<search> tag
Search plugins rely on a source file (plain text). They are described by a tag that has the following attributes:
  • version - Describes the plug-in version, although for some strange reason it is set to the current Netscape release, which is now "7.1".
  • name - The name of your search plug-in
  • description - A simple description
  • method - The search method used, which is always "GET"
  • action - The URL of the search site. Usually, this is everything before the "?" in the test search, but some websites will go nuts when you try to execute a no term search, including CBC.ca. If you know an alternate search URL, use that instead, as I have in the text below.
Now that we have some information, we can start to create the markup that will form the basis of the plugin functionality. First, open a text editor and enter the following tag, which is based on what we've gathered so far.

<search
version="7.1"
name="CBC News"
description="Search CBC.ca"
method="GET"
action="http://www.cbc.ca/search"
>
</search>

Add the content
Now that we have our foot in the door, we can add some data to our search element. Each query has various parameters that we have to consider. The CBC search happens to have a ton of them, each separated with an ampersand (&). These constitute the "meat" of our plug-in and follow this format:
<input name="" value="">
Easy enough, right? For that special parameter that holds our search term, you have to replace the value attribute with the user attribute:
<input name="" user="">
Great, now we have the information we need to complete our plug-in. Fill in the details of the tag, like so:

<search
version="7.1"
name="CBC News"
description="Search CBC.ca"
method="GET"
action="http://www.cbc.ca/search"
>

<input name="ie" value="">
<input name="site" value="CBC">
<input name="output" value="xml_no_dtd">
<input name="client" value="CBC">
<input name="lr" value="">
<input name="getfields" value="description">
<input name="proxystylesheet" value="CBC">
<input name="oe" value="">
<input name="searchWeb" value="cbc">
<input name="q" user="">
<input name="sourceid" value="Mozilla-search">

</search>

You may be wondering what that tag at the bottom does. Well, it's there to inform the website admins that you're performing a search using your plug-in. Simple enough.

Save your text file in <firefoxpath>/searchplugins (commonly C:\Program Files\Mozilla Firefox\searchplugins) with any name and the extension .src.

Favourites Icon
Your plug-in will work if you restart Firefox, but we're not quite finished. Currently, there's no icon associated with your search, so it won't stand out if you make several of them. One trick to snag the icon is to go to the search site in question, and point to the favicon.ico icon. For CBC, it's at http://www.cbc.ca/favicon.ico. Download this file and convert it to .gif or .png, then save the new image in the searchplugins folder under the same name as your .src file. Now you have an icon for your search!

For more information about search plug-ins, consult the Mycroft Project.

0 Comments:

Post a Comment

<< Home