Tools for Extension Development

 < Day Day Up > 

There are several useful development tools, most of which are implemented as Firefox extensions.

Prior to starting development, go to Mozilla's Firefox extensions page and see which developer extensions are currently available. Check this page frequently because the list changes often.

The following section contains information on the Extension Developer extension. This particular extension, designed for extension developers, can save you a great deal of time if used properly.

The Extension Developer Extension

One of the most useful tools for extension development is the Extension Developer. This tool was written by Ted Mielczarek and can be downloaded at

Extension Developer installs a new pop-up menu under Firefox's Tools menu selection. The eight choices in this menu are

  • Extension Builder

  • Toggle Debugging Prefs

  • JavaScript Shell

  • JavaScript Environment

  • JavaScript Injector

  • HTML Editor

  • XUL Editor

  • Reload All Chrome

You can quickly try each of these options, as described in the following.

Extension Builder

The Extension Builder is the most powerful and useful feature of Extension Developer. Shown in Figure 16.3 is the dialog box that appears when this feature is selected.

Figure 16.3. One useful part of Extension Builder is its capability to edit the install.rdf file automatically.

Other features of the Extension Builder include the capability to build the extension, install it, determine its folder location, and show its installed folder.

The install.rdf editor is able to read the extension's install.rdf file. All extensions must have an install.rdf file (this file tells Firefox all about the extension).

Toggle Debugging Prefs

In the previous section, "Preferences for Extension Developers," you set some preferences when developing extensions. The Extension Developer's menu item Toggle Debugging Prefs toggles three of the four recommended extension building preferences:

  • nglayout.debug.disable_xul_cache

  • browser.dom.window.dump.enabled

  • javascript.options.showInConsole

Being able to toggle these preferences is important because, when they are set, Firefox performance can be seriously compromised.

The one preference that is not toggled is javascript.options.strict. If your extension uses JavaScript and you are encountering problems, manually enable javascript.options.strict preference, as earlier described.

JavaScript Shell

Sometimes the JavaScript Console's one-line JavaScript evaluator is not sufficient for testing pieces of JavaScript code. The JavaScript Shell interface can be very useful in such cases.

In Figure 16.4, the JavaScript Shell was started. The first six lines in the window are welcome text, complete with some links (including Math, help, and enumerate Windows()).

Figure 16.4. The variable MyVar is assigned a string; then MyVar's contents are displayed in an Alert box.

The steps to display the Alert box shown in Figure 16.4 are shown here:


On the seventh line, MyVar = "This is an alert message!" is the first line typed into JavaScript Shell's window.


The JavaScript Shell responds by printing the new value of MyVar, in the eight line.


In the final line, alert(MyVar) is typed and Enter is pressed. The Alert box is displayed, using the text you saved in MyVar.

If you click the help link (end of the third line), a short but useful help page is displayed. After using this small window for a while, you might find that it is indispensable when developing simple JavaScript code.

JavaScript Environment

The JavaScript Environment is similar in concept to the JavaScript Shell. The most important difference is that the JavaScript Environment allows you to develop more complex JavaScript code.

The JavaScript Environment window is shown in Figure 16.5. In this example, I've written a simple JavaScript program that prints the squares of numbers between zero and five. (When you start the JavaScript Environment, you will see the inspiration for this program.) To make this example a bit more than trivial, I've created a function to do the square function.

Figure 16.5. In the JavaScript Development Environment window, the top half is the window where you enter your code.

Here's my sample code:
 print("Squares of numbers 0 through 5:"); for (i = 0; i <= 5; ++i)   print(SquareIt(i)); function SquareIt(a) {return(a * a);} 

This small JavaScript program created the results shown in Figure 16.6.

Figure 16.6. The browser window shows the actual code; the JavaScript Injector window shows the file being executed; and the Alert window shows the results.

JavaScript Injector

The JavaScript Injector enables the user to execute JavaScript that has been saved in a file. This allows easy testing of complete JavaScript files without having to cut and paste.

Shown in Figure 16.6 is Firefox with a small sample JavaScript program. This program is similar to the one in the previous example; however, the previous example's print() statements have been replaced with alert() statements. This was done because the JavaScript Injector runs the JavaScript program in a true JavaScript environment, whereas the other two examples have a text output area available.

In the end, all three of these JavaScript tools are very useful.


Don't forget that the JavaScript Console is available when these JavaScript tools are used. For example, if you use the JavaScript Injector and the code doesn't execute properly, check the JavaScript Console for any error messages.

HTML Editor

Much like the JavaScript Shell, the HTML Editor has a window with two sections. In the upper section you enter your HTML code, and in the bottom, as you are working, you will see the rendered results of the HTML.

This small tool supports clipboard copy and paste, letting you easily move HTML code into and out of the HTML Editor. (This is important because there is no file Open, Save, or Close command.)

Figure 16.7 shows the HTML Editor with a small piece of HTML that was lifted from my cooking web page.

Figure 16.7. This HTML was created completely in the Real-time HTML Editor. If you are a guy and think you can't cook, think again.

The Real-time HTML Editor gives you immediate feedback by showing what the HTML code will look like in a browser window.

XUL Editor

When you find that JavaScript won't do everything you want (and JavaScript is limited, intentionally), the next avenue to greater functionality is XUL. XUL allows for easy development of platform-independent user interfaces, although Java and JavaScript must still be relied on for much of the underlying functionality.

In Firefox, click Edit in the menu for an example of a menu using XUL. It is not a part of Windows. Firefox doesn't use the Windows GUI interface except for client output. Everything you see in the Firefox window the menu, the toolbar(s), the status bar, and so on is a creation of Firefox. Most Windows applications use Windows to display titles, menus, toolbars, and the like. That is fine for those applications, but Firefox was designed to be platform independent.

Someday most applications will use XUL a victory for developers who don't want to be tied down to a specific operating system. The XUL Editor is shown in Figure 16.8. This code example is a bit more complex than our previous JavaScript examples, but it does more. Though not obvious, our XUL example uses JavaScript.

Figure 16.8. XUL frees you from the operating system, just like the operating system frees you from the hardware.

To be more readable, this simple bit of XUL code is shown in Listing 16.1. In this code, several items are highlighted in bold; these are areas that deserve closer inspection.

Listing 16.1. The Sample XUL Code from Figure 16.8
 <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window  xmlns=""> <label value="This is our XUL example of a menu."/> <toolbox flex="1">   <menubar >     <menu  label="File">       <menupopup >         <menuitem label="New" oncommand="alert('You clicked on File, New in the menu');" />         <menuitem label="Open"/>         <menuitem label="Save"/>         <menuseparator/>         <menuitem label="Exit"/>       </menupopup>     </menu>     <menu  label="Edit">       <menupopup >         <menuitem label="Cut"/>         <menuitem label="Copy"/>         <menuitem label="Paste"/>         <menuseparator/>         <menuitem label="Undo"/>         <menuitem label="Redo"/>       </menupopup>     </menu>   </menubar> </toolbox> </window> 

In Listing 16.1, we have added code to the file menu's New command. Added is an oncommand attribute. The data assigned to the oncommand attribute is what will happen when the user selects (clicks) this item. In this example, "alert('You clicked on File, New in the menu');" is JavaScript code. I enclosed the entire item in double quotation marks. Usually, a text literal passed to the JavaScript alert() function is enclosed in double quotation marks, but because this entire item is in double quotation marks, I instead used single quotation marks for the alert()'s parameter.

After you get used to using XUL, you will find it easy to create user interface functionality using a combination of XUL and JavaScript.

Reload All Chrome

Chrome is the look and feel of an application's user interface. Colors, button shapes, fonts, sizes, and so on are all specified as parts of chrome. Chrome is always affected by themes and, to a lesser extent, by extensions. This lesser extent is typically parts of chrome that are directly part of the extension's functionality (such as added dialog boxes, menu items, and so forth).

When Firefox loads, it loads the chrome. From then until Firefox closes, Firefox does not change the chrome. When a new theme is selected, Firefox implements the theme when it restarts. The same is true in regard to extensions extensions are loaded and configured at startup, not during the normal operation of Firefox.

The Extension Developer extension forces Firefox to reload the chrome without a restart. The concept is that this makes developing extensions (and themes) much faster. At least that is the idea.

My experience has been that developing extensions can be a risky process. Not only can you load the extension you are developing and have Firefox crash, but you also can damage the profile. In fact, it is too painfully easy to corrupt a profile when developing extensions.

If you are willing to take the risk that a reloading of the chrome might not resolve some problems your extension has caused but that you might not realize have occurred), you should try the Reload All Chrome option.

Debugging Consoles

Two consoles are available to extension developers. The first console is the Firefox Console, which receives messages relating to errors in Firefox. The second console, the JavaScript Console, specifically displays errors relating to JavaScript. Both are vital to creating extensions.

The Firefox Console

The Firefox Console is a separate window started when the Firefox command contains the switch console.

The Firefox Console displays the streams stdout and stderr in a simple, display-only window (refer to Figure 16.2). Both stdout (which is short for standard output) and stderr (which is short for standard error) are terms that are inherited from the C and Unix days.


Both stdout and stderr are from pre-Windows days. Back when we used command prompts, characters, terminals, and graphics were what we put on the wall and called art. Ah, the good old command prompt days….

It was common to redirect either (or both) to files, but in today's Windows GUI environments, we don't have a console or any way to easily grab this valuable information. The Firefox Console solves this problem in a crude but usable way.

stdout is the nonerror output from a number of I/O statements. stderr is error output, either specifically written to stderr by the program or from runtime functionality's error trapping routines.

The JavaScript Console

The JavaScript Console serves a function very similar to that of the Firefox Console. The JavaScript Console receives error message information from JavaScript about errors and other problems that occur in JavaScript code.

Unlike the Firefox Console, though, the JavaScript Console has some management tools. There are controls to restrict how much information is displayed (All, Errors, and Warnings and Messages) and a Clear button. Plus, the JavaScript Console allows copying information about an error to the Windows clipboard so it can be pasted into other applications if necessary.

The JavaScript Console can be displayed in a Firefox sidebar (see, as a separate window (select JavaScript Console in the Tools menu), or in a tab (by creating a new tab and entering the following URI in the Location bar):


Figure 16.9 shows the JavaScript Console displayed as a separate window (go to the Tools menu and click JavaScript Console).

Figure 16.9. The JavaScript Console; no matter how it's displayed, it always looks the same.

At the top of the screen are the buttons that limit the display to either a severity level or all messages and a Clear button to clear the console's display. Below these buttons is a small text area in which you can type a JavaScript statement and have it evaluated by either clicking the Evaluate button or pressing the Enter key.

Another powerful advantage of the JavaScript Console is that it provides information about errors in a consistent format. Each error has a severity level symbol (Error, Warning, or Message), an error description, an error source (usually a file), along with optional error-specific information.

The filename for the error is a link to that file. Click the filename, and the file is opened in a browser window.


Programmers love to indent their code using tab characters. (Indenting is vital to creating readable code.) I'm going to suggest that you not put tabs in any files you use when creating your extensions. Instead, use spaces to indent.

Many of the error-reporting tools display a pointer to the exact place in the file where the error occurred. This pointer might not reflect the correct position if there are tabs in the source line.

Multiple Instances of Firefox

When developing extensions and themes, it can be useful to have several copies of Firefox running at the same time.

However, if you attempt to run a second copy of Firefox, all that typically happens is that you are switched to the currently running copy not what you want in this situation.

Mozilla has taken care of this problem. There is a way to force Firefox to open a second independent copy of itself on demand. And, this small feat of magic is easy to do.

Multiple instances of Firefox are allowed when the environment variable MOZ_NO_REMOTE exists and is set to a value of 1. You can do this in one of two ways. One way is to create a batch script file with the following two lines:

Set MOZ_NO_REMOTE=1 Firefox %1 %2 %3 %4 %5 

Save this file as firefox2.bat (or any other name you find suitable, as long as you use .bat for the extension).

Next, run this batch file in a command prompt window (go to the Start menu and select All Programs, Accessories, Command Prompt). Or, from the Windows run command box (go to the Start menu and select Run), you can enter the following command:

Firefox2  p my_second_profile 

where my_second_profile is the name of a profile different from the profile the other copy of Firefox is running. If you fail to specify a profile that is not in use, Firefox might prompt for one.


You can't run two copies of Firefox using the same profile. Plan ahead and create a clone of your profile, so you won't have to reinstall extensions and themes when using these techniques.

The second method is to set a permanent user environment variable, as the following steps show:


Open the Windows Control panel.


Double-click System.


Click the Environment Variables button at the bottom (just above the OK button).


In the top section, labeled User Variables for, click New (see Figure 16.10).

Figure 16.10. Make sure the variable name is in uppercase and that the value is the number 1.


In the Variable Name box, type MOZ_NO_REMOTE.


In the Variable Value box, type 1.


Click OK to save this variable; then click OK to close the Environment Variables window.


Click OK to close the System window, and close the Windows Control panel.

After you finish adding the new environment variable, all that is necessary to start another copy of Firefox is to click the Firefox icon!

     < Day Day Up > 

    Firefox and Thunderbird. Beyond Browsing and Email
    Firefox and Thunderbird Garage
    ISBN: 0131870041
    EAN: 2147483647
    Year: 2003
    Pages: 245

    Similar book on Amazon © 2008-2017.
    If you may any questions please contact us: