DIY HACK – How to make your own Firefox extension from scratch! – Part II

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!

3 Responses to DIY HACK – How to make your own Firefox extension from scratch! – Part II

1. HiFi Guy says:

   April 21, 2008 at 7:24 am

   Thanks for this, I will do my own toolbar now.
2. Popular Wealth says:

   April 23, 2008 at 6:42 pm

   Awesome guide, I’ve made one of my own, for dropping EC’s of course :p
3. max says:

   April 23, 2008 at 11:52 pm

   Thanks, you made your own? Good stuff, let me know if you want to share it.