Welcome

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!

Mozilla's Developer Guide

Now yes, Mozilla does offer a developer guide on how to make a search plugin but many people find it too complicated and give up. Then come running to me and ask me to make it for them. But once you know how to do it, it's actually very easy. There are a few ways of making the search plugin, in this tutorial I will be showing you 1 way; The way I think is easiest. There will be a lot of explaining in this tutorial, as it needs to be easier to understand than Mozilla's developer guide.

Lets learn how to do it, what we need to do and what things do...

The Theory Behind

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 Invision Power Board then I will tell you how to adapt it for vBulletin. 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.

Lets get started with making it. Move onto the next page...

Creating The Search Plugin

This tutorial is going to be based around creating a search plugin for Pixel2Life Forum. 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 p2lforum.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:

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
[/code]

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 Pixel2Life Forum 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 Search the Pixel2Life.com Forum because that is basically what it does.

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

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
 method="post"
 action="http://www.pixel2life.com/forums/index.php?act=Search&CODE=01"
[/code]

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. Invision Power Board 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 we are about half way through, and it's pretty simple huh. Now we will add 3 more lines.

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
 method="post"
 action="http://www.pixel2life.com/forums/index.php?act=Search&CODE=01"
 searchForm="http://pixel2life.com"
 queryEncoding='UTF-8'
 queryCharset='UTF-8'
>
[/code]

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 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.

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
 method="post"
 action="http://www.pixel2life.com/forums/index.php?act=Search&CODE=01"
 searchForm="http://pixel2life.com"
 queryEncoding='UTF-8'
 queryCharset='UTF-8'
>

<input name="keywords" user >
<input name="forums" value="all">
[/code]

Now for this plugin I only needed 2 inputs, 1 of which was hidden. The other is where we enter the term to search. The hidden field defines which forums we want to search, as you can see we set that to search them all. If we wanted it to search a certain forum, we would do something like:

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
 method="post"
 action="http://www.pixel2life.com/forums/index.php?act=Search&CODE=01"
 searchForm="http://pixel2life.com"
 queryEncoding='UTF-8'
 queryCharset='UTF-8'
>

<input name="keywords" user >
<input name="forums" value="1">
[/code]

In our case, that would search the General Discussion forum on Pixel2Life Forum. However, what if we wanted to search General Discussion and Newbie Introductions? Then we would need to make an array of forums... to do that we do something like:

[code=TEXT]
<search
 version="1.0"
 name="Pixel2Life Forum"
 description="Search the Pixel2Life.com Forum"
 method="post"
 action="http://www.pixel2life.com/forums/index.php?act=Search&CODE=01"
 searchForm="http://pixel2life.com"
 queryEncoding='UTF-8'
 queryCharset='UTF-8'
>

<input name="keywords" user >
<input name="forums[]" value="1">
<input name="forums[]" value="46">
[/code]

By adding [] onto forums in the input name we are creating an array. So every input named forums[] will be included. You need one input for each forum you want 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 keywords, with different software or coding it will probably be different.

That's all the inputs you need to make a search plugin for Pixel2Life Forum.

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...

On the next page...

Something 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...

[code=TEXT]
<browser
 update="http://pluginr.com/Search_Plugins/Plugins/p2lforum.src"
 updateicon="http://www.pixel2life.com/favicon.ico"
 updatecheckdays="7"
>
[/code]

Having <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.

and we end that with >. Now that was simple wasn't it? You now have a complete plugin script that automatically updates every 7 days!

On the next page you will learn to install the search engine you just made, or any other search plugin you make...

Installing The Search Plugin

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.

[code=js]
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.");
    }
}
[/code]

Now this code needs to go in script tags on a page. Like this:

[code=TEXT]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Firefox Search Plugins :: Search TechTuts, Pixel2Life, TutorialFX and more...</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
            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.");
                }
            }
        </script>
    </head>
<body>

<br />
<a href="#" onclick="addEngine('http://pluginr.com/Search_Plugins/Plugins/p2lforum.src', 'http://www.pixel2life.com/favicon.ico', 'Pixel2Life Forum', 'Search Pixel2Life.com Forum'); return false;">Install Now</a>   
<br /><br />
</body>
</html>
[/code]

If you open a new file, save as install.html and put the above code inside it. Press install now and the plugin will install for you.

All you need to do, is edit the onclick="" on the link. Pretty straight forward.. it goes like:

addEngine(url to src, icon, name, description);

As simple as that...

Thanks For Reading

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

Thanks again for reading!