Construire une extension

  • Raccourci de la révision : Construire_une_extension
  • Titre de la révision : Construire une extension
  • ID de la révision : 122077
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire /* Introduction */

Contenu de la révision

Introduction

Ce tutoriel va vous présenter les étapes requises pour construire une extension très basique, qui ajoute un bouton contenant le texte « Salut tout le monde ! » à la Barre d'état du navigateur Firefox.

Note : Ce tutoriel traite de la construction d'extensions pour Firefox 1.5. D'autres tutoriaux existent pour construire des extensions destinées à des versions plus anciennes de Firefox.

Configurer l'environnement de développement

Les extensions sont packagées et distribuées dans des fichiers ZIP avec l'extension <tt>xpi</tt> (prononcé “zippy”). Le contenu d'un fichier XPI s'arrange de la manière suivante :

extension.xpi:
              /chrome/
              /chrome/chromeFiles/
              /chrome/chromeFiles/content/
              /components/
              /defaults/
              /defaults/preferences/
              chrome.manifest
              install.rdf

Par conséquent, il est plus facile de disposer vos fichiers sources avec une méthode similaire, à moins que vous ne vouliez écrire quelque Makefile ou script shell pour packager et zipper tous vos fichiers. Même si savez faire cela, les tests sont plus simples si vous arrangez vos fichiers de cette manière à cause d'une particularité du système d'ajout de Firefox 1.5.

Bien, commençons. Créez un dossier pour votre extension quelque part sur votre disque dur, par exemple <tt>c:\extensions\myExtension\</tt>. Dans celui-ci, créez un autre dossier nommé <tt>chrome</tt>, à l'intérieur du dossier <tt>chrome</tt> créez un dossier nommé <tt>chromeFiles</tt> et dans ce dernier, créez un dossier nommé <tt>content</tt>.

A la racine du dossier de votre extension, au même niveau que le dossier <tt>chrome</tt>, créez deux nouveaux fichiers texte vides, l'un appelé <tt>chrome.manifest</tt> et l'autre appelé <tt>install.rdf</tt>.

Créer le manifeste d'installation

Ouvrez le fichier nommé <tt>install.rdf</tt> que vous avez créé au premier niveau de la hiérarchie de dossiers de votre extension, et placez ceci à l'intérieur :

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>sample@foo.net</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
   
    <!-- L'application cible de votre extension, 
         avec les versions minimums et maximums supportées. --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.0+</em:minVersion>
        <em:maxVersion>1.5</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>Exemple !</em:name>
    <em:description>Une extension test</em:description>
    <em:creator>Votre nom ici</em:creator>
    <em:homepageURL>http://www.foo.com/</em:homepageURL>
  </Description>      
</RDF>

sample@foo.net - L'ID de votre extension. C'est une valeur que vous inventez pour identifier votre extension dans un format d'adresse email. Il faut qu'il soit unique. Vous pouvez également utiliser un GUID.

{ec8030f7-c20a-464f-9b0e-13a3a9e97384} - L'ID de l'application Firefox.

1.0+ - la version minimum de Firefox avec laquelle votre extension fonctionnera. C'est la version minimum avec laquelle vous vous engagez à tester et fixer les bogues.

1.5 - La version maximum de Firefox avec laquelle votre extension fonctionnera. Elle ne doit pas être supérieure à la dernière version courante !

Voir les manifestes d'installation pour une liste complète des propriétés requises et optionnelles.

Sauvegardez le fichier.

Modifier le navigateur avec XUL

L'interface utilisateur de Firefox est écrite en XUL et Javascript. le XUL est une grammaire XML qui fournit des éléments d'interface comme des boutons, des menus, des barres d'outils, des arbres, etc. Les actions utilisateur sont liées à des fonctionnalités utilisant Javascript.

Pour modifier le navigateur, nous remanions des parties de l'interface utilisateur (IU) du navigateur en en ajoutant ou modifiant des éléments. Nous ajoutons des éléments en insérant de nouveaux éléments DOM XUL dans la fenêtre du navigateur, et nous les modifions en utilisant des scripts et en attachant des gestionnaires d'événements.

Le navigateur est implémenté dans un fichier XUL nommé <tt>browser.xul</tt>. Dans browser.xul, nous pouvons trouver la barre d'état, qui ressemble à quelque chose de ce genre :

<statusbar id="status-bar">
 ... <statusbarpanel>s ...
</statusbar>

<tt><statusbar id="status-bar"></tt> est un "point de fusion" pour un overlay XUL.

Les overlays XUL

Les overlays XUL sont un moyen d'attacher d'autres éléments d'IU à un document XUL au moment de l'exécution. Un overlay XUL est un fichier .xul qui spécifie des fragments de XUL à insérer dans des points de fusion spécifiques au sein d'un document "maître". Ces fragments peuvent spécifier des élements d'interface à insérer, supprimer ou modifier.

Exemple de document overlay XUL

<?xml version="1.0"?>
<overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Salut, le monde"/>
 </statusbar>
</overlay>

Le <tt><statusbar></tt> nommé <tt>status-bar</tt> spécifie le "point de fusion" auquel nous voulons nous fixer, au sein de la fenêtre du navigateur.

L'enfant <tt><statusbarpanel></tt> est un nouvel élément d'interface qui nous voulons insérer au sein du point de fusion.

Prenez l'exemple de code ci-dessus et enregistrez le dans un fichier nommé <tt>exemple.xul</tt> dans le dossier <tt>chrome/chromeFiles/content</tt> que vous avez créé.

Voir plus bas pour plus d'informations au sujet de la fusion d'éléments d'interface et de la modification d'interface utilisateur en utilisant des overlays.

les URI chrome

Les fichiers XUL font parti des "packages chrome" - ensemble de composants d'interface utilisateur qui sont chargés via des URI <tt>chrome://</tt>. Plutôt que de charger le navigateur à partir du disque en utilisant les URI <tt>file://</tt> (depuis que la localisation de Firefox sur le système peut changer selon les plateformes et les systèmes), les développeurs Mozilla ont trouvé une solution pour créer des URI que l'application installée connaît pour le contenu XUL.

Le navigateur est : <tt>chrome://browser/content/browser.xul</tt> Essayez de rentrer cette URL dans la barre d'adresses de Firefox !

Les URI chrome comprennent plusieurs composants :

  • Premièrement, le schéma URI (<tt>chrome</tt>) qui explique à la librarie réseau de Firefox qu'il s'agit d'une URI chrome et que le contenu qui sera chargé doit être manipulé d'une certaine manière.
  • Deuxièmement, un nom de package (dans l'exemple ci-dessus, <tt>browser</tt> qui identifie le paquet de composants d'interface utilisateur). Il doit être aussi spécifique à votre extension que possible, afin d'éviter les collisions entre extensions.
  • Troisièmement, le type de donnée requis. Il y a trois types : <tt>content</tt> (XUL, Javascript, bindings XML XBL, etc., qui forme la structure et le comportement d'une IU d'application), <tt>locale</tt> (DTD, fichiers .properties, etc. qui contiennent les chaînes de caractères pour la localisation de l'IU), et <tt>skin</tt> (CSS et images qui forment le thème de l'IU).
  • Enfin, un nom de fichier à charger.

Donc, <tt>chrome://foo/skin/bar.png</tt> charge le fichier <tt>bar.png</tt> de la section thème <tt>skin</tt> de <tt>foo</tt>.

Quand vous chargez du contenu en utilisant une URI chrome, Firefox utilise le registre chrome pour traduire ces URI dans les fichiers sources actuels sur le disque (ou dans les packages JAR).

Créer un manifeste chrome

Pour plus d'informations sur les manifestes chrome et les propriétés qu'ils supportent, voir la référence sur le manifeste Chrome.

Ouvre le fichier nommé <tt>chrome.manifest</tt> que vous avez créé au même niveau que le répertoire <tt>chrome</tt>, à la racine de la hiérarchie du dossier source de votre extension.

Ajoutez ce code :

content     exemple    chrome/chromeFiles/content/

Ceci spécifie :

  1. le type de données au sein d'un package chrome
  2. le nom du package chrome
  3. l'emplacement des fichiers de package chrome

Donc, cette ligne dit que pour le package chrome exemple, nous pouvons trouver ses fichiers content à l'emplacement <tt>chrome/chromeFiles/content</tt> qui est un chemin relatif à l'emplacement du <tt>chrome.manifest</tt>.

Notez que les fichiers content, locale et skin doivent être maintenus dans des dossiers nommés content, locale et skin au sein de votre sous-répertoire <tt>chrome</tt>.

Enregistrez le fichier. Quand vous lancez Firefox avec votre extension, il enregistrera le package chrome.

Enregistrer un overlay

Vous avez besoin que Firefox fusionne votre overlay avec la fenêtre de navigateur à chaque fois qu'il en affiche une. Donc ajoutez cette ligne à votre fichier <tt>chrome.manifest</tt> :

overlay chrome://browser/content/browser.xul chrome://exemple/content/exemple.xul

Cela explique à Firefox de fusionner <tt>exemple.xul</tt> dans <tt>browser.xul</tt> quand <tt>browser.xul</tt> est chargé.

Test

Tout d'abord, nous devons dire au navigateur comment trouver votre extension. Dans les jours sombres de Firefox 1.0, cela signifiait un empaquetage de l'extension en un XPI et une installation via l'interface utilisateur, ce qui était franchement fastidieux. Maintenant cela est plus simple.

  1. Ouvrez le dossier des profils http://kb.mozillazine.org/Profile_folder (en)
  2. Ouvrez le dossier extensions (ou créez le s'il n'existe pas)
  3. Créez un nouveau fichier texte, et mettez y le chemin vers le dossier de votre extension (i.e. <tt>C:\extensions\myExtension\</tt), ainsi que son nom (i.e. <tt>sample@foo.net</tt>)

Maintenant vous êtes prêt à tester l'extension!

(Re)démarrez Firefox. Firefox détectera le lien textuel vers votre extension, et l'installera. Quand le navigateur apparait, vous devriez voir "Salut, le monde!" dans la barre de status. (En bas a droite.)

Vous pouvez maintenant revenir dans le fichier .xul pour faire d'autre modifications, qui apparaitrons après un redémarage.

Paquetage

Maintenant que votre extension fonctionne, vous pouvez l'empaqueter.

Compressez au format zip le contenu du dossier de votre extension, et renommez le fichier zip pour avoir une extension en .xpi. Sur Windows, vous pouvez facilement faire cela en sélectionnant tous les fichiers et dossiers du dossier de votre extension, clic droit et choisissez "Envoyez vers -> Dossier Compressé". Un fichier .zip sera crée pour vous. Renommez le et c'est terminé.

Maintenant, chargez le .xpi sur votre serveur, en vérifiant qu'il est distribué en tant qu'<tt>application/x-xpinstall</tt>. Vous pouvez faire un lien pour autoriser les personnes intéressées à le télécharger, et l'installer.

Utiliser addons.mozilla.org

Mozilla Update est un site de distribution où vous pouvez héberger vos extensions gratuitement. Votre extension sera conservée sur le site mirroir de Mozilla pour en garantir la disponibilité de téléchargement, même si elle devenai très populaire. Le site propose également aux utilisateurs une facilité d'installation, et distribuera automatiquement les mises à jour. En plus de cela, le site permet les commentaires et le feedback de votre extension. Il est fortement recommandé d'utiliser Mozilla Update pour distribué vos extensions.

Visitez http://addons.mozilla.org/developers/ pour créer un compe et commencer à distribuer vos extensions.

Registering Extensions in the Windows Registry

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See Adding Extensions using the Windows Registry for more information.

More on XUL Overlays

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

  • Modify attributes on the merge point, e.g. <tt><statusbar id="status-bar" hidden="true"/></tt> (hides the status bar)
  • Remove the merge point from the master document, e.g. <tt><statusbar id="status-bar" removeelement="true"/></tt>
  • Control the position of the inserted widgets:
<statusbarpanel position="1" .../>

<statusbarpanel insertbefore="other-id" .../>

<statusbarpanel insertafter="other-id" .../>

Creating New User Interface Components

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.

View the XUL documentation for more resources for XUL developers.

Defaults Files

Defaults files that you use to seed a user's profile with should be placed in <tt>defaults/</tt> under the root of your extension's folder hierarchy. Default preferences .js files should be stored in <tt>defaults/preferences/</tt> - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

XPCOM Components

Firefox supports XPCOM components in extensions. You can implement interfaces easily in JavaScript, or in C++ (using the Gecko SDK: http://wiki.mozilla.org/Gecko:SDK ).

Place all of your .js or .dll files in the <tt>components/</tt> directory - they are automatically registered the first time Firefox runs after your extension is installed.

Localization

To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this as you are developing your extension than to come back and do it later!

To create localizable attribute values in XUL, you put the values in a <tt>.ent</tt> (or a <tt>.dtd</tt>) file, which looks like this:

<!ENTITY  button.label     "Click Me!">
<!ENTITY  button.accesskey "C">

And then include it at the top of your XUL document like so:

<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">

where window is the localName value of the root element of the XUL document, and the value of the <tt>SYSTEM</tt> property is the chrome URI to the entity file.

To use the entities, modify your XUL to look like this:

<button label="&button.label;" accesskey="&button.accesskey;"/>

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

key=value

and then use <tt>nsIStringBundleService</tt>/<tt>nsIStringBundle</tt> or the <tt><stringbundle></tt> tag to load the values into script.

Understanding the Browser

Use the DOM Inspector (not part of the Standard Firefox installation, you must reinstall with the Custom install path and choose Developer Tools if there is not a "DOM Inspector" item in your browser's Tools menu) to inspect the browser window or any other XUL window you want to extend.

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the <tt>load</tt> event fires on the master XUL window.

Debugging Extensions

Analytical Tools for Debugging

  • The DOM Inspector - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)
  • Venkman - set breakpoints in JavaScript and inspect call stacks
  • arguments.callee.caller in JavaScript - access a function's call stack

printf debugging

  • Run an optimized build of Firefox with <tt>-console</tt> at the command line and use dump("string")
  • Use <tt>nsIConsoleService</tt> to log to the Script console

Advanced debugging

  • Run a debug Firefox build and set breakpoints in Firefox itself, or your C++ components. For the experienced developer, this is often the fastest way to diagnose a problem.
{{ wiki.languages( { "de": "de/Erweiterung_erstellen", "en": "en/Building_an_Extension" } ) }}

Source de la révision

<p>
</p>
<h4 name="Introduction"> Introduction </h4>
<p>Ce tutoriel va vous présenter les étapes requises pour construire une extension très basique, qui ajoute un bouton contenant le texte « Salut tout le monde ! » à la Barre d'état du navigateur Firefox.
</p><p><b>Note</b> : Ce tutoriel traite de la construction d'extensions pour Firefox 1.5. D'autres tutoriaux existent pour construire des extensions destinées à des versions plus anciennes de Firefox.
</p>
<h4 name="Configurer_l.27environnement_de_d.C3.A9veloppement"> Configurer l'environnement de développement </h4>
<p>Les extensions sont packagées et distribuées dans des fichiers ZIP avec l'extension <tt>xpi</tt> (<i>prononcé “zippy”</i>). Le contenu d'un fichier XPI s'arrange de la manière suivante :
</p>
<pre class="eval">extension.xpi:
              /chrome/
              /chrome/chromeFiles/
              /chrome/chromeFiles/content/
              /components/
              /defaults/
              /defaults/preferences/
              chrome.manifest
              install.rdf
</pre>
<p>Par conséquent, il est plus facile de disposer vos fichiers sources avec une méthode similaire, à moins que vous ne vouliez écrire quelque Makefile ou script shell pour packager et zipper tous vos fichiers. Même si savez faire cela, les tests sont plus simples si vous arrangez vos fichiers de cette manière à cause d'une particularité du système d'ajout de Firefox 1.5.
</p><p>Bien, commençons. Créez un dossier pour votre extension quelque part sur votre disque dur, par exemple <tt>c:\extensions\myExtension\</tt>. Dans celui-ci, créez un autre dossier nommé <tt>chrome</tt>, à l'intérieur du dossier <tt>chrome</tt> créez un dossier nommé <tt>chromeFiles</tt> et dans ce dernier, créez un dossier nommé <tt>content</tt>. 
</p><p>A la racine du dossier de votre extension, au même niveau que le dossier <tt>chrome</tt>, créez deux nouveaux fichiers texte vides, l'un appelé <tt>chrome.manifest</tt> et l'autre appelé <tt>install.rdf</tt>.
</p>
<h4 name="Cr.C3.A9er_le_manifeste_d.27installation"> Créer le manifeste d'installation </h4>
<p>Ouvrez le fichier nommé <tt><a href="fr/Manifestes_d_installation">install.rdf</a></tt> que vous avez créé au premier niveau de la hiérarchie de dossiers de votre extension, et placez ceci à l'intérieur :
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<b>sample@foo.net</b>&lt;/em:id&gt;
    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;
    &lt;em:type&gt;2&lt;/em:type&gt;
   
    &lt;!-- L'application cible de votre extension, 
         avec les versions minimums et maximums supportées. --&gt; 
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<b>1.0+</b>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<b>1.5</b>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
   
    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;<b>Exemple !</b>&lt;/em:name&gt;
    &lt;em:description&gt;<b>Une extension test</b>&lt;/em:description&gt;
    &lt;em:creator&gt;<b>Votre nom ici</b>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<b>http://www.foo.com/</b>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<p><b>sample@foo.net</b> - L'ID de votre extension. C'est une valeur que vous inventez pour identifier votre extension dans un format d'adresse email. Il faut qu'il soit unique. Vous pouvez également utiliser un GUID. 
</p><p><b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - L'ID de l'application Firefox.
</p><p><b>1.0+</b> - la version minimum de Firefox avec laquelle votre extension fonctionnera. C'est la version minimum avec laquelle vous vous engagez à tester et fixer les bogues.
</p><p><b>1.5</b> - La version maximum de Firefox avec laquelle votre extension fonctionnera. Elle ne doit pas être supérieure à la dernière version courante !
</p><p>Voir <a href="fr/Manifestes_d_installation">les manifestes d'installation</a> pour une liste complète des propriétés requises et optionnelles.
</p><p>Sauvegardez le fichier.
</p>
<h4 name="Modifier_le_navigateur_avec_XUL"> Modifier le navigateur avec XUL </h4>
<p>L'interface utilisateur de Firefox est écrite en XUL et Javascript. le <a href="fr/XUL">XUL</a> est une grammaire XML qui fournit des éléments d'interface comme des boutons, des menus, des barres d'outils, des arbres, etc. Les actions utilisateur sont liées à des fonctionnalités utilisant Javascript.
</p><p>Pour modifier le navigateur, nous remanions des parties de l'interface utilisateur (IU) du navigateur en en ajoutant ou modifiant des éléments. Nous ajoutons des éléments en insérant de nouveaux éléments DOM XUL dans la fenêtre du navigateur, et nous les modifions en utilisant des scripts et en attachant des gestionnaires d'événements.
</p><p>Le navigateur est implémenté dans un fichier XUL nommé <tt>browser.xul</tt>. Dans browser.xul, nous pouvons trouver la barre d'état, qui ressemble à quelque chose de ce genre :
</p>
<pre class="eval">&lt;statusbar id="status-bar"&gt;
 ... &lt;statusbarpanel&gt;s ...
&lt;/statusbar&gt;
</pre>
<p><tt>&lt;statusbar id="status-bar"&gt;</tt> est un "point de fusion" pour un overlay XUL.
</p>
<h5 name="Les_overlays_XUL"> Les overlays XUL </h5>
<p>Les overlays XUL sont un moyen d'attacher d'autres éléments d'IU à un document XUL au moment de l'exécution. Un overlay XUL est un fichier .xul qui spécifie des fragments de XUL à insérer dans des points de fusion spécifiques au sein d'un document "maître". Ces fragments peuvent spécifier des élements d'interface à insérer, supprimer ou modifier.
</p><p><b>Exemple de document overlay XUL</b>
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
 &lt;statusbar id="<b>status-bar</b>"&gt;
  &lt;statusbarpanel id="my-panel" label="Salut, le monde"/&gt;
 &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>Le <tt>&lt;statusbar&gt;</tt> nommé <tt><b>status-bar</b></tt> spécifie le "point de fusion" auquel nous voulons nous fixer, au sein de la fenêtre du navigateur.
</p><p>L'enfant <tt>&lt;statusbarpanel&gt;</tt> est un nouvel élément d'interface qui nous voulons insérer au sein du point de fusion.
</p><p>Prenez l'exemple de code ci-dessus et enregistrez le dans un fichier nommé  <tt><b>exemple.xul</b></tt> dans le dossier <tt>chrome/chromeFiles/content</tt> que vous avez créé.
</p><p>Voir plus bas pour plus d'informations au sujet de la fusion d'éléments d'interface et de la modification d'interface utilisateur en utilisant des overlays.
</p>
<h4 name="les_URI_chrome"> les URI chrome </h4>
<p>Les fichiers XUL font parti des "packages chrome" - ensemble de composants d'interface utilisateur qui sont chargés via des URI <tt>chrome://</tt>. Plutôt que de charger le navigateur à partir du disque en utilisant les URI <tt>file://</tt> (depuis que la localisation de Firefox sur le système peut changer selon les plateformes et les systèmes), les développeurs Mozilla ont trouvé une solution pour créer des URI que l'application installée connaît pour le contenu XUL.
</p><p>Le navigateur est : <tt>chrome://browser/content/browser.xul</tt> Essayez de rentrer cette URL dans la barre d'adresses de Firefox !
</p><p>Les URI chrome comprennent plusieurs composants :
</p>
<ul><li> Premièrement, le <b>schéma URI</b> (<tt>chrome</tt>) qui explique à la librarie réseau de Firefox qu'il s'agit d'une URI chrome et que le contenu qui sera chargé doit être manipulé d'une certaine manière.
</li><li> Deuxièmement, un nom de package (dans l'exemple ci-dessus, <tt><b>browser</b></tt> qui identifie le paquet de composants d'interface utilisateur). Il doit être aussi spécifique à votre extension que possible, afin d'éviter les collisions entre extensions.
</li><li> Troisièmement, le type de donnée requis. Il y a trois types : <tt>content</tt> (XUL, Javascript, bindings XML XBL, etc., qui forme la structure et le comportement d'une IU d'application), <tt>locale</tt> (DTD, fichiers .properties, etc. qui contiennent les chaînes de caractères pour la localisation de l'IU), et <tt>skin</tt> (CSS et images qui forment le thème de l'IU).
</li><li> Enfin, un nom de fichier à charger.
</li></ul>
<p>Donc, <tt>chrome://foo/skin/bar.png</tt> charge le fichier <tt>bar.png</tt> de la section thème <tt>skin</tt> de <tt>foo</tt>. 
</p><p>Quand vous chargez du contenu en utilisant une URI chrome, Firefox utilise le registre chrome pour traduire ces URI dans les fichiers sources actuels sur le disque (ou dans les packages JAR).
</p>
<h4 name="Cr.C3.A9er_un_manifeste_chrome"> Créer un manifeste chrome </h4>
<p>Pour plus d'informations sur les manifestes chrome et les propriétés qu'ils supportent, voir la référence sur le <a href="fr/Enregistrement_chrome">manifeste Chrome</a>.
</p><p>Ouvre le fichier nommé <tt><b>chrome.manifest</b></tt> que vous avez créé au même niveau que le répertoire <tt>chrome</tt>, à la racine de la hiérarchie du dossier source de votre extension.
</p><p>Ajoutez ce code :
</p>
<pre class="eval">content     exemple    chrome/chromeFiles/content/
</pre>
<p>Ceci spécifie :
</p>
<ol><li> le type de données au sein d'un package chrome
</li><li> le nom du package chrome
</li><li> l'emplacement des fichiers de package chrome
</li></ol>
<p>Donc, cette ligne dit que pour le package chrome <b>exemple</b>, nous pouvons trouver ses fichiers <b>content</b> à l'emplacement <tt>chrome/chromeFiles/content</tt> qui est un chemin relatif à l'emplacement du <tt>chrome.manifest</tt>. 
</p><p>Notez que les fichiers content, locale et skin doivent être maintenus dans des dossiers nommés content, locale et skin au sein de votre sous-répertoire <tt>chrome</tt>.
</p><p>Enregistrez le fichier. Quand vous lancez Firefox avec votre extension, il enregistrera le package chrome.
</p>
<h4 name="Enregistrer_un_overlay"> Enregistrer un overlay </h4>
<p>Vous avez besoin que Firefox fusionne votre overlay avec la fenêtre de navigateur à chaque fois qu'il en affiche une. Donc ajoutez cette ligne à votre fichier <tt>chrome.manifest</tt> :
</p>
<pre class="eval">overlay chrome://browser/content/browser.xul chrome://exemple/content/exemple.xul
</pre>
<p>Cela explique à Firefox de fusionner <tt>exemple.xul</tt> dans <tt>browser.xul</tt> quand <tt>browser.xul</tt> est chargé.
</p>
<h4 name="Test"> Test </h4>
<p>Tout d'abord, nous devons dire au navigateur comment trouver votre extension. Dans les jours sombres de Firefox 1.0, cela signifiait un empaquetage de l'extension en un XPI et une installation via l'interface utilisateur, ce qui était franchement fastidieux. Maintenant cela est plus simple.
</p>
<ol><li> Ouvrez le dossier des profils http://kb.mozillazine.org/Profile_folder (en)
</li><li> Ouvrez le dossier <b>extensions</b> (ou créez le s'il n'existe pas)
</li><li> Créez un nouveau fichier texte, et mettez y le chemin vers le dossier de votre extension (i.e. <tt>C:\extensions\myExtension\&lt;/tt), ainsi que son nom (i.e. &lt;tt&gt;sample@foo.net</tt>)
</li></ol>
<p>Maintenant vous êtes prêt à tester l'extension!
</p><p>(Re)démarrez Firefox. Firefox détectera le lien textuel vers votre extension, et l'installera. Quand le navigateur apparait, vous devriez voir "Salut, le monde!" dans la barre de status. (En bas a droite.)
</p><p>Vous pouvez maintenant revenir dans le fichier .xul pour faire d'autre modifications, qui apparaitrons après un redémarage.
</p>
<h4 name="Paquetage"> Paquetage </h4>
<p>Maintenant que votre extension fonctionne, vous pouvez l'empaqueter.
</p><p>Compressez au format zip le contenu du dossier de votre extension, et renommez le fichier zip pour avoir une extension en .xpi. Sur Windows, vous pouvez facilement faire cela en sélectionnant tous les fichiers et dossiers du dossier de votre extension, clic droit et choisissez "Envoyez vers -&gt; Dossier Compressé". Un fichier .zip sera crée pour vous. Renommez le et c'est terminé.
</p><p>Maintenant, chargez le .xpi sur votre serveur, en vérifiant qu'il est distribué en tant qu'<tt>application/x-xpinstall</tt>. Vous pouvez faire un lien pour autoriser les personnes intéressées à le télécharger, et l'installer.
</p>
<h5 name="Utiliser_addons.mozilla.org"> Utiliser addons.mozilla.org </h5>
<p>Mozilla Update est un site de distribution où vous pouvez héberger vos extensions gratuitement. Votre extension sera conservée sur le site mirroir de Mozilla pour en garantir la disponibilité de téléchargement, même si elle devenai très populaire. Le site propose également aux utilisateurs une facilité d'installation, et distribuera automatiquement les mises à jour. En plus de cela, le site permet les commentaires et le feedback de votre extension. Il est fortement recommandé d'utiliser Mozilla Update pour distribué vos extensions.
</p><p>Visitez http://addons.mozilla.org/developers/ pour créer un compe et commencer à distribuer vos extensions. 
</p>
<h5 name="Registering_Extensions_in_the_Windows_Registry"> Registering Extensions in the Windows Registry </h5>
<p>On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See <a href="fr/Adding_Extensions_using_the_Windows_Registry">Adding Extensions using the Windows Registry</a> for more information.
</p>
<h4 name="More_on_XUL_Overlays"> More on XUL Overlays </h4>
<p>In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:
</p>
<ul><li> Modify attributes on the merge point, e.g. <tt>&lt;statusbar id="status-bar" hidden="true"/&gt;</tt> (hides the status bar)
</li><li> Remove the merge point from the master document, e.g. <tt>&lt;statusbar id="status-bar" removeelement="true"/&gt;</tt>
</li><li> Control the position of the inserted widgets:
</li></ul>
<pre class="eval">&lt;statusbarpanel position="1" .../&gt;

&lt;statusbarpanel insertbefore="other-id" .../&gt;

&lt;statusbarpanel insertafter="other-id" .../&gt;
</pre>
<h4 name="Creating_New_User_Interface_Components"> Creating New User Interface Components </h4>
<p>You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.
</p><p>View the <a href="fr/XUL">XUL</a> documentation for more resources for XUL developers.
</p>
<h4 name="Defaults_Files"> Defaults Files </h4>
<p>Defaults files that you use to seed a user's profile with should be placed in <tt>defaults/</tt> under the root of your extension's folder hierarchy. Default preferences .js files should be stored in <tt>defaults/preferences/</tt> - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.
</p>
<h4 name="XPCOM_Components"> XPCOM Components </h4>
<p>Firefox supports <a href="fr/XPCOM">XPCOM</a> components in extensions. You can implement interfaces easily in JavaScript, or in C++ (using the Gecko SDK: http://wiki.mozilla.org/Gecko:SDK ). 
</p><p>Place all of your .js or .dll files in the <tt>components/</tt> directory - they are automatically registered the first time Firefox runs after your extension is installed.
</p>
<h4 name="Localization"> Localization </h4>
<p>To support more than one language, you should separate strings from your content using entities and string bundles. It is much easier to do this as you are developing your extension than to come back and do it later!
</p><p>To create localizable attribute values in XUL, you put the values in a <tt>.ent</tt> (or a <tt>.dtd</tt>) file, which looks like this:
</p>
<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
&lt;!ENTITY  button.accesskey "C"&gt;
</pre>
<p>And then include it at the top of your XUL document like so:
</p>
<pre class="eval">&lt;!DOCTYPE <b>window</b> SYSTEM "chrome://packagename/locale/filename.ent"&gt;
</pre>
<p>where <code><b>window</b></code> is the <code><a href="fr/DOM/element.localName">localName</a></code> value of the root element of the XUL document, and the value of the <tt>SYSTEM</tt> property is the chrome URI to the entity file. 
</p><p>To use the entities, modify your XUL to look like this:
</p>
<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"/&gt;
</pre>
<p>The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale. 
</p><p>For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:
</p>
<pre class="eval">key=value
</pre>
<p>and then use <tt>nsIStringBundleService</tt>/<tt>nsIStringBundle</tt> or the <tt>&lt;stringbundle&gt;</tt> tag to load the values into script.
</p>
<h4 name="Understanding_the_Browser"> Understanding the Browser </h4>
<p>Use the DOM Inspector (not part of the <b>Standard</b> Firefox installation, you must reinstall with the Custom install path and choose <b>Developer Tools</b> if there is not a "DOM Inspector" item in your browser's Tools menu) to inspect the browser window or any other XUL window you want to extend. 
</p><p>Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on. 
</p><p>Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the <tt>load</tt> event fires on the master XUL window.
</p>
<h4 name="Debugging_Extensions"> Debugging Extensions </h4>
<p><b>Analytical Tools for Debugging</b>
</p>
<ul><li> The <a href="fr/DOM_Inspector">DOM Inspector</a> - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)
</li><li> <a href="fr/Venkman">Venkman</a> - set breakpoints in JavaScript and inspect call stacks
</li><li> <code><a href="fr/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="fr/Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> in JavaScript - access a function's call stack
</li></ul>
<p><b>printf debugging</b>
</p>
<ul><li> Run an optimized build of Firefox with <tt>-console</tt> at the command line and use <code><a href="fr/Window.dump">dump</a>("string")</code>
</li><li> Use <tt><a href="fr/NsIConsoleService">nsIConsoleService</a></tt> to log to the Script console
</li></ul>
<p><b>Advanced debugging</b>
</p>
<ul><li> Run a debug Firefox build and set breakpoints in Firefox itself, or your C++ components. For the experienced developer, this is often the fastest way to diagnose a problem.
</li></ul>
{{ wiki.languages( { "de": "de/Erweiterung_erstellen", "en": "en/Building_an_Extension" } ) }}
Revenir à cette révision