Warning, please read Part I of How to make your own Firefox extension from scratch before trying this DIY.

In this Part II of How to make your own Firefox extension, we will change the icon button to something we like instead of the dumb looking blue default button.

Now, you will want to open up the overlay.css file under the skin directory of where you unzipped your extension files.

The default should look somewhat like this:

/* This is just an example. You shouldn’t do this. */
#shtoolbar-hello
{
color: red ! important;
}
#shtoolbar-toolbar-button
{
list-style-image: url(”chrome://shtoolbar/skin/toolbar-button.png”);
-moz-image-region: rect(0px 24px 24px 0px);
}
#shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 24px 48px 0px);
}
[iconsize="small"] #shtoolbar-toolbar-button
{
-moz-image-region: rect( 0px 40px 16px 24px);
}
[iconsize="small"] #shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 40px 40px 24px);
}

Now, you can change the button’s image by editing the toolbar-button.png. I actually simply replaced with another file name.

So first, I made my own logo. You will need one with height of 24 pixels and the other with 16 pixels.

I also made a “hovering” graphic so the logo will change and have the kangaroo holding a beer when you hover the mouse over it.

Here’s an example Png file I made using Photoshop:

As you can see, you the can use just 1 file to store all the logo images you need.

In my case, I made a 165×24 pixel icon button and 100×16 pixel icon button.

The 100×16 pixel icon button is actually used for the toolbar and the 165×24 pixel icon button is used when you tried to customize your toolbar.

So in total, the size of my file was 265×48 pixels.

Now comes the fun part. You simply need to mess with the -moz-image-region values so you grab the right parts of your customized PNG file.

So after all that, here’s the file I have for overlay.css:

/* This is just an example. You shouldn’t do this. */
#shtoolbar-hello
{
color: black ! important;
}
#shtoolbar-toolbar-button
{
list-style-image: url(”chrome://shtoolbar/skin/shtoolbar.png“);
-moz-image-region: rect(0px 165px 24px 0px);
}
#shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 165px 48px 0px);
}
[iconsize="small"] #shtoolbar-toolbar-button
{
-moz-image-region: rect( 0px 275px 16px 165px);
}
[iconsize="small"] #shtoolbar-toolbar-button:hover
{
-moz-image-region: rect(24px 275px 40px 165px);
}

I’ve highlighted the changes I made in BOLD.

You simply need to remember 4 things when editing the -moz-image-region:

TOP RIGHT BOTTOM LEFT

That’s right, for the first line:

-moz-image-region: rect(0px 165px 24px 0px);

I am simply telling the CSS file to grab the portion of the image from 0 to 24px from TOP to BOTTOM, and from 0 to 165px from LEFT to RIGHT.

Now you do the same for the hovering and the smaller image.

After you made those changes, Save and then restart the browser.

Your default blue button should now look like this:

Looks great doesn’t it?

And when you hover the mouse, you get a nice beer bottle for the sober kangaroo.

Next time, we will mess with more Javascripts that can be used for the icon button to actually do something…

Have fun and have a greeeeat weekend!

Well, there’s a flood of Firefox Toolbar makers out there, but I feel that is too much cheating and you don’t actually learn anything.  Plus, those toolbars are very chubby and don’t run fast as it could when you make them from scratch.

In this session, I will teach you how to make your own Firefox extension and make it say, “Hello World!” from scratch.  (Not exactly from scratch but…)

It’s pretty easy actually. You can use this Firefox/Thunderbird Extension Wizard to get the skeleton code for your new Firefox extension.

Simply fill in the blanks like below and make sure to note the Extension ID, you can probably put your favorite e-mail address here:

After unzipping the downloaded files, simple unzip the files into a directory such as c:\mytoolbar.

After that, you can create a text file called, “zedomax@gmail.com”, which is what you put for Extension ID earlier. Simply put “c:\mytoolbar” in the text file and save it. (Yes, you need to simply set the path and save it…)

Now put that text file in your profile directory, usually something like, “c:\Documents and Settings\Username\Application Data\Mozilla\Firefox\Profiles\xxx.default\extensions\” where Username is your username and xxx will be variable depending on your computer.

After that, simply restart your Firefox and then go to Tools->Add-Ons and you will see your Firefox extension as seen here:

In my case, I named it “SiteHoppin Toolbar”, since I am making a SiteHoppin Toolbar.

Now that’s the basics to be able to edit your extension with Javascript and other great stuff. Greatest thing or the easiest thing about Firefox extensions is that it supports Javascript. Even if you turn off your Javascript support for browsing, Javascript for extensions still work, the real beauty behind Firefox extensions.

Now, you don’t see any buttons other than this new menu button called, “Your localized menuItem” under Tools. Press on it and you will get a “Hello World!” message.

But you can also go add your first icon button by going to View->Toolbars->Customize, then find your icon and drag it anywhere you want.

Now you should see your very first ever Firefox extension button like here:

Yey, congratulations!

You can now go play with the DTD files in your plugin folder OR you can go to this Mozilla Help for further instructions OR simply check back in couple days as we will have part II of this DIY.

C’ ya, have great coding weekend!