Chapter 2: Technologies used in developing extensions

  • Revision slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions
  • Revision title: Chapter 2: Technologies used in developing extensions
  • Revision id: 97683
  • Created:
  • Creator: Lebedel.delphine
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ Fx_minversion_header("3") }} {{ Draft() }}

Before we dive into a thorough explanation, we will pass quickly over the technologies used to develop Firefox extensions. We will also look at the minimum knowledge required to develop for Firefox.

Technologies used to develop Firefox extensions

Firefox and its extensions are both based on and developed with technologies widely used on the web. Its structure is similar to that of the dynamic HTML used on some web pages, or the HTML Applications used on Windows. If you’ve had experience developing with dynamic HTML, you’ll probably find it relatively easy to pick up the knowledge you’ll need to develop Firefox extensions.

The role of each technology

Firefox is largely built using four technologies: XUL, CSS, Javascript, and XPCOM. Extensions are also built using these four technologies. Figure 1 shows the role that each of them plays in Firefox and in extensions.

In addition to these technologies, extension development will require you to learn about how to confer privileges to overcome security restrictions on code that you write, and how to embed your code into the Firefox UI. These issues are discussed in Chapter 5.

The minimum knowledge required

In the interest of brevity, I will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for Firefox. I will assume that you have experience developing with dynamic HTML, and the following discussions take as a prerequisite some practice with it. For more information on these technologies, please refer to other sources.

• XML coding
• CSS coding
• Basic JavaScript syntax
• An overview of object-oriented programming

XML: A text-based structural language

Extensible Markup Language (XML) is a meta-language for expressing various kinds of data. It was specified in 1998 by W3C, the organization that sets standards for web-related technologies FIXME:note 1. It has a number of useful qualities: it is generic, extensible, and easy to validate as well-formed.

Some examples of XML-based markup languages XHTML, which is HTML redefined on an XML base; SVG, for expressing vector images; and MathML, for expressing mathematical formulas. XUL, which is used in Firefox, is also based on XML.

As shown in Figure 2, XML uses elements, which consist of an opening tag, a closing tag, and content FIXME:note 2; an element can include other elements as well as text in its content FIXME:note 3, and all information is structured as a tree. Attributes can also be added with values to opening tags.

As the “extensible” part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a “namespace URI” identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is http://www.w3.org/1999/xhtml ; for SVG is it http://www.w3.org/2000/svg .

CSS: A style language to alter the display of XML documents

Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C FIXME:note 4, and is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data re-use better than it is when structural and stylistic markup are both embedded in HTML.

There are three CSS specifications (Level 1–Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.

Listing 1: CSS code sample

|body {
|color: black;
|background-color: white;
|}
|p{
|margin-bottom: 1em;
|text-indent: 1em;
|}

JavaScript: The world’s most misunderstood language

JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.

Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed Ajax; that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.

JavaScript is a prototype-based object-oriented language, and as shown in Listing 2, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.

Firefox 2 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use JavaScript 1.7.

Listing 2: An example of a class definition in JavaScript

|function MyClass() {
|}
|MyClass.prototype = {
|property1 : true,
|property2 : 'string',
|method : function() {
|alert('Hello, world!');
|}
|};
|var obj = new MyClass();
|obj.method();

DOM: An API for manipulating XML documents

The Document Object Model (DOM) FIXME:note 5 is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript’s object-oriented nature FIXME:note 6.

There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.

With the DOM, the contents of an XML document are handled as a “DOM tree,” a collection of element nodes and other nodes. Listing 3 shows an example that deletes the second child element of the element with the “toolbar” id, adds a new button element as a substitute, and sets a label attribute.

We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the documents at the Mozilla Developer Center (MDC) FIXME:note 7 and the W3C.

Listing 3: An example manipulation using the DOM

|var bar = document.getElementById('toolbar');
|bar.removeChild(bar.childNodes[1]);
|bar.appendChild(document.createElement('button'));
|bar.lastChild.setAttribute('label', 'Hello!');

[figure]

CSS: defines appearance (skin)

Javascript: controls and moves everything (muscle)

XUL: forms structure and framework (skeleton)

XPCOM: “black box” providing special functions (brain_

[/figure]

Figure 1: Role of each technology

 

[figure]

element

opening tag

closing tag

element name

attribute

value

content

[/figure]

Figure 2: Parts of an XML element

 

FIXME:Notes:
2 Elements that take no content can be expressed in compact form as <elementname/>
3 These elements are referred to as parent elements and child elements.
6 Beyond that, XUL lacks any equivalent for the innerHTML property, so if it weren’t for the DOM, dynamic processing would be impossible.

 

Revision Source

<p><font size="3"><font color="#000000">{{ Fx_minversion_header("3") }} {{ Draft() }}</font></font></p>
<p>Before we dive into a thorough explanation, we will pass quickly over the technologies used to develop Firefox extensions. We will also look at the minimum knowledge required to develop for Firefox.</p>
<h2>Technologies used to develop Firefox extensions</h2>
<p>Firefox and its extensions are both based on and developed with technologies widely used on the web. Its structure is similar to that of the dynamic HTML used on some web pages, or the HTML Applications used on Windows. If you’ve had experience developing with dynamic HTML, you’ll probably find it relatively easy to pick up the knowledge you’ll need to develop Firefox extensions.</p>
<h2>The role of each technology</h2>
<p>Firefox is largely built using four technologies: XUL, CSS, Javascript, and XPCOM. Extensions are also built using these four technologies. Figure 1 shows the role that each of them plays in Firefox and in extensions.</p>
<p>In addition to these technologies, extension development will require you to learn about how to confer privileges to overcome security restrictions on code that you write, and how to embed your code into the Firefox UI. These issues are discussed in Chapter 5.</p>
<h2>The minimum knowledge required</h2>
<p>In the interest of brevity, I will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for Firefox. I will assume that you have experience developing with dynamic HTML, and the following discussions take as a prerequisite some practice with it. For more information on these technologies, please refer to other sources.</p>
<p style="text-align: left; margin-left: 40px;">• XML coding<br>
• CSS coding<br>
• Basic JavaScript syntax<br>
• An overview of object-oriented programming</p>
<h3>XML: A text-based structural language</h3>
<p>Extensible Markup Language (XML) is a meta-language for expressing various kinds of data. It was specified in 1998 by W3C, the organization that sets standards for web-related technologies FIXME:note 1. It has a number of useful qualities: it is generic, extensible, and easy to validate as well-formed.</p>
<p>Some examples of XML-based markup languages XHTML, which is HTML redefined on an XML base; SVG, for expressing vector images; and MathML, for expressing mathematical formulas. XUL, which is used in Firefox, is also based on XML.</p>
<p>As shown in Figure 2, XML uses elements, which consist of an opening tag, a closing tag, and content FIXME:note 2; an element can include other elements as well as text in its content FIXME:note 3, and all information is structured as a tree. Attributes can also be added with values to opening tags.</p>
<p>As the “extensible” part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a “namespace URI” identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is <a class=" external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a> ; for SVG is it <a class=" external" href="http://www.w3.org/2000/svg" rel="freelink">http://www.w3.org/2000/svg</a> .</p>
<h3>CSS: A style language to alter the display of XML documents</h3>
<p>Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C FIXME:note 4, and is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data re-use better than it is when structural and stylistic markup are both embedded in HTML.</p>
<p>There are three CSS specifications (Level 1–Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.</p>
<p>Listing 1: CSS code sample</p>
<p style="margin-left: 40px;">|body {<br>
|color: black;<br>
|background-color: white;<br>
|}<br>
|p{<br>
|margin-bottom: 1em;<br>
|text-indent: 1em;<br>
|}</p>
<h3>JavaScript: The world’s most misunderstood language</h3>
<p>JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.</p>
<p>Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.</p>
<p>Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed Ajax; that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.</p>
<p>JavaScript is a prototype-based object-oriented language, and as shown in Listing 2, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.</p>
<p>Firefox 2 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use JavaScript 1.7.</p>
<p>Listing 2: An example of a class definition in JavaScript</p>
<p style="margin-left: 40px;">|function MyClass() {<br>
|}<br>
|MyClass.prototype = {<br>
|property1 : true,<br>
|property2 : 'string',<br>
|method : function() {<br>
|alert('Hello, world!');<br>
|}<br>
|};<br>
|var obj = new MyClass();<br>
|obj.method();</p>
<h3>DOM: An API for manipulating XML documents</h3>
<p>The Document Object Model (DOM) FIXME:note 5 is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript’s object-oriented nature FIXME:note 6.</p>
<p>There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.</p>
<p>With the DOM, the contents of an XML document are handled as a “DOM tree,” a collection of element nodes and other nodes. Listing 3 shows an example that deletes the second child element of the element with the “toolbar” id, adds a new button element as a substitute, and sets a label attribute.</p>
<p>We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the documents at the Mozilla Developer Center (MDC) FIXME:note 7 and the W3C.</p>
<p>Listing 3: An example manipulation using the DOM</p>
<p style="margin-left: 40px;">|var bar = document.getElementById('toolbar');<br>
|bar.removeChild(bar.childNodes[1]);<br>
|bar.appendChild(document.createElement('button'));<br>
|bar.lastChild.setAttribute('label', 'Hello!');</p>
<p>[figure]</p>
<p>CSS: defines appearance (skin)</p>
<p>Javascript: controls and moves everything (muscle)</p>
<p>XUL: forms structure and framework (skeleton)</p>
<p>XPCOM: “black box” providing special functions (brain_</p>
<p>[/figure]</p>
<p>Figure 1: Role of each technology</p>
<p> </p>
<p>[figure]</p>
<p>element</p>
<p>opening tag</p>
<p>closing tag</p>
<p>element name</p>
<p>attribute</p>
<p>value</p>
<p>content</p>
<p>[/figure]</p>
<p>Figure 2: Parts of an XML element</p>
<p> </p>
<div class="note">FIXME:Notes:</div>
<div class="note">1 <a class=" external" href="http://www.w3.org/TR/REC-xml/" rel="freelink">http://www.w3.org/TR/REC-xml/</a></div>
<div class="note">2 Elements that take no content can be expressed in compact form as &lt;elementname/&gt;</div>
<div class="note">3 These elements are referred to as parent elements and child elements.</div>
<div class="note">4 <a class=" external" href="http://www.w3.org/Style/CSS/" rel="freelink">http://www.w3.org/Style/CSS/</a></div>
<div class="note">5 <a class=" external" href="http://www.w3.org/DOM/" rel="freelink">http://www.w3.org/DOM/</a></div>
<div class="note">6 Beyond that, XUL lacks any equivalent for the innerHTML property, so if it weren’t for the DOM, dynamic processing would be impossible.</div>
<div class="note">7 <a class=" external" href="http://developer.mozilla.org/en/docs/DOM" rel="freelink">http://developer.mozilla.org/en/docs/DOM</a></div>
<p> </p>
Revert to this revision