Chapitre 2: Technologies utilisées dans le développement des extensions

Brouillon
Cette page n'est pas terminée.

Ce document a été rédigé par Hideyuki Emura et a été initialement publié en japonais pour le Firefox Developers Conference Summer 2007. Emura-san est un co-auteur de Firefox 3 Hacks (O'Reilly Japan, 2008.)

Avant de nous plonger dans une explication détaillée, nous allons présenter rapidement les technologies utilisées pour développer des extensions pour Firefox. Nous examinerons également le minimum de connaissances dont vous aurez besoin afin de développer pour Firefox.

Technologies utilisées dans le développement d'extensions pour Firefox

Firefox et ses extensions sont toutes deux basées et développés avec les technologies couramment utilisées sur le web. Sa structure est semblable à celle des applications HTML utilisés par certaines pages web ou sur Windows. Si vous avez eu une expérience de développement avec HTML dynamique, vous trouverez sans doute relativement facile à réutiliser les connaissances dont vous aurez besoin pour développer des extensions de Firefox.

Le rôle de chaque technologie

Firefox est en grande partie construit en utilisant quatre technologies: XUL, CSS, JavaScript, et XPCOM. Les extensions sont également construites en utilisant ces quatre technologies.

Figure 1: rôle de chaque technologie dans Firefox

En plus de ces technologies, le développement de l'extension va vous obliger à apprendre la façon d'accorder des privilèges et à surmonter les restrictions de sécurité sur le code que vous écrivez, et comment intégrer votre code dans l'interface utilisateur de Firefox. Ces questions sont abordées dans le Chapitre 5.

Les connaissances minimales requises

Dans un souci de concision, je vais omettre les explications sur les technologies largement comprises, et me concentrer plutôt sur ​​l'introduction de nouvelles technologies, que vous aurez besoin de comprendre afin de développer pour Firefox. Je vais supposer que vous avez une expérience de développement avec le HTML dynamique, ainsi que les sujets ci-dessous. Pour plus d'informations sur ces technologies, s'il vous plaît se référer à d'autres sources.

XML: Un langage structural à base de texte

Extensible Markup Language (XML) est un méta-langage exprimant des différents types de données. Il a été précisé en 1998 par le W3C, l'organisme qui établit des normes pour les technologies liées à Internet. Il a un certain nombre de qualités utiles: il est générique, extensible et facile à valider ainsi formé.

Quelques exemples de langages de balisage XML comprennent le XHTML, qui est du HTML redéfinie sur une base XML, SVG, pour exprimer des images vectorielles et MathML, pour exprimer des formules mathématiques. XUL, qui est utilisé dans Firefox, est également basée sur le langage XML.

Listing 1: syntaxe XML

<elementname someattribute="somevalue">
  content
</elementname>

Comme le montre le listing 1, XML utilise des éléments, qui consistent en une balise ouvrante, une balise de fermeture et le contenu.

Note: Les éléments qui ne prennent pas de contenu peuvent être exprimées sous une forme compacte comme <elementname/>.

Un élément peut inclure d'autres éléments ainsi que du texte dans son contenu, et toute l'information est structuré comme un arbre. Comme dans tous les arbres, les éléments peuvent avoir des enfants (éléments contenus dans eux) et les parents (les éléments qui les contiennent). Les attributs peuvent également être ajoutés à des balises d'ouverture, d'une valeur.

Comme la partie "extensible" de XML l'implique, des éléments provenant de divers langages basés sur XML comme XHTML et SVG peuvent être intercalées dans d'autre comme un moyen d'étendre le langage. Tous les éléments peuvent mener à un "espace de noms URI" identificateur qui est unique pour chaque langue. Par exemple, même si XHTML et SVG ont des éléments avec le même nom, ils peuvent être distingués. L'URI de l'espace de noms XHTML est "http://www.w3.org/1999/xhtml" ; et pour SVG "http://www.w3.org/2000/svg".

CSS: Un langage de style pour modifier l'affichage de documents XML

Comme XML, Cascading Style Sheets (CSS) est une spécification technique établie par le W3C, c'est un langage de style de description qui définie l'affichage des données marqués en XML et HTML. Comme le montre le listing 2, il a une syntaxe très simple. En séparant la structure des données, exprimées à travers HTML ou XML, et le style d'affichage, indiqués par le CSS, les données peuvent être réutilisées mieux que dans un balisage structurel et stylistiques comme intégré dans le HTML.

Il ya trois spécifications CSS (niveau 1 au niveau 3), avec des fonctionnalités puissantes progressivement. Le moteur de rendu Gecko gère la quasi-totalité de CSS niveau 2 et quelques-uns des CSS niveau 3.

Listing 2: exemple de code CSS

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

JavaScript: le langage le plus incompris du monde

JavaScript est un langage de script d'abord développé dans les années 1990, époque à laquelle il a été créé comme un moyen d'ajouter des fonctions dynamiques pour les pages web. Parce qu'il a souvent été utilisé dans un premier temps pour afficher des fenêtres pop-up, marquer du texte dans les barres d'état, ou par d'autres moyens qui ont rendu des pages web moins utile pour les utilisateurs, la langue a acquis une réputation d'ayant peu d'utilité pratique et manquant de fonctionnalités.

Aussi, parce qu'une série de failles de sécurité ont été découvertes en JavaScript et la technologie compatible JScript, il y avait une réticence initiale à utiliser JavaScript.

Néanmoins, le développement des services web comme Google Maps, qui permet d'activer JavaScript et les communications asynchrones, a créé une prise de conscience d'un ensemble de technologies surnommé AJAX (Asynchronous JavaScript and XML), que l'avènement d'un certain nombre de bibliothèques qui sont passées sur les différences d'implémentation des différents navigateurs Web a récemment conduit à une réévaluation de JavaScript comme langage de programmation.

JavaScript est un langage orienté objet basé sur un prototype, et comme dans le Listing 3, permet également des définitions de classe indépendants. Il n'a pas typage strict comme Java, ce qui rend extrêmement flexible et qui lui donne des qualités qui à certains égards peut être considéré comme similaire à Lisp.

Firefox 3.5 comprend un certain nombre d'extensions à la spécification normalisée dans ECMAScript 3e édition, et peut utiliser JavaScript 1.7 et JavaScript 1.8.

Listing 3: Un exemple d'une définition de classe en JavaScript

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

DOM: Une API permettant de manipuler des documents XML

Le Document Object Model (DOM) est une norme technique promulguée par le W3C, et une API permettant de manipuler le contenu de documents XML en tant qu'objets. Dans les approches HTML dynamiques, la méthode classique consistait à utiliser la propriété innerHTML du nœud d'élément HTML pour modifier dynamiquement le contenu du document HTML par la manipulation des chaînes, mais l'utilisation du DOM permet de manipuler des documents XML d'une manière qui correspond mieux à la nature orientée objet de JavaScript.

En outre, XUL n'a pas d'équivalent pour la propriété innerHTML, si ce n'était pour les DOM, le traitement dynamique serait impossible.

Il ya un certain nombre de niveaux pour le DOM avec différents niveaux de fonctionnalité. Gecko supporte presque tous les DOM niveau 2 et quelques-uns des DOM niveau 3.

Avec les DOM, le contenu d'un document XML sont traités comme un "arbre DOM," une collection de nœuds d'élément et d'autres nœuds. Listing 4 montre un exemple qui supprime le deuxième élément enfant de l'élément avec l'id "de la barre d'outils", ajoute un nouvel élément de bouton comme un substitut, et définit un attribut label.

Nous n'entrons pas dans les détails des différentes API dans les DOM. Pour en savoir plus sur le DOM, s'il vous plaît jeter un oeil à la documentation MDC.

Listing 4: Un exemple de manipulation, en utilisant le DOM

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

Pièces jointes

Fichier Taille Date Joint par
chap2_fig1.png
161410 octets 2009-09-03 14:33:13 GiulianT
Half-and-Full-SWITCHED.txt
203 octets 2012-06-23 03:00:59 mrento

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : GuibertVince
Dernière mise à jour par : GuibertVince,