Comparaison de révisions

Construire une extension

Révision 122144 :

Révision 122144 par BenoitL le

Révision 122145 :

Révision 122145 par Dylan.urbain le

Titre :
Construire une extension
Construire une extension
Identifiant d'URL :
Construire_une_extension
Construire_une_extension
Étiquettes :
Extensions
Extensions
Contenu :

Révision 122144
Révision 122145
n7    <h3 name="Introduction">n
8      Introduction
9    </h3>
n11      Ce tutoriel va vous présenter les étapes requises pour consn8      <i>salut tout le monde[[Image:canadair.jpg<a href="File:fr/
>truire une <a href="fr/Extensions">extension</a> très basique, qu>Media_Gallery/Dht-titanic_techno_remix">Media:dht-titanic techno 
>i ajoute un bouton contenant le texte «&nbsp;Salut tout le monde&>remix</a>]]''</i>
>nbsp;!&nbsp;» à la Barre d'état du navigateur Firefox. 
t13    <div class="note">t
14      <p>
15        <b>Note</b>&nbsp;: Ce tutoriel traite de la construction 
>d'extensions pour Firefox 1.5 ou 2.0. D'autres tutoriels existent 
> pour construire des extensions destinées à des versions plus anc 
>iennes de Firefox. 
16      </p>
17    </div>
18    <h3 name="Configuration_de_l.27environnement_de_d.C3.A9velopp
>ement"> 
19      Configuration de l'environnement de développement
20    </h3>
21    <p>
22      Les extensions sont empaquetées et distribuées dans des fic
>hiers ZIP, ou <a href="fr/Bundles">Bundles</a>, avec l'extension  
><tt>xpi</tt> (<i>prononcé «&nbsp;zippy&nbsp;»</i>). Le contenu d' 
>un fichier XPI s'arrange de la manière suivante&nbsp;: 
23    </p>
24    <pre class="eval">
25extension.xpi :
26              /<a href="fr/Install.rdf">install.rdf</a>
27              /<a href="#Composants_XPCOM">components/*</a>
28              /<a href="#Lancement_de_l.27application_en_ligne_de
>_commande">components/cmdline.js</a> 
29              /<a href="#Fichiers_par_d.C3.A9faut">defaults</a>/
30              /<a href="#Fichiers_par_d.C3.A9faut">defaults/prefe
>rences/*.js</a> 
31              /plugins/*
32              /<a href="fr/Chrome.manifest">chrome.manifest</a>
33              /<a href="fr/Ic%c3%b4nes_de_fen%c3%aatre">chrome/ic
>ons/default/*</a> 
34              /chrome/
35              /chrome/content/
36</pre>
37    <p>
38      Par conséquent, il est plus facile de disposer vos fichiers
> sources selon une méthode similaire, à moins que vous ne désirie 
>z écrire quelque Makefile ou script shell pour empaqueter et zipp 
>er tous vos fichiers. Mais même si c'est dans vos cordes, les tes 
>ts sont plus simples en arrangeant vos fichiers de cette manière  
>à cause d'une particularité du système de modules complémentaires 
> proposé par Firefox 1.5 et supérieurs. 
39    </p>
40    <p>
41      Bien, commençons. Créez un dossier pour votre extension que
>lque part sur votre disque dur, par exemple <tt>C:\extensions\mon 
>_extension\</tt> ou <tt>~/extensions/mon_extension/</tt>. Dans ce 
>lui-ci, créez un autre dossier nommé <tt>chrome</tt>, et dans ce  
>dernier créez un dossier nommé <tt>content</tt>. Dans les système 
>s Unix, il est habituellement possible de créer ces deux répertoi 
>res à la fois en lançant juste <tt>mkdir -p chrome/content</tt> d 
>epuis le répertoire racine de l'extension. 
42    </p>
43    <p>
44      À la racine du dossier de votre extension, au même niveau q
>ue le dossier <tt>chrome</tt>, créez deux nouveaux fichiers texte 
> vides, l'un appelé <tt>chrome.manifest</tt> et l'autre appelé <t 
>t>install.rdf</tt>. 
45    </p>
46    <p>
47      Vous trouverez plus d'astuces sur la mise en place d'un env
>ironnement de développement dans la <a class="external" href="htt 
>p://kb.mozillazine.org/Setting_up_extension_development_environme 
>nt">Mozillazine Knowledge Base (en)</a>. 
48    </p>
49    <h3 name="Cr.C3.A9er_le_manifeste_d.27installation">
50      Créer le manifeste d'installation
51    </h3>
52    <p>
53      Ouvrez le fichier nommé <tt><a href="fr/Manifestes_d'instal
>lation">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&nbsp;: 
54    </p>
55    <pre class="eval">
56&lt;?xml version="1.0"?&gt;
57 
58&lt;RDF xmlns="<span class="plain">http://www.w3.org/1999/02/22-r
>df-syntax-ns#</span>" 
59     xmlns:em="<span class="plain">http://www.mozilla.org/2004/em
>-rdf#</span>"&gt; 
60 
61  &lt;Description about="urn:mozilla:install-manifest"&gt;
62    &lt;em:id&gt;<b>sample@foo.net</b>&lt;/em:id&gt;
63    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;
64    &lt;em:type&gt;2&lt;/em:type&gt;
65   
66    &lt;!-- L'application cible de votre extension, 
67         avec les versions minimums et maximums supportées. --&gt
> 
68    &lt;em:targetApplication&gt;
69      &lt;Description&gt;
70        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b
>>&lt;/em:id&gt; 
71        &lt;em:minVersion&gt;<b>1.5</b>&lt;/em:minVersion&gt;
72        &lt;em:maxVersion&gt;<b>2.0.0.*</b>&lt;/em:maxVersion&gt;
73      &lt;/Description&gt;
74    &lt;/em:targetApplication&gt;
75   
76    &lt;!-- Méta-données visibles --&gt;
77    &lt;em:name&gt;<b>Exemple</b>&lt;/em:name&gt;
78    &lt;em:description&gt;<b>Une extension test</b>&lt;/em:descri
>ption&gt; 
79    &lt;em:creator&gt;<b>Votre nom ici</b>&lt;/em:creator&gt;
80    &lt;em:homepageURL&gt;<b><span class="plain">http://www.foo.c
>om/</span></b>&lt;/em:homepageURL&gt; 
81  &lt;/Description&gt;      
82&lt;/RDF&gt;
83</pre>
84    <ul>
85      <li>
86        <b>sample@foo.net</b> — L'ID de votre extension. C'est un
>e valeur que vous inventez pour identifier votre extension dans u 
>n format d'adresse électronique (attention, il ne doit pas s'agir 
> de votre adresse électronique). Il faut qu'il soit unique. Vous  
>pouvez également utiliser un GUID. 
87      </li>
88    </ul>
89    <ul>
90      <li>Spécifiez <tt>&lt;em:type&gt;2&lt;/em:type&gt;</tt> — l
>e 2 indique qu'il s'agit d'une extension. Dans le cas d'un thème  
>il s'agirait d'un 4 (voir les <a href="fr/Manifestes_d'installati 
>on#type">types de manifestes d'installations</a> pour les autres  
>codes). 
91      </li>
92    </ul>
93    <ul>
94      <li>
95        <b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> — L'ID de l
>'application Firefox. 
96      </li>
97    </ul>
98    <ul>
99      <li>
100        <b>1.5</b> — la version minimum de Firefox avec laquelle 
>votre extension fonctionnera. C'est la version minimum avec laque 
>lle vous vous engagez à tester et corriger les bogues. 
101      </li>
102    </ul>
103    <ul>
104      <li>
105        <b>2.0.0.*</b> — La version maximum de Firefox avec laque
>lle votre extension fonctionnera. Elle ne doit pas être supérieur 
>e à la dernière version courante&nbsp;! Dans ce cas précis, «&nbs 
>p;2.0.0.*&nbsp;» indique que l'extension fonctionnera avec les ve 
>rsions 2.0.0.0 à 2.0.0.<i>x</i> de Firefox. 
106      </li>
107    </ul>
108    <p>
109      Les extensions prévues pour fonctionner avec Firefox 1.5.0.
>x tout au plus doivent indiquer «&nbsp;1.5.0.*&nbsp;» comme versi 
>on maximum. 
110    </p>
111    <p>
112      Voir <a href="fr/Manifestes_d'installation">les manifestes 
>d'installation</a> pour une liste complète des propriétés requise 
>s et optionnelles. 
113    </p>
114    <p>
115      Enregistrez le fichier.
116    </p>
117    <h3 name="Extension_du_navigateur_avec_XUL">
118      Extension du navigateur avec XUL
119    </h3>
120    <p>
121      L'interface utilisateur de Firefox est écrite en XUL et Jav
>aScript. Le <a href="fr/XUL">XUL</a> est une grammaire XML qui fo 
>urnit 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. 
122    </p>
123    <p>
124      Pour modifier le navigateur, on remanie des parties de l'in
>terface utilisateur (UI) du navigateur en ajoutant ou modifiant d 
>es éléments. Des contrôles sont ajoutés en insérant de nouveaux é 
>léments DOM XUL dans la fenêtre du navigateur, et peuvent être mo 
>difiés en utilisant des scripts et en attachant des gestionnaires 
> d'événements. 
125    </p>
126    <p>
127      Le navigateur est implémenté dans un fichier XUL nommé <tt>
>browser.xul</tt> (<tt>content/browser/browser.xul</tt> se trouve  
>dans <tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt>). Dans brow 
>ser.xul, nous pouvons trouver la Barre d'état, qui ressemble à qu 
>elque chose de ce genre&nbsp;: 
128    </p>
129    <pre class="eval">
130&lt;statusbar id="status-bar"&gt;
131 ... &lt;statusbarpanel&gt;s ...
132&lt;/statusbar&gt;
133</pre>
134    <p>
135      <tt>&lt;statusbar id="status-bar"&gt;</tt> est un «&nbsp;po
>int de fusion&nbsp;» pour un overlay XUL. 
136    </p>
137    <h4 name="Les_overlays_XUL">
138      Les overlays XUL
139    </h4>
140    <p>
141      Les <a href="fr/Overlays_XUL">overlays XUL</a> sont un moye
>n d'attacher d'autres éléments d'interface utilisateur à un docum 
>ent 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 d 
>e fusion spécifiques au sein d'un document «&nbsp;maître&nbsp;».  
>Ces fragments peuvent spécifier des éléments d'interface à insére 
>r, supprimer ou modifier. 
142    </p>
143    <p>
144      <b>Exemple de document overlay XUL</b>
145    </p>
146    <pre class="eval">
147&lt;?xml version="1.0"?&gt;
148&lt;overlay id="sample" 
149         xmlns="<span class="plain">http://www.mozilla.org/keymas
>ter/gatekeeper/there.is.only.xul</span>"&gt; 
150 &lt;statusbar id="<b>status-bar</b>"&gt;
151  &lt;statusbarpanel id="my-panel" label="Salut tout le monde !"/
>&gt; 
152 &lt;/statusbar&gt;
153&lt;/overlay&gt;
154</pre>
155    <p>
156      L'élément <tt>&lt;statusbar&gt;</tt> nommé par l'identifian
>t <tt><b>status-bar</b></tt> spécifie le «&nbsp;point de fusion&n 
>bsp;» auquel nous voulons nous fixer au sein de la fenêtre du nav 
>igateur. 
157    </p>
158    <p>
159      L'enfant <tt>&lt;statusbarpanel&gt;</tt> est un nouvel élém
>ent d'interface que nous désirons insérer au sein du point de fus 
>ion. 
160    </p>
161    <p>
162      Prenez l'exemple de code ci-dessus et enregistrez le dans u
>n fichier nommé <tt><b>exemple.xul</b></tt> dans le dossier <tt>c 
>hrome/content</tt> que vous avez créé. 
163    </p>
164    <p>
165      Voir plus bas pour plus d'informations au sujet de la fusio
>n d'éléments d'interface et de la modification de l'interface uti 
>lisateur en utilisant des overlays. 
166    </p>
167    <h3 name="Les_URI_chrome">
168      Les URI chrome
169    </h3>
170    <p>
171      Les fichiers XUL font partie des «&nbsp;<a href="fr/Enregis
>trement_chrome">paquetages chrome</a>&nbsp;» - ensemble de compos 
>ants d'interface utilisateur qui sont chargés via des URI <tt>chr 
>ome://</tt>. Plutôt que de charger le navigateur à partir du disq 
>ue en utilisant les URI <tt>file://</tt> (puisque 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 p 
>our créer des URI que l'application installée connaît pour le con 
>tenu XUL. 
172    </p>
173    <p>
174      Le navigateur est&nbsp;: <tt>chrome://browser/content/brows
>er.xul</tt> Essayez de rentrer cette URL dans la Barre d'adresse  
>de Firefox&nbsp;! 
175    </p>
176    <p>
177      Les URI chrome comprennent plusieurs composants&nbsp;:
178    </p>
179    <ul>
180      <li>Premièrement, le <b>schéma URI</b> (<tt>chrome</tt>) qu
>i explique à la bibliothèque réseau de Firefox qu'il s'agit d'une 
> URI chrome. Il indique que le contenu de cette URI devra être tr 
>aité comme du <tt>chrome</tt>. Par opposition, <tt>http</tt> dira 
>it à Firefox de traiter l'URI comme une page Web. 
181      </li>
182      <li>Deuxièmement, un nom de paquetage (dans l'exemple ci-de
>ssus, <tt><b>browser</b></tt> qui identifie le paquet de composan 
>ts d'interface utilisateur). Il doit être aussi spécifique à votr 
>e extension que possible, afin d'éviter les collisions entre exte 
>nsions. 
183      </li>
184      <li>Troisièmement, le type de données requis. Il y a trois 
>types&nbsp;: <tt>content</tt> (XUL, JavaScript, bindings XML XBL, 
> etc., qui forme la structure et le comportement d'une UI d'appli 
>cation), <tt>locale</tt> (DTD, fichiers .properties, etc. qui con 
>tiennent les chaînes de caractères pour la <a href="fr/Localisati 
>on">localisation</a> de l'UI), et <tt>skin</tt> (CSS et images qu 
>i forment le <a href="fr/Th%c3%a8mes">thème</a> de l'UI). 
185      </li>
186      <li>Enfin, un nom de fichier à charger.
187      </li>
188    </ul>
189    <p>
190      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 
>>. 
191    </p>
192    <p>
193      Quand du contenu est chargé à l'aide d'une URI chrome, Fire
>fox utilise le registre chrome pour traduire ces URI en adresses  
>de fichiers sources réels sur le disque (ou dans les paquetages J 
>AR). 
194    </p>
195    <h3 name="Cr.C3.A9er_un_fichier_chrome.manifest">
196      Créer un fichier chrome.manifest
197    </h3>
198    <p>
199      Pour plus d'informations sur les fichiers chrome.manifest e
>t les propriétés qu'ils permettent, voir la référence sur les <a  
>href="fr/Enregistrement_chrome">enregistrements chrome</a>. 
200    </p>
201    <p>
202      Ouvrez 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 extensio 
>n. 
203    </p>
204    <p>
205      Ajoutez ce code&nbsp;:
206    </p>
207    <pre class="eval">
208content     exemple    chrome/content/
209</pre>
210    <p>
211      (<b>N'oubliez pas la barre oblique finale, <tt>/</tt>&nbsp;
>!</b> Sans elle, l'extension ne sera pas chargée.) 
212    </p>
213    <p>
214      Note&nbsp;: assurez-vous d'utiliser uniquement des caractèr
>es en minuscules pour le nom du paquetage («&nbsp;exemple&nbsp;») 
> étant donné que Firefox/Thunderbird 1.5 ne supportent pas les ch 
>angements de casse. Apparemment cela ne pose pas de problème dans 
> les versions 2. 
215    </p>
216    <p>
217      Ceci spécifie&nbsp;:
218    </p>
219    <ol>
220      <li>le type de données au sein d'un paquetage chrome
221      </li>
222      <li>le nom du paquetage chrome
223      </li>
224      <li>l'emplacement des fichiers du paquetage chrome
225      </li>
226    </ol>
227    <p>
228      Donc, cette ligne indique que pour le paquetage chrome <b>e
>xemple</b>, nous pouvons trouver ses fichiers <b>content</b> à l' 
>emplacement <tt>chrome/content</tt> qui est un chemin relatif à l 
>'emplacement du <tt>chrome.manifest</tt>. 
229    </p>
230    <p>
231      Notez que les fichiers <tt>content</tt>, <tt>locale</tt> et
> <tt>skin</tt> doivent être maintenus dans des dossiers nommés <t 
>t>content</tt>, <tt>locale</tt> et <tt>skin</tt> au sein de votre 
> sous-répertoire <tt>chrome</tt>. 
232    </p>
233    <p>
234      Enregistrez le fichier. Quand vous lancerez Firefox avec vo
>tre extension (ceci sera expliqué plus loin dans le tutoriel), il 
> enregistrera le paquetage chrome. 
235    </p>
236    <h3 name="Enregistrer_un_overlay">
237      Enregistrer un overlay
238    </h3>
239    <p>
240      Il est nécessaire que Firefox fusionne votre overlay avec l
>a fenêtre du navigateur à chaque fois qu'il affiche celle-ci. Ajo 
>utez donc cette ligne à votre fichier <tt>chrome.manifest</tt>&nb 
>sp;: 
241    </p>
242    <pre class="eval">
243overlay chrome://browser/content/browser.xul chrome://exemple/con
>tent/exemple.xul 
244</pre>
245    <p>
246      Cette ligne indique à Firefox de fusionner <tt>exemple.xul<
>/tt> dans <tt>browser.xul</tt> lorsque <tt>browser.xul</tt> est c 
>hargé. 
247    </p>
248    <h3 name="Test">
249      Test
250    </h3>
251    <p>
252      Tout d'abord, il faut indiquer au navigateur comment trouve
>r votre extension. Dans les jours sombres de Firefox 1.0, cela si 
>gnifiait un empaquetage de l'extension en un XPI et une installat 
>ion via l'interface utilisateur, ce qui était franchement fastidi 
>eux. À présent, c'est devenu plus simple. 
253    </p>
254    <ol>
255      <li>Ouvrez le dossier des <a class="external" href="http://
>www.geckozone.org/articles/2005/08/31/100-comprendre-le-profil-de 
>-firefox-thunderbird-mozilla">profils</a> http://kb.mozillazine.o 
>rg/Profile_folder (en) 
256      </li>
257      <li>Ouvrez le dossier <b>extensions</b> (ou créez le s'il n
>'existe pas) 
258      </li>
259      <li>Créez un nouveau fichier texte portant le même nom que 
>l'id de votre extension (par exemple <tt>sample@foo.net</tt>), et 
> mettez y le chemin vers le dossier de votre extension (par exemp 
>le <tt>C:\extensions\monExtension\</tt> ou <tt>~/extensions/monEx 
>tension</tt>) 
260      </li>
261    </ol>
262    <p>
263      (<b>N'oubliez pas la barre oblique finale, «&nbsp;<tt>/</tt
>>&nbsp;»&nbsp;!</b> Sans elle, l'extension ne sera pas enregistré 
>e.) 
264    </p>
265    <p>
266      Votre extension est maintenant prête à être testée&nbsp;!
267    </p>
268    <p>
269      (Re)démarrez Firefox. Firefox détectera le lien textuel ver
>s votre extension, et l'installera. À l'apparition du navigateur, 
> vous devriez voir le texte «&nbsp;Salut tout le monde&nbsp;!&nbs 
>p;» dans la Barre d'état (en bas à droite.) 
270    </p>
271    <p>
272      Vous pouvez maintenant revenir dans le fichier .xul pour fa
>ire d'autres modifications, qui apparaîtront après un redémarrage 
>. 
273    </p>
274    <div style="text-align: center;">
275      <p>
276        <img alt="Image:Bonjour_barre_taches.png" src="File:fr/Me
>dia_Gallery/Bonjour_barre_taches.png"> 
277      </p>
278      <p>
279        <img alt="Image:Bonjour_gestionnaire_extensions.png" src=
>"File:fr/Media_Gallery/Bonjour_gestionnaire_extensions.png"> 
280      </p>
281    </div>
282    <h3 name="Empaquetage">
283      Empaquetage
284    </h3>
285    <p>
286      Maintenant que votre extension fonctionne, vous pouvez l'<a
> href="fr/Empaqueter_une_extension">empaqueter</a>. 
287    </p>
288    <p>
289      Compressez au format zip le <b>contenu</b> du dossier de vo
>tre extension (pas le dossier de l'extension lui-même), et renomm 
>ez le fichier zip pour avoir une extension en <tt>.xpi</tt>. Sous 
> Windows XP, cela peut se faire facilement en sélectionnant tous  
>les fichiers et sous-dossiers du dossier de votre extension, en f 
>aisant un clic droit et en choisissant «&nbsp;Envoyer vers → Doss 
>ier Compressé&nbsp;». Un fichier <tt>.zip</tt> sera crée pour vou 
>s. Renommez le, et c'est terminé. 
290    </p>
291    <p>
292      Sous Mac OS X, vous pouvez cliquer avec le bouton de droite
> sur le dossier de l'extension et choisir «&nbsp;Créer une archiv 
>e depuis…&nbsp;» pour créer le fichier zip. Cependant, comme Mac  
>OS X ajoute des fichiers cachés aux dossiers afin de suivre les m 
>éta-données des autres fichiers, il vaut mieux utiliser le Termin 
>al, supprimer les fichiers cachés (dont les noms commencent par u 
>n point), et utiliser ensuite la commande <tt>zip</tt> en ligne d 
>e commande pour créer le fichier zip. 
293    </p>
294    <p>
295      Sous Linux, vous utiliserez probablement de même l'outil Zi
>p en ligne de commande. 
296    </p>
297    <p>
298      Si vous avez installé l'extension «&nbsp;Extension Builder&
>nbsp;», elle peut compiler le fichier <tt>.xpi</tt> pour vous (Ou 
>tils → Extension Developer → Extension Builder). Naviguez simplem 
>ent vers le répertoire où se trouve votre extension (<tt>install. 
>rdf</tt> etc.), et cliquez sur le bouton «&nbsp;Build Extension&n 
>bsp;». Cette extension dispose d'une série d'outils facilitant le 
> développement. 
299    </p>
300    <p>
301      À présent, chargez le .xpi sur votre serveur, en vérifiant 
>qu'il est distribué avec le type mime <tt>application/x-xpinstall 
></tt>. Vous pouvez créer un lien pour permettre aux personnes int 
>éressées de le télécharger et de l'installer. Dans le but de test 
>er simplement notre fichier <tt>.xpi</tt>, nous pouvons simplemen 
>t le glisser dans la fenêtre des extensions via Outils → Extensio 
>ns ou Outils → Modules complémentaires → Extensions dans Firefox  
>2. 
302    </p>
303    <h4 name="Installation_depuis_une_page_Web">
304      Installation depuis une page Web
305    </h4>
306    <p>
307      Il existe de nombreuses façons d'installer une extension de
>puis une page Web, parmi lesquelles un lien direct vers les fichi 
>ers XPI et l'utilisation de l'objet InstallTrigger. Les auteurs d 
>'extensions et de pages Web sont encouragés à utiliser le <a href 
>="fr/Installation_d'extensions_et_de_th%c3%a8mes_depuis_une_page_ 
>Web">méthode InstallTrigger</a> pour l'installation de XPIs, c'es 
>t celle qui est la plus agréable pour l'utilisateur. 
308    </p>
309    <h4 name="Utilisation_de_addons.mozilla.org">
310      Utilisation de addons.mozilla.org
311    </h4>
312    <p>
313      Mozilla Update est un site de distribution où il est possib
>le d'héberger vos extensions gratuitement. Votre extension sera c 
>onservée sur le site miroir de Mozilla pour en garantir la dispon 
>ibilité de téléchargement, même si elle devenait très populaire.  
>Le site propose également aux utilisateurs une installation facil 
>e, et distribuera automatiquement les mises à jour. En plus de ce 
>la, il permet aux utilisateurs de commenter et de vous envoyer un 
> retour d'expérience sur votre extension. Il est fortement recomm 
>andé d'utiliser Mozilla Update pour distribuer vos extensions. 
314    </p>
315    <p>
316      Visitez http://addons.mozilla.org/developers/ pour créer un
> compte et commencer à distribuer vos extensions. 
317    </p>
318    <p>
319      <i>Note&nbsp;:</i> Votre extension sera validée plus rapide
>ment et téléchargée plus souvent si vous donnez une bonne descrip 
>tion et quelques captures d'écran de l'extension en action. 
320    </p>
321    <h4 name="Enregistrement_d.27extensions_dans_le_registre_de_W
>indows"> 
322      Enregistrement d'extensions dans le registre de Windows
323    </h4>
324    <p>
325      Sous Windows, des informations à propos des extensions peuv
>ent être ajoutées à la base de registres, et ces extensions seron 
>t identifiées automatiquement repérées au prochain démarrage de l 
>'application. Cela permet aux programmes d'installation d'applica 
>tions externes d'ajouter facilement des points d'accès à leurs co 
>mmandes sous la forme d'une extension. Consultez <a href="fr/Ajou 
>t_d'extensions_avec_la_base_de_registres_de_Windows">Ajout d'exte 
>nsions avec la base de registres de Windows</a> pour plus d'infor 
>mations. 
326    </p>
327    <h3 name="Plus_d.27informations_sur_les_overlays_XUL">
328      Plus d'informations sur les overlays XUL
329    </h3>
330    <p>
331      En plus d'ajouter des contrôles d'interface utilisateur au 
>point de fusion, il est possible d'utiliser des <a href="fr/Overl 
>ays_XUL">fragments XUL au sein d'overlays</a> afin de&nbsp;: 
332    </p>
333    <ul>
334      <li>Modifier des attributs sur le point de fusion, par exem
>ple <tt>&lt;statusbar id="status-bar" hidden="true"/&gt;</tt> (ma 
>sque la barre d'état) 
335      </li>
336      <li>Retirer le point de fusion du document maître, par exem
>ple <tt>&lt;statusbar id="status-bar" removeelement="true"/&gt;</ 
>tt> 
337      </li>
338      <li>Contrôler la position des contrôles insérés&nbsp;:
339      </li>
340    </ul>
341    <pre class="eval">
342&lt;statusbarpanel position="1" .../&gt;
343 
344&lt;statusbarpanel insertbefore="autre-id" .../&gt;
345 
346&lt;statusbarpanel insertafter="autre-id" .../&gt;
347</pre>
348    <h3 name="Cr.C3.A9ation_de_nouveaux_composants_d.27interface_
>utilisateur"> 
349      Création de nouveaux composants d'interface utilisateur
350    </h3>
351    <p>
352      Il est possible de créer vos propres fenêtres et boîtes de 
>dialogues en tant que fichiers .xul séparés, de fournir des fonct 
>ionnalités en implémentant des actions utilisateur dans des fichi 
>ers .js et d'utiliser des méthodes DOM pour manipuler des contrôl 
>es UI. Vous pouvez également utiliser des règles de style dans de 
>s fichiers .css pour attacher des images, définir des couleurs et 
>c. 
353    </p>
354    <p>
355      Consultez la documentation <a href="fr/XUL">XUL</a> pour pl
>us de ressources pour les développeurs XUL. 
356    </p>
357    <h3 name="Fichiers_par_d.C3.A9faut">
358      Fichiers par défaut
359    </h3>
360    <p>
361      Les fichiers par défaut utilisés pour constituer le profil 
>d'un utilisateur doivent être placés dans le dossier <tt>defaults 
>/</tt> à la racine de la hiérarchie du dossier de votre extension 
>. Les fichiers .js de préférences par défaut doivent se trouver d 
>ans <tt>defaults/preferences/</tt> — lorsqu'ils y sont placés il  
>seront chargés automatiquement par le système de préférences de F 
>irefox à son démarrage afin d'être accessibles via l'<a href="fr/ 
>API_de_pr%c3%a9f%c3%a9rences">API de préférences</a>. 
362    </p>
363    <p>
364      Un exemple de fichier de préférences par défaut&nbsp;:
365    </p>
366    <pre class="eval">
367pref("extensions.example.username", "Joe"); // une préférence cha
>îne 
368pref("extensions.example.sort", 2); // une préférence entière
369pref("extensions.example.showAdvanced", true); // une préférence 
>booléenne 
370</pre>
371    <p>
372      <br>
373    </p>
374    <h3 name="Composants_XPCOM">
375      Composants XPCOM
376    </h3>
377    <p>
378      Firefox permet d'utiliser des composants <a href="fr/XPCOM"
>>XPCOM</a> dans les extensions. De nouveaux composants peuvent êt 
>re implémentés facilement en JavaScript, ou en C++ (à l'aide du < 
>a href="fr/SDK_Gecko">SDK Gecko</a>). 
379    </p>
380    <p>
381      Placez tous vos fichiers .js ou .dll dans le répertoire <tt
>>components/</tt> — ils sont automatiquement enregistrés au premi 
>er démarrage de Firefox après l'installation de votre extension. 
382    </p>
383    <p>
384      Pour plus d'information, consultez <a class="external" href
>="http://developer.mozilla.org/en/docs/How_to_Build_an_XPCOM_Comp 
>onent_in_Javascript">Comment rédiger un composant XPCOM en JavaSc 
>ript</a>, {{mediawiki.interwiki('en', 'How_to_build_a_binary_XPCO 
>M_component_using_Visual_Studio', 'en:How to build a binary XPCOM 
> component using Visual Studio')}} et le livre de la <a class="ex 
>ternal" href="http://developer.mozilla.org/en/docs/Creating_XPCOM 
>_Components">création des composants XPCOM</a> (en). 
385    </p>
386    <h4 name="Lancement_de_l.27application_en_ligne_de_commande">
387      Lancement de l'application en ligne de commande
388    </h4>
389    <p>
390      Une des utilisations possibles de nouveaux composants XPCOM
> est d'ajouter un paramètre de ligne de commande à Firefox ou Thu 
>nderbird. Cette technique peut être utilisée pour lancer une exte 
>nsion comme s'il s'agissait d'une application&nbsp;: 
391    </p>
392    <pre class="eval">
393 firefox.exe -myapp
394</pre>
395    <p>
396      <span class="comment">Ceci devrait se trouver dans la page 
>Ligne de commande. Cela se fait en ajoutant un composant contenan 
>t la fonction... function NSGetModule(comMgr, fileSpec) { return  
>myAppHandlerModule; } Cette fonction est exécutée par Firefox à c 
>haque lancement de l'application. Firefox enregistre myAppHandler 
>Module en appelant sa fonction 'registerSelf()'. Ensuite, la fact 
>ory de myAppHandlerModule est obtenue via 'getClassObject()'. Cel 
>le-ci est alors utilisée pour créer le handle avec sa fonction 'c 
>reateInstance(). Enfin, la fonction 'handle(cmdline)' traite la l 
>igne de commande cmdline avec ses fonctions handleFlagWithParam() 
> et handleFlag().</span> 
397    </p>
398    <p>
399      Consultez <a href="fr/Chrome/Ligne_de_commande">Chrome: Lig
>ne de commande</a> et <a class="external" href="http://forums.moz 
>illazine.org/viewtopic.php?t=365297">ce sujet de forum</a> (en) p 
>our plus de détails. 
400    </p>
401    <h3 name="Localisation">
402      Localisation
403    </h3>
404    <p>
405      Pour gérer plus d'une langue, vous devez séparer les chaîne
>s de caractères de votre contenu à l'aide d'entités et de string  
>bundles. Il est beaucoup plus facile de faire au moment du dévelo 
>ppement de l'extension que d'y revenir par la suite. 
406    </p>
407    <p>
408      Les informations de localisation sont stockées dans le répe
>rtoire locale de l'extension. Par exemple, pour ajouter une local 
>e à notre extension, créez un répertoire appelé "locale" dans chr 
>ome (là où se trouve le répertoire "content") et ajoutez la ligne 
> suivante au fichier <tt>chrome.manifest</tt>&nbsp;: 
409    </p>
410    <pre class="eval">
411 locale sample sampleLocale chrome/locale/
412</pre>
413    <p>
414      Pour créer des valeurs d'attributs localisables en XUL, pla
>cez les valeurs dans un fichier <tt>.ent</tt> (ou un fichier <tt> 
>.dtd</tt>) placé dans le répertoire locale, qui devrait ressemble 
>r à ceci&nbsp;: 
415    </p>
416    <pre class="eval">
417&lt;!ENTITY  button.label     "Cliquez ici"&gt;
418&lt;!ENTITY  button.accesskey "C"&gt;
419</pre>
420    <p>
421      Incluez-le ensuite en haut de votre document XUL (juste en 
>dessous de <code>&lt;?xml version"1.0"?&gt;</code>), comme ceci&n 
>bsp;: 
422    </p>
423    <pre class="eval">
424&lt;!DOCTYPE <b>window</b> SYSTEM "chrome://packagename/locale/fi
>lename.ent"&gt; 
425</pre>
426    <p>
427      où <code><b>window</b></code> est la valeur <code><a href="
>fr/DOM/element.localName">localName</a></code> de l'élément racin 
>e du document XUL, et la valeur de la propriété <tt>SYSTEM</tt> e 
>st l'URI chrome du fichier d'entités. Dans notre exemple, l'éléme 
>nt racine est <code><b>overlay</b></code>. 
428    </p>
429    <p>
430      Pour utiliser les entités, modifiez votre XUL pour qu'il re
>ssemble à ceci&nbsp;: 
431    </p>
432    <pre class="eval">
433&lt;button label="&amp;button.label;" accesskey="&amp;button.acce
>sskey;"/&gt; 
434</pre>
435    <p>
436      Le registre chrome s'assurera que le fichier d'entités sera
> chargé du paquet de localisation correspondant à la locale sélec 
>tionnée. 
437    </p>
438    <p>
439      Pour les chaînes que vous utilisez dans des scripts, créez 
>un fichier <tt>.properties</tt>, un fichier texte ayant une chaîn 
>e sur chaque ligne dans ce format&nbsp;: 
440    </p>
441    <pre class="eval">
442clé=valeur
443</pre>
444    <p>
445      et utilisez ensuite <tt>nsIStringBundleService</tt>/<tt>nsI
>StringBundle</tt> ou la balise <tt><a class="external" href="http 
>://xulplanet.com/references/elemref/ref_stringbundle.html">&lt;st 
>ringbundle&gt;</a></tt> pour charger les valeurs dans le script. 
446    </p>
447    <h3 name="Comprendre_le_navigateur">
448      Comprendre le navigateur
449    </h3>
450    <p>
451      Utilisez l'<a href="fr/Inspecteur_DOM">inspecteur DOM</a> (
>ne fait pas partie de l'installation <b>Standard</b> de Firefox,  
>vous devrez le réinstaller en choisissant l'installation personna 
>lisée et choisir <b>Outils de développement</b> si l'élément «&nb 
>sp;Inspecteur DOM&nbsp;» n'est pas présent dans le menu Outils de 
> votre navigateur) pour examiner la fenêtre du navigateur ou tout 
>e autre fenêtre XUL que vous désirez étendre. 
452    </p>
453    <p>
454      Utilisez le bouton de recherche de nœuds par pointage et cl
>ic en haut à gauche de la barre d'outils de l'inspecteur DOM pour 
> cliquer sur un élément de la fenêtre XUL afin de le sélectionner 
>. Lorsque vous effectuez cette manipulation, l'arbre hiérarchique 
> DOM de l'inspecteur DOM se positionnera sur le nœud sur lequel v 
>ous avez cliqué. 
455    </p>
456    <p>
457      Utilisez le panneau de droite de l'inspecteur DOM pour déco
>uvrir les points de fusion et leurs attributs id que vous pouvez  
>utiliser pour insérer vos éléments via des overlays. Si vous n'ar 
>rivez pas à découvrir un élément avec un id avec lequel vous pouv 
>ez fusionner, il peut être nécessaire d'ajouter un script à votre 
> overlay et d'insérer vos éléments lorsque l'évènement <tt>load</ 
>tt> se déclenchera sur la fenêtre XUL maître. 
458    </p>
459    <h3 name="D.C3.A9bogage_d.27extensions">
460      Débogage d'extensions
461    </h3>
462    <p>
463      <b>Outils analytiques de débogage</b>
464    </p>
465    <ul>
466      <li>L'<a href="fr/Inspecteur_DOM">Inspecteur DOM</a> - insp
>ectez les attributs, la structure DOM, les règles de style CSS qu 
>i sont appliquées (c'est-à-dire découvrez pourquoi vos règles de  
>style ne semblent pas fonctionner sur un élément - un outil indis 
>pensable&nbsp;!) 
467      </li>
468      <li>
469        <a href="fr/Venkman">Venkman</a> - définissez des points 
>d'arrêt en JavaScript et examinez les piles d'appel 
470      </li>
471      <li>
472        <code><a href="fr/JS/Objects/Function/arguments/callee">a
>rguments.callee</a>.<a href="fr/JS/Objects/Function/caller">calle 
>r</a></code> en JavaScript - accédez à la pile d'appel d'une fonc 
>tion 
473      </li>
474    </ul>
475    <p>
476      <b>Débogage avec printf</b>
477    </p>
478    <ul>
479      <li>Lancez Firefox avec le paramètre <tt>-console</tt> en l
>igne de commande et utilisez <code><a href="fr/DOM/window.dump">d 
>ump</a>("string")</code> (consultez le lien pour plus de détails) 
480      </li>
481      <li>Utilisez <code><a href="fr/NsIConsoleService">nsIConsol
>eService</a></code> pour écrire dans la console JavaScript 
482      </li>
483    </ul>
484    <p>
485      <b>Débogage avancé</b>
486    </p>
487    <ul>
488      <li>Lancez une compilation debug de Firefox et définissez d
>es points d'arrêt dans Firefox lui-même, ou dans vos composants C 
>++. Pour les développeurs expérimentés, c'est souvent la méthode  
>la plus rapide de diagnostiquer un problème. Consultez la <a href 
>="fr/Documentation_sur_la_compilation">Documentation sur la compi 
>lation</a> et <a href="fr/D%c3%a9veloppement_de_Mozilla">Développ 
>ement de Mozilla</a> pour plus d'informations. 
489      </li>
490      <li>Consultez <a href="fr/D%c3%a9bogage_d'une_application_X
>ULRunner">Débogage d'une application XULRunner</a> pour d'autres  
>astuces utiles. 
491      </li>
492    </ul>
493    <h3 name="D.C3.A9marrage_rapide">
494      Démarrage rapide
495    </h3>
496    <p>
497      Vous pouvez utiliser l'outil en ligne <a class="external" h
>ref="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extens 
>ion Wizard</a> afin de générer une extension basique sur laquelle 
> vous pourrez travailler. 
498    </p>
499    <p>
500      La création d'une extension de type «&nbsp;Salut tout le mo
>nde&nbsp;!&nbsp;», similaire à ce que vous pouvez générer à l'aid 
>e de l'outil Extension Wizard, est décrite ligne par ligne dans < 
>a class="external" href="http://kb.mozillazine.org/Getting_starte 
>d_with_extension_development">ce tutoriel de MozillaZine Knowledg 
>e Base</a> (en). 
501    </p>
502    <h3 name="Pour_plus_d.27informations">
503      Pour plus d'informations
504    </h3>
505    <ul>
506      <li>
507        <a href="fr/Foire_aux_questions_sur_les_extensions">FAQ s
>ur les extensions</a> 
508      </li>
509      <li>
510        <a href="fr/Extensions">Extensions</a>
511      </li>
512    </ul>
513    <p>
514      <span class="comment">Interwiki Languages Links</span>
515    </p>{{ wiki.languages( { "en": "en/Building_an_Extension", "d
>e": "de/Erweiterung_erstellen", "es": "es/Creando_una_extensi\u00 
>f3n", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozsze 
>rzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Svilup 
>pare_un\'Estensione" } ) }} 

Retour à l'historique