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

max — Sat, 19 Apr 2008 18:37:54 +0000

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!

Brought to you by: Zedomax.com

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

zedomax.com » c_documents

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

Related posts