1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: Votre première WebExtension
slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
tags:
- Add-ons
- Extensions
- Guide
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
---
<div>{{AddonSidebar}}</div>
<div class="blockIndicator note">
<p>Si vous connaissez déjà les concepts de base des extensions de navigateur, passez cette section pour <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">voir comment les fichiers d'extension sont assemblés</a>. Ensuite, utilisez la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions#Reference">documentation de référence</a> pour commencer la construction de votre extension. Visitez l'<a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension">atelier sur les extensions de Firefox</a> pour en savoir plus sur le flux de travail pour le test, la publication et les extensions Firefox.</p>
</div>
<p>Cet article vous montre comment créer une extension Firefox, du début à la fin. L'extension ajoute une bordure de couleur rouge sur toutes les pages chargées depuis le site "mozilla.org" ou n'importe lequels de ses sous-domaines.</p>
<p>Le code source de cet exemple est disponible sur GitHub : <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
<p>Pour commencer, il vous faut Firefox version 45 ou supérieure.</p>
<h2 id="Ecriture_de_lextension">Ecriture de l'extension</h2>
<p>Créez un nouveau répertoire et rendez vous à l'intérieur. Par exemple, dans votre ligne de commande/terminal vous pourriez le faire comme ceci :</p>
<pre class="brush: bash notranslate">mkdir borderify
cd borderify</pre>
<h3 id="manifest.json">manifest.json</h3>
<p>Créez un nouveau fichier nommé "manifest.json" directement dans le répertoire "borderify" et tapez-y le contenu suivant :</p>
<pre class="brush: json notranslate">{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a solid red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}</pre>
<ul>
<li>Les trois premières clés : <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, et <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code> sont obligatoires et contiennent des métadonnées fondamentaux qui sont nécessaires au module.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module.</li>
<li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> est optionnelle, mais recommandée : elle permet d'établir l'icône du module qui s'affichera dans le gestionnaire de module.</li>
</ul>
<p>La clé la plus intéressante ici est <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, qui demande à Firefox de charger un script dans toutes les pages dont l'URL correspond à un patron de correspondance de domaines spécifique. Dans notre cas, nous demandons à Firefox de charger un script appelé "borderify.js" dans toutes les pages HTTP ou HTTPS du domaine "mozilla.org" et tous ses sous-domaines.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">En savoir plus sur les scripts de contenu.</a></li>
<li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">En savoir plus sur les patrons de correspondance de domaines</a>.</li>
</ul>
<div class="warning">
<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_add-on_ID">Dans certaines situations, vous devez établir un ID pour votre extension</a>. Si vous avez besoin d'établir un ID pour votre extension, incluez la clé <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">browser_specific_settings</a></code> dans <code>manifest.json</code> et définissez sa propriété <code>gecko.id</code> :</p>
<pre class="brush: json notranslate">"browser_specific_settings": {
"gecko": {
"id": "borderify@example.com"
}
}</pre>
</div>
<h3 id="iconsborder-48.png">icons/border-48.png</h3>
<p>Le module doit posséder une icône qui sera affichée à côté en haut à droite de votre navigateur firefox. Le fichier "manifest.json" a établit une icône "icons/border-48.png".</p>
<p>Créons le répertoire "icons" directement sous le répertoire "borderify". Fournissez une icône nommée "border-48.png". Vous pouvez utiliser <a href="https://raw.githubusercontent.com/mdn/webextensions-examples/master/borderify/icons/border-48.png">celle-ci</a>, qui est tirée du repértoire d'icônes Google Material Design, et est utilisable à condition de respecter les termes de la license <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p>
<p>Si vous décidez d'fournir votre propre icône, sa taille devra être de 48x48 pixels. Il est aussi possible d'fournir une icône de 96x96 pixels, adaptée à l'affichage en haute résolution et, dans ce cas, elle devra être spécifiée par la propriété <code>96</code> de l'objet icon dans le fichier "manifest.json" :</p>
<pre class="brush: json line-numbers language-json notranslate"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
<span class="key token">"48":</span> <span class="string token">"icons/border-48.png",
"96": "icons/border-96.png"</span>
<span class="punctuation token">}</span></code></pre>
<p>Une alternative est de fournir un fichier SVG qui sera automatiquement mis à la bonne échelle.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">En savoir plus sur la spécification d'icône.</a></li>
</ul>
<h3 id="borderify.js">borderify.js</h3>
<p>Enfin, créez un fichier nommé "borderify.js" directement dans le répertoire "borderify" et insérez-y ceci :</p>
<pre class="brush: js notranslate">document.body.style.border = "5px solid red";</pre>
<p>Ce script sera chargé dans chaque page dont le patron de correspondance de domaines correspond au patron de correspondance de domaine définit par la clé <code>content_scripts</code> du manifest.json. Ce script a un accès direct au document contrairement à des scripts chargés par la page elle-même.</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Pour en savoir plus sur les scripts de contenu.</a></li>
</ul>
<h2 id="Essai">Essai</h2>
<p>D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit :</p>
<pre class="notranslate">borderify/
icons/
border-48.png
borderify.js
manifest.json</pre>
<h3 id="Installation">Installation</h3>
<p>Dans Firefox : Ouvrez la page <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a>, cliquez sur "Firefox" (dans les versions plus récentes de Firefox), cliquez sur "Load Temporary Add-on", puis sélectionnez n'importe quel fichier dans le répertoire de votre extension.</p>
<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
<p>Le module complémentaire est dorénavant installé et résidera jusqu’à ce que vous redémarriez Firefox.</p>
<p>Une autre alternative est d’exécuter la WebExtension depuis la ligne de commande à l'aide de l'outil <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p>
<h3 id="Test">Test</h3>
<p>Rendez-vous sur une page web du domaine "mozilla.org". Vous devriez y voir une bordure rouge qui entoure la page :</p>
<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
<div class="note">
<p>Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les content scripts sont bloqués sur ce domaine.</p>
</div>
<p>Expérimentez un peu en modifiant le contenu du script, en changeant par exemple la couleur de la bordure ou en altérant le contenu de la page. Puis sauvegardez le content script, rechargez les fichiers du module en cliquant sur le bouton "Reload" dans about:debugging. Les changements sont immédiats :</p>
<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
<ul>
<li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">En savoir plus sur le chargement des extensions</a></li>
</ul>
<h2 id="Empaqueter_et_publier">Empaqueter et publier</h2>
<p>Afin que d'autres personnes puissent utiliser votre module, il vous faut l'empaqueter et le soumettre à la signature de Mozilla. Pour en apprendre plus, voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publier votre extension"</a>.</p>
<h2 id="Et_ensuite">Et ensuite ?</h2>
<p>Maintenant, vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox :</p>
<ul>
<li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension">Rédiger une extension plus complexe</a></li>
<li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">en lire d'avantage sur l'anatomie d'une WebExtensions</a></li>
<li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Exemples">explorer les exemples d'extension</a></li>
<li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/que_faire_ensuite">découvrir ce dont vous avez besoin pour développer, tester et publier votre extension</a></li>
<li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/que_faire_ensuite#Continuez_votre_expérience_d'apprentissage">poursuivre votre apprentissage</a>.</li>
</ul>
|
