Custom Search Bar Plugins

Dec 23, 2006 in PHP, and Mozilla

Mozilla browsers like Firefox have a Search Bar in the upper right corner, making searching sites very convenient. Mozilla has many search engines available for installation on their Search Engines page.

The Search Engines

Below are installation links for the Search Bar for three search engines. The first is a function list search for the php.net documentation. Similarly, the second plugin is for the MySQL documentation found at mysql.com. Just for fun I also created a plugin to search this site. Yes, these plugins are available on mozdev.org, but I decided to create them myself out of a personal curiosity. Click the links below to install the plugins.

I haven't decided how much support I will give to these plugins in the future, but with me using them as much as I do already, chances are I'll be likely to update the plugins here as the respective sites change.

Create Custom Plugins

Creating a plugin for the Search Bar is simple. First, create a file called your_plugin_name.src. Paste the following code into this file.

<search
  version="1.0"
  name="[PLUGIN NAME]"
  description="[PLUGIN DESCRIPTION]"
  sourceTextEncoding="0"
  method="[SEARCH METHOD (GET/POST)]"
  action="[SEARCH URL]"
  queryCharset="UTF-8"
  searchForm="[SEARCH PAGE URL]"
  >
<input name="[INPUT NAME OF SEARCH FIELD]" user>
<input name="[OPTIONAL INPUT NAME]" value="[OPTIONAL INPUT VALUE]">
  <input name="sourceid" value="mozilla-search">
<interpret
  browserResultType="result"
  charset="UTF-8"
  language="en"
  resultListStart="<div id='results'></div>"
  resultListEnd="<hr/>"
  resultItemStart="<li style='padding-bottom: 1em'>"
  resultItemEnd="</li>"
  >
</search>
<browser
  alsomatch="[SEARCH PAGE URL]"
  update="[ABSOLUTE PATH OF .src FILE]"
  updateicon="[ABSOLUTE PATH OF IMAGE FILE]"
  updateCheckDays="7"
  >

All sections above marked with square brackets must be changed to fit the search plugin. For [ABSOLUTE PATH OF IMAGE FILE], as good practice I put the image file in the same directory as the .src file. This file can be a .gif, .png, or .ico file. Once both the .src and image files are uploaded to the same directory on your sever a link can be created to let others install the search plugin. The code for this installation link, borrowed from mozilla.com can be found below.

/* The JavaScript code */
function addEngine(name,ext,cat,type){
    if ((typeof window.sidebar == "object") && (typeof window.sidebar.addSearchEngine == "function")){
	        window.sidebar.addSearchEngine(
			            "[ABSOLUTE PATH TO THE PLUGIN DIRECTORY]"+name+".src",
						"[ABSOLUTE PATH TO THE PLUGIN DIRECTORY]"+name+"."+ext, name, cat
	        );
    } else {
	        alert("Sorry, you need a Mozilla-based browser to install a search plugin.");
    }
}
<!-- The XHTML code -->
<a href="javascript:addEngine('[.SRC FILENAME]','[IMAGE EXTENSION (MINUS THE .)]','Programming','0');">MySQL.com Search Engine</a>

In the XHTML code above, the assumption is that the .src and image files both have the same name. If the image file is a .ico file, [IMAGE EXTENSION (MINUS THE .)] should be ico.

D4Ly..com ©2006

Get in Touch

If you have any questions or comments, contacting me is simple.

  • AIM: jaSOn 7485
  • Xfire: d4ly
  • Gmail: jasondaly

Additionally, contact via email is always welcome.