Archive for the ‘ XML ’ Category

Building a custom browser search engine

We’ll start this blog by presenting a neat trick: how to create and embed a browser search engine (you know, the box you see in the top-right corner of your [Mozilla Firefox or Internet Explorer] browsers), to be used for searching in any website that has a search capability.

First, you should have a basic understanding of programming (as in “what is a tag”, “what is a variable”, a “token”… those kinds of things) to follow this article.

So, if that is the case, start by creating a new XML-type document (in any text editor you like, even Notepad, Wordpad will do), and add the following lines:

<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/” xmlns:moz=”http://www.mozilla.org/2006/browser/search/”>
<ShortName>Your Search Engine Short Name</ShortName>
<Description>Your search engine’s description…</Description>
<InputEncoding>utf-8</InputEncoding>
<Image width=”16″ height=”16″ type=”image/vnd.microsoft.icon”>http://my.searched-website.com/theWebsitesIcon.ico</Image>
<Url type=”text/html” method=”get” template=”http://my.searched-website.com/?search={searchTerms}” />
<moz:SearchForm>http://my.searched-website.com/?search</moz:SearchForm>
</OpenSearchDescription>

Now, for what it all means. You should start, obviously, with an XML declaration.

Then, the OpenSearchDescription tag is simply a definition of the XLS document’s purpose (for the application trying to use the XML document). It shouldn’t bother you too much… just keep it that way!

The ShortName tag is the text you will see in the search box, as you should see by default “Google” or “Yahoo”. Try to keep it short.

The Description… to be honest, I don’t know where you use or will see this text. But as long as it’s in the “specs”… let’s keep it (and add a meaning to it).

InputEncoding represents the encoding of your search’s characters. I’m assuming you’re using the default English ASCII characters, so… also, keep it as it is. If you want to search using any other type of characters (latin, slavic, etc.), set the encoding correspondingly (if you know it :P ).

The Image tag holds your search engine’s icon (that you’ll see in the search box, after setting your engine as the default). I recommend you use the searched website’s favicon image (if applicable), else… don’t set it. You will see a default no-icon symbol.

The Url is the most important tag. It transmits the search query itself to the website you’re actually searching on. It has to contain that website’s search path, and as the search parameter you will use the predefined {searchTerms} token. You may set here how that website’s handling the searches (by GET or POST methods).

The moz:SearchForm tag is a Mozilla-specific tag, and it sets the search page’s main URL, to which it submits your search criteria.

So, this are the basic knowledge you’ll need to set up a custom browser search engine. Next, in order to install it in a browser’s search box, you’ll need another thing: to have a web page where to declare it, and from where to install it.

For this, you just need to add a simple line of code in the <head> section of any web page:

<link rel=”search” type=”application/opensearchdescription+xml” title=”Search my website using this fancy custom browser search engine” href=”http://my.own-webpage.com/mySearchEngineFile.xml” />

Of course, you need to modify (in both my code samples above) the “funny” values with real, proper ones. Once you did all that… the sky is the limit! :P Now you can search through any website in just one or two clicks (depending if you set your custom search engine as the default one or not :D ).

For a real-life example, we built an IMDb search engine, so we could search easily for movies. To install it, just one the search engines icons (by pressing the currently selected one’s icon), and select “Add MySearchEngine’sTitle” (or “Add Search Providers” > “My Search Engine’s Title” – depending on your browser). Try it yourself, if it sounds good!

This is not the “limit” of what can be done with custom browser search engines. For complete and detailed specs on using the OpenSearch format, follow this link: http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document