Tuesday, August 25, 2009

How to make a Firefox search plugin

For each of us,who extensively prowl the web for more information in a browser, the mozilla search bar is more than handy. Using it we can easily query a keyword, with probable-query drop-down list, getting the results in a new Tab. But many a times a time comes when we feel the necessity to go beyond the available list of search engines that come by default with Firefox. At that time,we normally have only 1 option - To find more search engine from Firefox search add-ons. But, this is useful only if you are lucky enough to get the required site engine as add-on. But, more than often , this is not the case.Apart from the most popular search engines,normally we don't find search engines for our sites. I came across a similar situation today when I wanted to add search add-on for the a Google code search site.

So, I had to make a custom plugin :) .

I googled for it and found that the following site gave a way to 'encapsulate the googling-of-site ' so to speak . I wanted more. So, I searched the plugin addition mechanism in Mozilla itself to get an idea of the format used. With this experience and some tweaking and hacking, I found the following steps gave me a working search add-on :

1. Open a new file in a text editor.

2. Add the following lines of code initially :
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/" os="http://a9.com/-/spec/opensearch/1.1/">
<os:shortname>Google Code</os:ShortName>
<os:description>Google Code Search Engine</os:Description>
<os:InputEncoding>UTF-8</os:InputEncoding>

- Here, the 1st line is sort of a way to show that the document conforms to the standards.It is same for almost any plugin.You can copy-paste it.
-
shortname is what appears in the toolbar drop down menu
- description is what it literally means - a short description. It is not very important.
- InputEncoding is what character-set is being used. Default value is UTF-8.


3. Thereafter an optional favicon can be added.The code for that is enclosed within these tags :

<os:Image width="16" height="16">
</os:Image>
4. After that add the URL for site of the search-engine :

<SearchForm>http://code.google.com/ </SearchForm>
5. Next is the most important Url field, in which the query pattern has to be specified.The common attributes are :
- method is either GET or POST . related to http request cycle. Use GET as default value as most sites support this method.
- type is the datatype that is being sent. Mostly it is text.
- template specifies the exact URL template that is sent to the search-engine to retrieve your query.
This can have many variations :
i. Normally, the queries are values supplied as values of form variables.e.g. for google scholar it would be
<os:Url type="text/html" method="GET" template="http://scholar.google.com/scholar">
<os:Param name="q" value="{searchTerms}"/>
ii. But,sometimes the query is very obscure and can be found only with proper documentation or with a lot of trial-and-error.e.g. The value for deeperweb search plugin the field would be

<os:Url type="text/html" method="GET" template="http://www.deeperweb.com/results.php?cx=!004415538554621685521%3Avgwa9iznfuo&cof=FORID%3A11%3BNB%3A1&ie=UTF-8&src=p2&q={searchTerms}">
</os:Url>
iii. For,the present example,the most suitable method was the following

<os:Url type="text/html" method="GET" template="http://code.google.com/search/#q={searchTerms}">
</os:Url>
Another common type of query involves a different query protocol called json and is of the following form :

<os:Url type="application/x-suggestions+json" method="GET" template="search query template">
</os:Url>

In all the above examples, the query that is supplied in the firefox search field goes to the
{searchTerms} part.

6. The plugin is completed with the following line :

</SearchPlugin>

..... & EurekA!

Some of the plugins I have developed are :

No comments: