This guide will teach you how to create a Firefox search bar plugin for your Google Custom Search engine using XML and the OpenSearch standard. This guide assumes that you have created a Google CSE and have made a front end for it on your own website (e.g. www.example.com, www.example.com/example/, etc.) instead of using the Google default search page and that the search results are appearing within your own site and not on a Google hosted page. You can insert the search code into your own site by copying and inserting the HTML code found in the Code section of the Google CSE control panel.
The first step is to go to your site and search for “SEARCHTERM” (without quotations) in the Google CSE Search Box. You’re not going to get any results, just search for it and copy down the resulting URL from the address bar. Your URL will look something like this (not the same pcwizcomputer.com domain obviously, important parts highlighted):
http://pcwizcomputer.com/osx86search/results.htm?
cx=013937989978383788209%3Aj334zhfu29c&cof=FORID%3A11
&q=SEARCHTERM&sa=Search#279
The data in this URL is going to make up most of the base of your code. The second thing you have to do in preparation to create a plugin is to make a favicon.ico file (for the search plugin icon) and then upload it to your web space. The favicon should be around 16×16 and it has to have the ICO icon format for the method used in this guide. Now we start the actual coding. Open up a new document in a text editor like Notepad and follow:
The first thing you have to do is mark this file as a search plugin. To do this, put these 2 lines of code at the very top (beginning) of your file:
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/”
xmlns:moz=”http://www.mozilla.org/2006/browser/search/”>
Then right below that line, insert these lines:
<ShortName>Your search engine name</ShortName>
<Description>Search engine description</Description>
<InputEncoding>UTF-8</InputEncoding>
Replace “Your search engine name” with your search engine’s name (e.g. Computer Search Engine, etc.) and replace “Search engine description” with a short one line description of your search engine (e.g. Find computer parts with ease, etc.). Leave the InputEncoding line as it is.
Now comes a slightly more interesting part, go to this Base64 Online encoder tool. Enter the URL where your favicon.ico is (e.g. www.example.com/favicon.ico) and click Submit Query. Copy the code that appears in the text box to the clipboard. Now go back to your search engine file and insert this line of code (right below the InputEncoding line):
<Image width=”16″ height=”16″></Image>
Now between the “<Image width=”16″ height=”16″>” and the “</Image>, paste that Base64 Code you copied down earlier from the Base64 online encoder.
Right below that, insert these lines:
<Url type=”text/html” method=”get” template=”http://www.example.com/results.htm”>
<Param name=”cx” value=”013937989978383788209%3Aj334zhfu29c”/>
<Param name=”q” value=”{searchTerms}”/>
<Param name=”sa” value=”Search”/>
<Param name=”cof” value=”FORID%3A11″/>
</Url>
Replace “http://www.example.com/results.htm” with the page where the search results appear (you can get this from that SEARCHTERM URL you found, the results page URL is highlighted in red above). Replace the “013937989978383788209%3Aj334zhfu29c” with your own CSE ID number (every number is unique, you can also find this in the URL you found, this is highlighted in blue above). And last, replace the “FORID%3A11″ with your own FORID number, again found in the SEARCHTERM URL.
This is the last piece of code you need to add to your file:
<Url type=”application/x-suggestions+json” method=”GET” template=”"/>
<moz:SearchForm>http://www.example.com</moz:SearchForm>
</OpenSearchDescription>
Just replace “http://example.com” with your search engine website page URL. Your end result file should look something like this (that example is from our own search plugin for our Mac OSx86 Search Engine)
Now double check everything to see that you’ve entered it right and save the file as an XML file (e.g. search.xml). Now upload this XML file to your web space and note down the URL to which you uploaded it. The last thing you need to do is to insert some HTML code into your search engine web pages to allow the plugins to be installed by users. Open up your search engine web page using a HTML editor and insert this line between the <head> and </head> tags:
<link rel=”search” type=”application/opensearchdescription+xml” title=”Your search engine name” href=”http://www.example.com/search.xml”>
Replace “Your search engine name” with the ShortName you specified for your engine in your search plugin XML file. Replace “http://www.example.com/search.xml” with the actual URL to where your plugin XML is located. Insert this line of code into all pages of your search engine site and re-upload them to your web space for changes to take effect.
You should now be able to download and install the plugin through the Firefox search bar drop down menu (top right hand corner). Test it out, see if it works, and tell the public about it! If you encounter any errors, double check to ensure that you did everything correctly.
Enjoy!
