[tutorial] Make Your Own Firefox Addon

[relax]

I recently made my own firefox addon and i'm the kind of person who likes to try out new type of languages or different projects
so i decided to do my first tutorial ever. This is not the easiest thing for me because my native language is not English and i pretty much blew of school
but i'm going to make a try.

This is a noob friendly tutorial

INSTALLATION
============
1. Install Netbeans IDE
   Linux: sudo apt-get install netbeans
   Windows: http://netbeans.org/downloads/index.html
2. Download http://www.teesoft.info/foxbeans/com-teesoft-foxbeans.nbm
3. Open netbeans
4. Go to tools menu and click plugins
5. Go to Downloaded tab and click Add Plugins
6. Select the foxbeans.nbm file
7. Click Install and follow instructions
8. Restart Netbeans IDE

Installation is now completed



SETTING UP NEW PROJECT
======================
1. Go to File->New Project
2. As project select "Empty Mozilla Addon Project" and click next
3. Name your Project and click Next (I will be using "helloworld")
4. Fill out the page (Addon-ID MUST be uniqe for your addon)
   The Addon name must not contain spaces
   At the bottom you have to change the version of firefox that your
   addon will be supported for. You can see the versions here
   https://addons.mozilla.org/en-us/firefox/pages/appversions/
   I'm going to use 16.* as MaxVer.
   Also select path to your firefox so you can test the addon

5. Create 3 files in your project
   + content
     - overlay.xul
     - alert.js
   + locale
     - overlay.dtd

CODING
======
1. First of we will setup label names. This is good if you want to use
   multiple languages support in your addon

Open your overlay.dtd and add following file

   

Code: [Select]

<!ENTITY  helloworld.menu1 "hello" >
its pretty straight forward "helloworld.menu1" is the name of the entry
having your addon name first is recommended because as i heard this prevents
accidently using another addons entry or writing it over.
"hello" is the label of the entry
as I sad pretty straight forward

2. Now we will edit the overlay.xul file this is the file that will be read
   by firefox. So in here we will link to the rest of the files

In my example i only have a contextmenu item.
In the bottom of the tutorial you have some useful links how to edit XUL files
my overlay.xul looks like this

Code: [Select]

<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://{appname}/locale/overlay.dtd">
<overlay id="{appname}-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript" src="chrome://{appname}/content/alert.js" />
    <menupopup id="contentAreaContextMenu">
        <menuitem id="hello-cm" label="&helloworld.menu1;" onclick="{appname}.alert('my first firefox addon');"/>
    </menupopup>
</overlay>
Here we have the overlay.dtd file include as well as the alert.js include
The {appname} will be converted to your addon name when you build the project
we also have the <overlay> witch contains a namespace that say that we use XUL
<menupopup id="contentAreaContextMenu"> says that we will have a context menu
<menuitem> label is linked to the dtd file and starts with & and ends with ;
onclick says itself it call's a function


3. Now we will edit the alert.js this is pure javascript
   Here you will have all your functions

My alert.js looks like this

Code: [Select]

if (typeof helloworld == "undefined") {
    var helloworld = {
        alert : function (msg) {
            alert(msg);
        }
    }
}
Here we have a namespace this is also done so you don't overwrite other
addons functions or use them by mistake.
the if is so we only load helloworld once
alert : function(msg) is the function name and that it is in fact a function
witch take the param msg...


Now run the project by pressing F6


links:
XUL: https://developer.mozilla.org/en-US/docs/XUL
javascript: https://developer.mozilla.org/en-US/docs/JavaScript
javascript: http://www.w3schools.com/js/default.asp

[Polyphony]

this is kind of off topic but not all Linux distros use apt-get I'm just messing with you, jeez relax (pun intended)

neat little tutorial by the way, I'm thinking about making a plugin for gedit or something, but I might consider something like a firefox or xchat addon/plugin whatever you want to call it.  I just want to get used to adding onto a bigger project,

[Kulverstukas]

Very nice bro, I was searching for info how to code firefox add-ons. I thought you have to make it in Notepad
Thanks again, +1.

[relax]

this is kind of off topic but not all Linux distros use apt-get I'm just messing with you, jeez relax (pun intended)

neat little tutorial by the way, I'm thinking about making a plugin for gedit or something, but I might consider something like a firefox or xchat addon/plugin whatever you want to call it.  I just want to get used to adding onto a bigger project,

hmm i know yum also
i was thinking about xchat also
afaik its python or perl

thanks kulver

[Daemon]

Very nice job Relax, I love it when people use pictures and code examples in their tutorials. It makes it much more user friendly
I'm not to interested in making ff addons myself, but if i ever change my mind i'll be using this for sure! Good work man, keep it up

[THE PEREGINE]

it's great tutorial,thank you

[Uriah]

thank you, great tutorial!
+1

[uday463]

Can anyone please make the tutorial for this, because I followed the steps by downloading Netbeans PHp.
As soon I created the project as shown in first screenshot. I clicked finish and its showing blank..

Now in the tutorial it is showing as  5. Create 3 files in your project
   + content
     - overlay.xul
     - alert.js
   + locale
     - overlay.dtd


Can anyone tell me steps how to create those three files.. Eagerly waiting for help. anyone please help me

[kenjoe41]

Can anyone please make the tutorial for this, because I followed the steps by downloading Netbeans PHp.
As soon I created the project as shown in first screenshot. I clicked finish and its showing blank..

Now in the tutorial it is showing as  5. Create 3 files in your project
   + content
     - overlay.xul
     - alert.js
   + locale
     - overlay.dtd


Can anyone tell me steps how to create those three files.. Eagerly waiting for help. anyone please help me

the tutorial is just fine for now. relax gave you a starting point and follow up on those sites he gave though i would advise you make an introduction first so that we get to know you. regards

[uday463]

Well I am Uday. Working on Web Application Vulnerability assesment for the last 6+ years. Currently I am workng for Apple Inc. in US . this is myfb link https://www.facebook.com/uday.binny

But still i dint get , How to create those 3 files, It would be great help if some one teach me that.

[kenjoe41]

I thought you have to make it in Notepad
Thanks again, +1.

yeah you can edit an XUL (XML User-interface Language) with Notepad.

I've found it easier to learn by dissecting someone else's extension like explained here
@uday463 if your serious then take an indepth understanding from https://addons.mozilla.org/en-us/developers/docs/how-to/getting-started