custom-search-plugin-hd
If you haven’t noticed, I recently added an Es Developed search plugin to the site.

Now you can search all the web and graphic design posts on the Es Developed Blog right from your search bar in Firefox and Internet Explorer 7+.

We’re going to learn how to create your own custom OpenSearch search engine plugin for your site.

The search plugin will work in both Firefox 2+ (including Firefox 3) and Internet Explorer 7+ (including IE8).

OpenSearch and Your Site or Blog

OpenSearch is a collection of simple formats for the sharing of search results, created by A9.com.

In the context of your browser’s search bar you can use OpenSearch to help visitors find information on your site or blog even when they’re not currently at your website.

An OpenSearch plugin will work in both Firefox and Internet Explorer 7+.

Online Search Plugin Generator

mycroft-screenOne of the simplest and fastest ways to create your own search plugin is to use MozDev.org’s Mycroft Project Search Plugin Generation Tool.

The tool is a relatively short form you fill out and it does all the heavy lifting for you.

You supply:

  • Icon for use in the search bar of the browser (can be your site’s favicon)
  • Your details (used to register the plugin to you in the Mycroft database)
  • Plugin name and description
  • Search URL
  • Category (where to place your generated plugin on the Mycroft database), plugin language, etc

It’s a good idea to tick the ‘Show full instructions?‘ box at the top of the form. This explains the type information to place into each field. Most of what you need is explained.

If you need more information about what to put in each field, take a look at Creating OpenSearch Plugins in Firefox.

The code for the search plugin is generated. You can either copy and paste the code into a blank XML file on your computer (recommended), or you can just install it in Firefox and test it first.

Once you’re sure it works, you can submit it to the Mozilla/Mycroft search plugin database using the same form.

Linking the Search Plugin

Now that you have the search plugin generated, you will want to provide a link to it in your website.

The easiest way is to copy the generated code from the Mycroft Search Plugin Generator and paste it into an XML file on your harddrive. Then upload the file to your site and link to it in your <head>:

<link type="application/opensearchdescription+xml" rel="search" title="searchTitle" href="pluginURL/fileName.xml" />

This line of code allows your custom search plugin to be autodiscovered by browsers that support OpenSearch. Be sure to change ’searchTitle’ and ‘pluginURL/fileName.xml’ to the actual values you want for your plugin.

Automatic Updates in Firefox 3.1+

Beginning with Firefox 3.1, OpenSearch plugins can be automatically updated. To support this, you need to add another line to the <head> section of your site as well:

<Url type="application/opensearchdescription+xml" rel="self" template="pluginURL/fileName.xml" />

Notice also the ‘rel=”self”‘. Be sure to change ‘pluginURL/fileName.xml’ to the actual URL of your plugin.

More info about automatic search plugin updates can be found here:

Mozilla Developer Center (Creating OpenSearch Plugins For Firefox)

Works in Firefox and IE

Even though you’re going through all the steps here using Mozilla’s site, the resulting search bar plugin is in OpenSearch format, so Internet Explorer 7 and 8 can use it as well.

See the Plugin in Action

add-search-bar-screen

If you’re using Firefox or IE 7+, you can see the search plugin that I made for this site in action.

Click on the dropdown on your browser’s search bar and select Add “Es Developed Blog”.

Add the Es Developed Blog Search plugin and give it a try.

You can search through our collection of web and graphic design:

  • Tutorials
  • Articles
  • Online tool and services recommendations, and
  • Design inspiration and resources

Similar Posts:

  • Share/Bookmark