Link Worth

How to make a FireFox Search Plugin and how to install it! Full Tutorial!

Written on December 13, 2007 – 12:15 am | by Prakash Thapa |

The tutorial many people have been waiting for, is finally here! In this tutorial you will learn to make a FireFox Search Plugin, just like the one in the top right of your browser. Using the search plugin, you can tell it to search your site or forum. You will be able to search, Invision Power Board. vBulletin. Your custom coded script, that’s if its coded well. and any software or script that has a search function. This plugin will be able to search it!

So obviously as with everything else, there is a theory behind making this plugin. The plugin uses a file, which contains all the data needed. The file is a .src and you will learn more about that soon. In the .src you will find information such as, the site name, the site URL, the search method, the input fields and lots more. This may sound confusing, but it will make more sense later! To edit the .src file I recommend you use Notepad. I am going to explain how to make a search plugin for one of my site then I will tell you how to adapt it. If you are looking to make a plugin for PHPBB, MyBB or another script you will need to have an advanced knowledge of how to make a plugin. Obviously I cant tell you how to make a plugin for every single forum software, blog software etc. I am teaching you how to do this, not how to copy and paste my code.

This tutorial is going to be based around creating a domain whois search plugin for whatismyip.com.np site. Now I have already created this plugin before, Here, but am going to be showing you how to do it!

Step 1
First of all, you need to open up Notepad or another kind of editor that accepts .src file extensions. Now create a new document and name it firefox_search.src

Step 2
Now we have the file created, lets start adding some content that will make up our Firefox Search Plugin.

So now put this text into the file:

<search
version=”1.0″
name=”Check Domain & Whois”
description=”Find your IP address, check Domain availability and Whois information”

Now the explanation…

<search means we are obviously starting a new search bar. So this must be placed at the beginning of every Search Plugin you make.

The next 3 lines are pretty self explanatory..

version is the version of the plugin not the version of FireFox. This can be anything number wise, it really doesn’t matter what it is. As long as it is numerical.

name is the name of this plugin. For this case, we are searching Check Domain & Whois so that’s what we are going to call it. Again, you can call it anything you want it really doesn’t matter.

description is a small description of the plugin. Again very self explanatory. Just type a small description about the plugin. In this case, I have just put Find your IP address, check Domain availability and Whois information because that is basically what it does.

Now we are going to add a bit more content and information into the file.

method=”get”
action=”http://www.whatismyip.com.np/whois.php”

This time we have added method and action. Again, both are really easy to understand so I will explain quickly…

method is the method of the search engine. Does the search engine use post or get? That’s all you enter here.. post or get. WhatIsMyIP.com.np uses post so that’s what I have used here.

action is the location of the search form or file. In this case the search form / file is in the same location so we enter the URL. For this plugin I have used This URL because that is the location of the search form.

Now add the following lines.

searchForm=”http://www.whatismyip.com.np”
queryEncoding=’UTF-8′
queryCharset=’UTF-8′
>

As you can see, we have added.. searchForm, queryEncoding and queryCharset. These 3 things may sound complicated but there actually real simple.

searchForm I’m not 100% sure about but I always enter the site url in and it always works fine.

queryEncoding is the encoding of the query. The query is what is entered into the search box.

queryCharset is the character set of the query.

As you will see, we have ended the <search></search> tag with a >. That’s the first part done.

Next we make the input boxes, just like if we were doing it in HTML just a little different.

<input name=”query” />

Now for this plugin I only needed 1 inputs where we enter the term to search.
As you can see on the first input, we have the word user at the end. That means it’s the input that will show. It will not always be named query, with different software or coding it will probably be different. If you want hidden field on your search plugins then simply don’t use attribute user in the above code.

That’s all the inputs you need to make a search plugin for WhatIsMyIP.com.np.

That is basically the plugin created. That is now a working script, but we don’t want to finish there… I will now show you something else.. very special…

Now it isn’t that special so don’t get too excited, but this part is optional. You can make FireFox check for plugin updated every so days. You can define how many ever days to check for updates…

<browser
update=”http://www.whatismyip.com.np/pluggins/firefox_search.src”
updateicon=”http://www.whatismyip.com.np/favicon.ico”
updatecheckdays=”1″
>

Having <browser></browser> starts the browser part of this script. A few things must be defined inside here…

update is the location of the actual src file. If you want FireFox to check for updates on this plugin, the url needs to be pointing to the uploaded src.

updateicon is the location of the icon on the search plugin. Now this can be a favicon from your site or an image. The image icon will be resized to 16 x 16 to fit.

updatecheckdays is pretty obvious, how many days do you want between when FireFox checks for updates.

So now everything is made, obviously it needs to be installed for it to work. It doesn’t just magically appear in your browser.

Now to install a plugin we need to use Javascript. Obviously you will need javascript enabled for it to be able to install. I will give you the script that installs it, you may say its very similar to Mozilla’s version… but actually it is. There is only 1 way to install these plug ins.

create a new file with .js extenstion and place following script

function addEngine(url, img, name, desc) {
if ((typeof window.sidebar == “object”) && (typeof window.sidebar.addSearchEngine == “function”)) {
window.sidebar.addSearchEngine (url, img, name, desc);
} else {
alert(”You need a Mozilla based browser such as firefox to use this.”);
}
}

Now following code needs to go in your page between <head></head> with correct path of the .js file you created above.

<a href=”#” onclick=”addEngine(’http://www.whatismyip.com.np/pluggins/firefox_search.src’, ‘http://www.whatismyip.com.np/images/favicon.ico’, ‘Check Domain & Whois’, ‘Find your IP address, check Domain availability and Whois information’); return false;”>Install Now</a>

Now place following code anywhere you want to display the link for installing this plugin on user’s side.

And that’s it. Thank you very much for reading and hopefully this tutorial was easier to understand than Mozilla’s guide.

Related Posts

Put your related posts code here

Post a Comment

About Me

I am Prakash Thapa a Freelancer Web Programmer and this is my personal blog. Since from the beginiing of my journey in this Web World I have learned so many things by self-study. And have completed so many web-projects. Currently I am running my own web-house "ITWeb Developer" at Kathmandu, Nepal... More

Want to subscribe?

 Subscribe in a reader Or, subscribe via email:
Enter your email address:  

Our Sponsors


Translate This Blog

English flagItalian flagGerman flagSpanish flagFrench flagPortuguese flagJapanese flagKorean flagChinese flagArabic flagRussian flag
Find entries :