HowTo: Searchprovider / Browserplugin for IE7 and Firefox – the OpenSearchDescription

Firefox (or Opera, Safari?) introduced a very handy feature: A little searchbox for all your favorite search engines. Microsoft added this in the Internet Explorer 7:

But how can I create my own plugin? The search provider should be installed with only one click.

The little search box and its provider relies on the "OpenSearchDescription" format.

I added a search provider for this blog – here is the XML:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Code-Inside International Blog</ShortName>
<Description>Blogging about .NET, ASP.NET, AJAX, Silverlight</Description>
<Image height="16" width="16" type="image/x-icon">http://code-inside.de/blog-in/wp-content/themes/notso_freshe/images/favicon.ico</Image>
<Url type="text/html" method="get" template="http://code-inside.de/blog-in/?s={searchTerms}"/>
</OpenSearchDescription>

The most important tag is the "Url"-Tag with the "searchTerm" template to create later such an URL: http://code-inside.de/blog-in/?s=AJAX

Add the search provider to you browser

You could use Javascript:

<a href="#" onclick='window.external.AddSearchProvider("http://code-inside.de/blog-in/browserplugin.xml");'>Code-Inside International Blog</a>

The javascript "AddSearchProvider" method invoke the browser to promt such an interface:

The browser get noticed about the "search plugin"

You can tell the clients browser that you offer an search plugin – just add this in the head section of your site:

<link rel="search" type="application/opensearchdescription+xml" href="http://code-inside.de/blog-in/browserplugin.xml" title="Code-Inside International Blog" />

You reference your XML file and (for example) the firefox "search provider icon" show us a glow effect: