292
Part V — Installation, Automation, Tools, and Tricks
For more information or to install ieview, visit http://ieview.mozdev.org/.
Hacking with BBCode and BBCodeXtra
Without getting into extreme detail on how to use either one of these extensions, I can tell you
that they can definitely help in filling out responses in forums or forms and with creating links
and image tags for HTML, BBCode, and XHMTL. BBCode is the universally accepted
markup language for just about all major online user forums. BBCode markup language has a
much smaller subset of available formatting tags than HTML, and tags are usually delimited
with brackets instead of the normal HTML tags, which are delimited with less than (<) and
greater than (>) signs. Options that make either of these extensions great are their ability to
create links from selected text or clipboards into an input form and to add text-formatting syntax, as needed. Either one of these extensions is a must-have if you intend on posting forum
requests with links or have your own online forum that you use to support your applications,
and so on.
For more information or to install BBCode, visit http://jedbrown.net/1.0/mozilla/.
For more information or to install BBCodeXtra, visit http://www.extenzilla.it/
bbcodextra/index.php?lang=eng.
JavaScript and XUL Hacking Tools
JavaScript and XUL programming can be used in tandem to create great Firefox extensions
and applications. This section focuses on tools that will help with inspecting the Firefox interface, help debug JavaScript, and provide JavaScript tools and XUL packaging features. These
tools vary in level of difficulty and may have a steep learning curve, but all should be worth the
effort required.
Hacking with the DOM Inspector
The DOM Inspector is easily the best tool to use when working with Firefox and trying to create extension overlays by picking apart a window’s or dialog’s XUL elements. Using the combination of File ➪ Inspect a Window and Search ➪ Select Element by Click, you can easily
extract a window’s or an element’s id to use within your code. This is how I originally extracted
the “throbber-box” and “search-container” ids that I later used and modified in my local
userChrome.css file, as described in Chapter 2. Using this technique of selecting a window
or dialog to inspect and then walking through the document tree also gives you a better
understanding of the different elements that are used or are available with XUL interface
programming.
Installing the DOM Inspector is covered in Chapter 1 in greater detail, but suffice it to say, you
will need to redownload the Firefox installer to get this little gem. After that, you can just follow the Custom installation options to enable Developer Tools when prompted.
Chapter 15 — Hacking Tools for Web Programmers
Hacking with JavaScript Console and Debugger
The JavaScript Console and JavaScript Debugger are two different tools that are miles apart
with respect to features and ease of use. The Console is a default install with Firefox and can be
configured to show JavaScript errors and warnings from web pages, as well as errors from
extensions or XUL applications. The entries that get added here are errors, warnings, and
messages.
While this native feature of Firefox is good, some crave more control over JavaScript coding,
and that is where Venkman or JavaScript Debugger comes in handy. Venkman is the project
code name for the JavaScript Debugger extension, which includes an extremely rich and robust
editing and debugging environment specifically geared toward JavaScript debugging, as shown
in Figure 15-7.
FIGURE 15-7: JavaScript Debugger window
This extension may be overwhelming for the faint of heart at first, but once you have gotten
over the initial shock, the utilitarian features become very evident.
For more information or to install Venkman, visit http://www.hacksrus.com/~ginda/
venkman/.
293
294
Part V — Installation, Automation, Tools, and Tricks
Hacking with Extension Developer’s Extension
This extension is a nice compilation of quick tools that can make creating extensions a smooth
ride. The extension comes with the following features:
Extension Builder
install.rdf Editor
JavaScript Shell
JavaScript Environment
Live XUL Editor
Live HTML Editor
Toggle Debugging Preferences
Reload All Chrome
An Extension Developer menu is added to Firefox’s Tools menu, and all of these features are
accessible there.
Some of these features are mini–XUL applications that you can also use directly from Firefox
without having to install them separately. While some of the features are really diamonds in the
rough, the overall usefulness of this extension can quickly be reaped by novice or serious extension developers.
For more information or to install Extension Developer’s Extension, visit http://ted
.mielczarek.org/code/mozilla/extensiondev/.
Page Validation Hacking Tools
While the Web Developer extension includes a couple of online validation service features, I
want to also recommend two other extensions that may be of use: HTML Validator and
Checky. These extensions offer different sets of features, but both can be tapped into to clean
up any nonstandard coding that may be lingering in the HTML closet.
Hacking with HTML Validator
When I first used this extension on some of my pages, I was truly shocked and ashamed that it
found so many errors and warnings. The core is based on Tidy, which was originally created by
the W3C and has been updated and extended as an open-source project. Tidy’s core functionality focuses on analyzing specific strict standards and formatting for HTML code.
The latest version of HTML Validator, which taps into Tidy’s core features, adds a color-coded
icon to display the status of the current page that is loaded to the status bar. The real functionality comes with the information that it displays when you view a page’s source code from
Chapter 15 — Hacking Tools for Web Programmers
View ➪ Page Source. This is where HTML Validator adds a split panel, shown in Figure 15-8,
to the bottom of the view source screen. The bottom-left panel provides a list of errors and
warnings, and the bottom-right panel contains generic details and possible resolutions for the
selected error or warning. A nice feature of this extension is that when in view source mode,
clicking on an entry in the bottom-left panel jumps you to the offending code within the
source code in the main code window above it, making it easier to track bugs within the code.
Another feature that I have not really tapped into, but definitely will, is the Cleanup feature,
which is available as a button on the bottom of the Page Source window or from the right-click
context menu from the extension’s icon on the status bar. This feature steps you through proposed fixes for the offending page with source and browser views for the original as well as the
newly cleaned HTML.
FIGURE 15-8: HTML Validator list of errors and warnings in view source window
For more information or to install HTML Validator, visit http://users.skynet.be/
mgueury/mozilla/.
295
296
Part V — Installation, Automation, Tools, and Tricks
Hacking with Checky
Another notable extension for page validation is Checky, which is more centered on using
online web validation services but comes with tons of options. This extension also has the ability to create an agent, which automates several validation checks and caches the results locally.
For more information or to install Checky, visit http://checky.sourceforge.net/
extension.html.
Summary
This chapter highlights how to quickly make local configuration changes, discusses using
ScrapBook to organize notes and web pages, and finally recommends the mother of all web
developer extensions to get the boat rockin’. After that, the chapter dives into a few extensions
that help with hacking HTML, links, JavaScript, XUL, and validating web pages. The chapter’s main goal is to provide well-rooted and actively supported extensions that can really make
an impact on the day-to-day web programming drudgeries that usually pop up.
Creating Extensions
and Themes
part
in this part
Chapter 16
Understanding Mozilla
Programming
Chapter 17
Creating Extensions
Chapter 18
Creating Themes
Understanding
Mozilla
Programming
T
his chapter introduces you to the wonderful world of Mozilla programming. You get to know the main Mozilla technologies and see
how these technologies work together. After getting acquainted with
the various concepts and terms, we take our first look at the exciting possibilities found in creating new browser extensions.
What makes Mozilla programming and especially Mozilla extension programming so great? You can quickly achieve quite a lot with a simple text
editor and some imagination. Moreover, Mozilla is truly cross-platform. For
example, the vast majority of Firefox extensions can run on many different
operating systems with no modifications whatsoever. Finally, Mozilla is
open source. This means that you can see exactly what is happening behind
the curtains in each and every component you want to enhance or modify. It
also means that there are more people in the community who know the
inner workings of the various Mozilla parts and can help you on your development quest.
Understanding Mozilla Technologies
This section provides an overview of the various Mozilla technologies,
beginning with XML User Interface Language (XUL), the language
Mozilla uses to describe user interfaces (UI). Then we’ll discuss JavaScript,
a programming language used to implement the logic behind the user interface. You’ll also see how to use Cascading Style Sheets (CSS) to define the
appearance of your HTML and XUL documents and how to programmatically access these documents using the Document Object Model (DOM)
interfaces. The section concludes with a short overview of the Cross
Platform Component Object Model (XPCOM).
chapter
by Alex Sirota
in this chapter
˛ Understanding
Mozilla
technologies
˛ Introducing Firefox
extension
programming
300
Part VI — Creating Extensions and Themes
XUL: XML User Interface Language
XML User Interface Language (XUL) is the language used in Mozilla to describe user interfaces. Being an XML language, it has all the advantages of XML: it is simple, text based, crossplatform, and very flexible. You can create an advanced user interface with XUL in minutes
using a simple text editor. You don’t need to compile anything or to learn any platform-specific
concepts or tools. This makes creating user interfaces with Mozilla as straightforward as creating regular web pages, and similarly to a web page, your XUL user interface works on any platform supported by Mozilla.
XUL is pronounced “zool” (rhymes with “cool”).
XUL can be used to create both simple and complex user interfaces, starting with simple
dialogs all the way to full-featured applications. In fact, the Mozilla applications — Firefox,
Thunderbird, and the Mozilla Suite — are all built using XUL. There are several other XULbased applications, including the Internet Relay Chat (IRC) client named ChatZilla.
User interfaces created with XUL can be easily skinned, extended, and localized. For example,
you can change the visual theme of your UI or translate it to another language by simply
changing a few text files. Another nice feature is that you can open XUL documents inside
your browser’s content area — exactly as you would open an HTML document. You can even
run your XUL-based application directly from the Internet. This makes creating web applications as easy as creating web pages.
A XUL user interface definition is an XML file that contains the UI elements and their hierarchal structure. For instance, your interface may consist of a window that contains two boxes.
Each box can in turn have any number of child widgets (entry boxes, buttons, labels, and so on).
In the following sections, we create and lay out some simple widgets, and finally create a complete XUL document.
If you want to test the XUL code in the following examples, you can create a file with a .xul
extension and the following contents:
.
.
.
[Your XUL widgets go here]
.
.
.
Chapter 16 — Understanding Mozilla Programming
Once you create the file and insert some XUL elements, you can open it in Firefox using File ➪
Open File. The align=”start” part makes sure your XUL widgets are shown correctly when
opened inside the browser window.
XUL Widgets
The basic element of a XUL document is a widget. Buttons, text boxes, menu items, and so on
are all widgets. A widget is created by inserting an appropriate element into your XUL document. The attributes of this element determine the various properties of your widget. For
example, the following defines a simple button: