Firefox Search Plugin for Library Catalog

Add the Todd Library Online Catalog to your copy of Mozilla Firefox
Now you can add the Todd Library Catalog to your browser’s search box to quickly search for materials. To add the search functionaliy you first need to be running the Firefox web browser. Next you need to visit the library website, and look for the link “add the Todd Library Catalog” located under the large picture on the welcome pages. Once you clik the link you will be asked for permission to add the plugin to your browser. Click OK and the plugin will be installed. Now in the upper right corner of the firefox browser you can select the Todd Library Catalog any time you need to do a fast search of our library catalog. If you want to know more about how we created this tool continue reading below.

HowTo add search functionality to FireFox.

There really isn’t all that much to the creation of a plugin for firefox. It is actually much easier than it looks. You basically need three files. One is the graphic, one is the Javascript for performing the install, and the other is the plugin file for FireFox. The functionality for searching with FireFox is actually the same as it is for the netscape / Mozilla sidebars however I was unable to get the results formatted quite right for those browsers so for the moment I am leaving it as just a FireFox addin. Your results may vary.

Step One: Decide where on your website the files will reside. I created a separate directory called “Mozilla” to house all of the files to make maintaining them much easier. This path will be needed in later steps so make note of it. (Mine is: http://library.waubonsee.edu/mozilla/)

Step Two: Create your image. The image can be a .gif or a .png formatted image. I myself prefer the .png format because that format has had less copyright problems over the years and is much nicer to work with. The image must be no larger than 16 x 16 pixels. This size just happens to be the same size as a favicon.

Step Three: Create the .src file. Using the instructions and example found at: http://mycroft.mozdev.org/ deepdocs/quickstart.html#firstplugin create a file with the name of your choosing, I used catalog.src You probably want to make it unique to your library. If everyone names their plugin catalog.src we will only be able to add one catalog at a time.

Step Four: Modify the example .src file to fit your library. The following items will be unique to your library:
(Note: there is a automatic generator that I did not find out about until after I wrote all of this, located at http://mycroft.mozdev.org/generator/ that should help create the .src file)

  • Examine the <search> tag in the .src file there are a number of elements in it that need to be altered to fit your environment.
  • You should not need to change the version element, so leaving it at 7.1 should be fine.
  • The name and description elements should be self explanatory.
  • In the action=”” element you will need to place the search URL for your catalog. This is the URL your search form submits information to. Take a look in your catalog for the <form> tag, the action element on that page, and the action element in your plugin will most likely be the same. URL Parameters, Items following a ? and separated by & should be included using the <input> tag. I will go into more detail on this later.
  • Change the ‘method=”Get”‘ element to match the method element in your catalogs <form> tag. This controls how information is sent to your library catalog.
  • Change the ‘searchForm’ element to point to the regular page your patron would visit to start a new search in your catalog.
  • After the closing > for the <search> tag you will see a couple of <input> tags listed in the example. These tags are basically the same as any input you would pass along to the catalog via the URL parameter including the text the user wishes to search on. In the case of Web2 we have to specify a few additional items such as “setting_key” and “servers” in order for the search to work correctly. To do this, there needs to be a separate <input> tag for each parameters. If you are at ll familiar with creating forms in HTML this will be easy. The one key item is the tag in which the users search information belongs in. This tag contains the element “user” instead of the ‘value=””‘.
  • The next tag you need to modify is the <interpret> tag. This tag contains the information Mozilla needs in order to interpret your results. In my case I left the example alone, and inserted the various comment tags into the appropriate places in the HTML for Web2. I found this easier than figuring out preexisting unique strings returned by Web2.
  • Finally you will need to make a couple changes to the <browser> tag. This tag contains the exact URL of this file on your web server, as well as the location of your icon file for this tool. This is where you need to insert the path you decided upon back in step one. Edit the update element to point to your .src file, and the updateIcon to point to your .png or .gif image. These elements tell Mozilla where to go to re-download the plugin when the number of days specified by “updateCheckDays” has passed. This allows you to make changes to your plugin and have them automatically update on the patrons browser w/o them having to re-install.

Step Five: Insert the installation Javascript into a test web page. I use the <include> tag to help keep the function code from making my website a mess. The Javascript is located here:
http://mycroft.mozdev.org/ deepdocs/installing.html#server
You will need to modify a few lines to point them to the correct URL path for your plugin.

Step Six: Test your plugin, and make changes as desired. When everything works the way you want it, visit step 8.

Step Seven: Insert the installation Javascript into your website. I use the <include> tag to help keep the function code from making my website a mess. The Javascript is located here:
http://mycroft.mozdev.org/ deepdocs/installing.html#server


Creative Commons License
This work is licensed under a Creative Commons License.