Chapter 2: Technologies used in developing extensions


Esta p√°gina no est√° completa.

This document was authored by Hiroshi Shimoda of Clear Code Inc. and was originally published in Japanese for the Firefox Developers Conference Summer 2007. Shimoda-san is a co-author of Firefox 3 Hacks (O'Reilly Japan, 2008).

Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.

Tecnologías utilizadas para desarrollar extensiones para Firefox

Firefox y sus extensiones est√°n ambos basados en el desarrollo con tecnolog√≠as ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas p√°ginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, T√ļ probablemente lo encontrar√°s relativamente f√°cil desarrollar una extensi√≥n para Firefox.

El rol de cada tecnología

Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.

Figure 1: rol de cada tecnología en firefox.

En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el Capítulo 5.

Conocimientos b√°sicos requeridos

En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.
Para más información sobre estas tecnologías, por favor consulte otras fuentes.

XML: A text-based structural language

 XML, siglas en ingl√©s de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gram√°tica de lenguajes espec√≠ficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo √ļtil cuando varias aplicaciones se deben comunicar entre s√≠ o integrar informaci√≥n. (Bases de datos Silberschatz).

Listing 1: XML syntax

<elementname someattribute="somevalue">

As shown in Listing 1, XML uses elements, which consist of an opening tag, a closing tag, and content.

Note: Elements that take no content can be expressed in compact form as <elementname/>.

An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.

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 "" ; for SVG is it "".

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; it 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 can be reused better than it is when structural and stylistic markup are both embedded in HTML.

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

Listing 2: 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 (Asynchronous JavaScript and XML); 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 3, 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 3.5 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use JavaScript 1.7 and JavaScript 1.8.

Listing 3: 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();

DOM: An API for manipulating XML documents

The Document Object Model (DOM) 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.

In addition, XUL lacks any equivalent for the innerHTML property, so if it weren’t for the DOM, dynamic processing would be impossible.

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 4 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 MDC documentation.

Listing 4: An example manipulation using the DOM

var bar = document.getElementById('toolbar');
bar.lastChild.setAttribute('label', 'Hello!');