Update french translation - WebExt - Misc (#153)

* Update french translation

* Update content from english

* updating onmesssage (webext api) to parity w/ en-US

* Bring "your first webextension" to parity w/ current en-us

* Complete fr translation

Co-authored-by: SphinxKnight <SphinxKnight@users.noreply.github.com>

3 files changed, 207 insertions, 227 deletions

diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html
index c1267fff27..eae7a8a907 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.html
@@ -15,56 +15,57 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onMessage
 ---
 <nav>{{AddonSidebar()}}</nav>
 
-<p>Utilisez cet événement pour écouter les messages d’une autre partie de votre extension. Par exemple, utilisez-le :</p>
+<p>Utilisez cet événement pour écouter les messages d’une autre partie de votre extension.</p>
 
 <p>Voici quelques exemples de cas d'utilisation :</p>
 
 <ul>
- <li><strong>dans un <a href="/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">script de contenu</a></strong>, pour écouter les messages d’un <a href="/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">script d’arrière-plan</a> ;</li>
+ <li><strong>dans un <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#content_scripts">script de contenu</a></strong>, pour écouter les messages d’un <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">script d’arrière-plan</a> ;</li>
  <li><strong>dans un script d’arrière-plan</strong>, pour écouter les messages d’un script de contenu ;</li>
- <li><strong>dans une <a href="/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages">page d’options</a> ou un script de <a href="/fr/Add-ons/WebExtensions/User_interface_components#Popups">popup</a></strong>, pour écouter les messages d’un script d’arrière-plan ;</li>
- <li><strong>dans un script d’arrière plan</strong>, pour écouter les messages d’une page d’options ou d’un script de popup.</li>
+ <li><strong>dans une <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#options_pages">page d’options</a> ou un script de <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/User_interface_components#popups">popup</a></strong>, pour écouter les messages d’un script d’arrière-plan ;</li>
+ <li><strong>dans un script d’arrière-plan</strong>, pour écouter les messages d’une page d’options ou d’un script de popup.</li>
 </ul>
 
 <p>Pour envoyer un message reçu par l'écouteur <code>onMessage</code>, utilisez {{WebExtAPIRef("runtime.sendMessage()")}} ou (pour envoyer un message à un script de contenu) {{WebExtAPIRef("tabs.sendMessage()")}}.</p>
 
 <div class="blockIndicator note">
-<p>Évitez de créer plusieurs écouteurs <code>onMessage</code> pour le même type de message, car l'ordre dans lequel plusieurs auditeurs vont tirer n'est pas garanti.</p>
+<p>Évitez de créer plusieurs écouteurs <code>onMessage</code> pour le même type de message, car l'ordre de déclenchement des différents écouteurs ne sera pas garanti.</p>
 
-<p>Lorsque vous voulez garantir la livraison d'un message à un point final spécifique, utilisez l'<a href="fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts##Les_messages_en_flux_continu">approche basée sur la connexion pour échanger des messages</a>.</p>
+<p>Lorsque vous voulez garantir la livraison d'un message à une terminaison spécifique, utilisez l'<a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#les_messages_en_flux_continu">approche basée sur la connexion pour échanger des messages</a>.</p>
 </div>
 
-<p>Avec le message lui-même, l’écouteur reçoit en paramètres :</p>
+<p>En plus du message, l’écouteur reçoit en paramètres :</p>
 
 <ul>
  <li>Un objet <code>sender</code> donnant les détails sur l’expéditeur du message ;</li>
- <li>Une fonction <code>sendResponse</code> qui peut être utilisé pour renvoyer une réponse à l'expéditeur.</li>
+ <li>Une fonction <code>sendResponse()</code> qui peut être utilisée pour renvoyer une réponse à l'expéditeur.</li>
 </ul>
 
-<p>Vous pouvez envoyer une réponse synchrone au message en appelant la fonction <code>sendResponse</code> dans votre écouteur. <a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage#Sending_a_synchronous_response">Voir un exemple</a>.</p>
+<p>Vous pouvez envoyer une réponse synchrone au message en appelant la fonction <code>sendResponse()</code> dans votre écouteur. <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_a_synchronous_response">Voir un exemple</a>.</p>
 
-<p>Pour envoyer un réponse asynchrone, il existe deux options :</p>
+<p>Pour envoyer une réponse asynchrone, il existe deux options :</p>
 
 <ul>
- <li>Renvoyer <code>true</code> à partir de l’écouteur d’événement. Cela permet de conserver la fonction <code>sendResponse</code> après le retour de l’écouteur, ce qui vous permet de l’appeler plus tard. <a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_sendResponse">Voir un exemple</a>.</li>
- <li>Renvoyer une <code>Promise</code> depuis l’écouteur d’événement, et la résoudre lorsque vous avez la réponse (ou la rejeter en cas d’erreur). <a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage#Sending_an_asynchronous_response_using_a_Promise">Voir un exemple</a>.</li>
+ <li>Renvoyer <code>true</code> à partir de l’écouteur d’événement. Cela permet de conserver la fonction <code>sendResponse()</code> après le retour de l’écouteur pour éventuellement l'appeler plus tard. <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_an_asynchronous_response_using_sendresponse">Voir un exemple</a>.</li>
+ <li>Renvoyer une <code>Promise</code> depuis l’écouteur d’événement, et la résoudre lorsque vous avez la réponse (ou la rejeter en cas d’erreur). <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_an_asynchronous_response_using_a_promise">Voir un exemple</a>.</li>
 </ul>
 
 <div class="warning">
-<p>Retourner une <code>Promise</code> est maintenant le moyen préféré car <code>sendResponse</code> <a class="external" href="https://github.com/mozilla/webextension-polyfill/issues/16#issuecomment-296693219">sera retirée de la spécification W3C</a>.</p>
+<p>Retourner une promesse (<a href="fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>) est désormais la méthode à privilégier car <code>sendResponse()</code> <a class="external" href="https://github.com/mozilla/webextension-polyfill/issues/16#issuecomment-296693219">sera retirée de la spécification W3C</a>.</p>
 
 <p>La bibliothèque populaire <a class="external" href="https://github.com/mozilla/webextension-polyfill">webextension-polyfill</a> a déjà supprimé cette fonction de son implémentation.</p>
 </div>
 
 <div class="blockIndicator note">
-<p>Vous pouvez également utiliser une <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">approche basée sur la connexion pour échanger des messages</a>.</p>
+<p>Vous pouvez également utiliser une <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#connection-based_messaging">approche basée sur la connexion pour échanger des messages</a>.</p>
 </div>
 
 <h2 id="Syntaxe">Syntaxe</h2>
 
-<pre class="syntaxbox">browser.runtime.onMessage.addListener(listener)
-browser.runtime.onMessage.removeListener(listener)
-browser.runtime.onMessage.hasListener(listener)</pre>
+<pre class="brush:js">browser.runtime.onMessage.addListener(<var>listener</var>)
+browser.runtime.onMessage.removeListener(<var>listener</var>)
+browser.runtime.onMessage.hasListener(<var>listener</var>)
+</pre>
 
 <p>Les événements ont trois fonctions :</p>
 
@@ -88,7 +89,7 @@ browser.runtime.onMessage.hasListener(listener)</pre>
 
  <dl class="reference-values">
   <dt><em><code>message</code></em></dt>
-  <dd><code>object</code>. Le message lui-même. C’est un objet JSON-ifiable.</dd>
+  <dd>Un objet qui est le message lui-même. C’est un objet sérialisable (voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#data_cloning_algorithm">l'algorithme de clonage de données</a>).</dd>
  </dl>
 
  <dl class="reference-values">
@@ -99,17 +100,17 @@ browser.runtime.onMessage.hasListener(listener)</pre>
  <dl class="reference-values">
   <dt><code>s<em>endResponse</em></code></dt>
   <dd>
-  <p>Une fonction à appeler, au plus une fois, pour envoyer une réponse au <code><var>message</var></code>. La fonction prend un seul argument, qui peut être n'importe quel objet JSON-ifiable. Cet argument est renvoyé à l'expéditeur du message.</p>
+  <p>Une fonction à appeler, au plus une fois, pour envoyer une réponse au <code><var>message</var></code>. La fonction prend un seul argument, qui peut être n'importe quel objet sérialisable (voir <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#data_cloning_algorithm">l'algorithme de clonage de données</a>). Cet argument est renvoyé à l'expéditeur du message.</p>
 
   <p>Si vous avez plus d'un écouteur <code>onMessage()</code> dans le même document, alors un seul peut envoyer une réponse.</p>
 
   <p>Pour envoyer une réponse de manière synchrone, appelez <code>sendResponse()</code> avant le retour de la fonction d'écoute.</p>
 
-  <p>Pour envoyer une réponse de manière asynchrone</p>
+  <p>Pour envoyer une réponse de manière asynchrone :</p>
 
   <ul>
-   <li>soit garder une référence à l'argument <code>sendResponse()</code> et retourner <code>true</code> depuis la fonction listenener. Vous pourrez alors appeler <code>sendResponse()</code> après le retour de la fonction d'écoute.</li>
-   <li>ou retournez une {{jsxref("Promise")}} à partir de la fonction d'écoute et résolvez la promise lorsque la réponse est prête. C'est un moyen privilégié</li>
+   <li>soit on gardera une référence à l'argument <code>sendResponse()</code> et on retournera <code>true</code> depuis la fonction listenener. <code>sendResponse()</code> pourra être appelée après le retour de la fonction d'écoute.</li>
+   <li>ou on retournera {{jsxref("Promise")}} à partir de la fonction d'écoute et on résoudra la promesse lorsque la réponse sera prête. C'est la méthode à privilégier.</li>
   </ul>
   </dd>
  </dl>
@@ -117,9 +118,9 @@ browser.runtime.onMessage.hasListener(listener)</pre>
  <p>La fonction <code><var>listener</var></code> peut renvoyer un booléen ou une {{jsxref("Promise")}}.</p>
 
  <div class="blockIndicator note">
- <p><strong>Important:</strong> N'appelez pas <code>addListener()</code> en utilisant une fonction  <code>async</code> :</p>
+ <p><strong>Important:</strong> N'appelez pas <code>addListener()</code> en utilisant une fonction <code>async</code> :</p>
 
- <pre class="brush: js example-bad">// don't do this
+ <pre class="brush: js example-bad">// ne faites pas ça
 browser.runtime.onMessage.addListener(
   async (data, sender) =&gt; {
     if (data.type === 'handle_me') { return 'done'; }
@@ -127,9 +128,9 @@ browser.runtime.onMessage.addListener(
 );
 </pre>
 
- <p>L'auditeur consommera ainsi chaque message qu'il reçoit, ce qui empêchera effectivement tous les autres auditeurs de recevoir et de traiter des messages.</p>
+ <p>L'écouteur consommera ainsi chaque message qu'il reçoit, ce qui empêchera effectivement tous les autres écouteurs de recevoir et de traiter des messages.</p>
 
- <p>Si vous souhaitez adopter une approche asynchrone, utilisez plutôt une Promise, comme ceci :</p>
+ <p>Si vous souhaitez adopter une approche asynchrone, utilisez plutôt une <code>Promise</code>, comme ceci :</p>
 
  <pre class="brush: js example-good">browser.runtime.onMessage.addListener(
   (data, sender) =&gt; {
@@ -147,11 +148,11 @@ browser.runtime.onMessage.addListener(
 
 <p class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></p>
 
-<p>{{Compat("webextensions.api.runtime.onMessage()")}}</p>
+<p>{{Compat("webextensions.api.runtime.onMessage")}}</p>
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="Examples">Exemples</h2>
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+<h3 id="Simple_example">Exemple simple</h3>
 
 <p>Ce script de contenu écoute les événements clic dans la page web. Si le clic a eu lieu sur un lien, il envoie un message à la page d’arrière-plan avec l’URL cible :</p>
 
@@ -166,7 +167,7 @@ function notifyExtension(e) {
   browser.runtime.sendMessage({"url": e.target.href});
 }</pre>
 
-<p>Le script d’arrière-plan écoute ces messages et affiche une notification à l’aide de l’API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code>.</p>
+<p>Le script d’arrière-plan écoute ces messages et affiche une notification à l’aide de l’API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code>.</p>
 
 <pre class="brush: js">// background-script.js
 
@@ -181,9 +182,9 @@ function notify(message) {
   });
 }</pre>
 
-<h3 id="Envoyer_une_réponse_synchrone">Envoyer une réponse synchrone</h3>
+<h3 id="Sending_a_synchronous_response">Envoyer une réponse synchrone</h3>
 
-<p>Le script de contenu suivant envoie un message au script d’arrière plan lorsque l’utilisateur ou l’utilisatrice clique sur la page. Il enregistre également toute réponse envoyé par le script d’arrière-plan :</p>
+<p>Le script de contenu suivant envoie un message au script d’arrière-plan lorsque l’utilisateur ou l’utilisatrice clique sur la page. Il enregistre également toute réponse envoyée par le script d’arrière-plan :</p>
 
 <pre class="brush: js">// content-script.js
 
@@ -224,9 +225,9 @@ function handleMessage(request, sender, sendResponse) {
 
 browser.runtime.onMessage.addListener(handleMessage);</pre>
 
-<h3 id="Envoi_d’une_réponse_asynchrone_à_l’aide_de_sendResponse">Envoi d’une réponse asynchrone à l’aide de sendResponse</h3>
+<h3 id="Sending_an_asynchronous_response_using_sendResponse">Envoi d’une réponse asynchrone à l’aide de sendResponse</h3>
 
-<p>Voici un autre version du script d’arrière-plan de l’exemple précédent. Il envoie une réponse de manière asynchrone, après le retour de l’écouteur. Remarquez le <code>return true;</code> dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument <code>sendResponse</code> après le retour de l’écouteur.</p>
+<p>Voici une autre version du script d’arrière-plan de l’exemple précédent. Il envoie une réponse de manière asynchrone, après le retour de l’écouteur. Remarquez le <code>return true;</code> dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument <code>sendResponse()</code> après le retour de l’écouteur.</p>
 
 <pre class="brush: js">// background-script.js
 
@@ -240,7 +241,7 @@ function handleMessage(request, sender, sendResponse) {
 
 browser.runtime.onMessage.addListener(handleMessage);</pre>
 
-<h3 id="Envoi_d’une_réponse_asynchrone_à_l’aide_d’une_promesse">Envoi d’une réponse asynchrone à l’aide d’une promesse</h3>
+<h3 id="Sending_an_asynchronous_response_using_a_Promise">Envoi d’une réponse asynchrone à l’aide d’une promesse</h3>
 
 <p>Ce script de contenu reçoit le premier lien <code>&lt;a&gt;</code> dans la page, et envoie un message demandant si l’emplacement du lien fait partie des marque-pages. Il attend comme réponse un {{jsxref("Boolean", "booléen")}} : <code>true</code> si l’emplacement est dans les marque-pages, <code>false</code> sinon.</p>
 
@@ -258,7 +259,7 @@ browser.runtime.sendMessage({
   url: firstLink.href
 }).then(handleResponse);</pre>
 
-<p>Voici le script d’arrière plan. Il utilise <code>{{WebExtAPIRef("bookmarks.search()")}}</code> pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} :</p>
+<p>Voici le script d’arrière-plan. Il utilise <code>{{WebExtAPIRef("bookmarks.search()")}}</code> pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} :</p>
 
 <pre class="brush: js">// background-script.js
 
@@ -272,7 +273,7 @@ function isBookmarked(message, sender, response) {
 
 browser.runtime.onMessage.addListener(isBookmarked);</pre>
 
-<p>Si le gestionnaire asynchrone ne renvoie pas de promise, vous pouvez explicitement construire une promise. Cet exemple plutôt artificiel envoie une réponse après un délai d’une seconde, en utilisant <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">Window.setTimeout()</a></code> :</p>
+<p>Si le gestionnaire asynchrone ne renvoie pas de promesse, vous pouvez explicitement construire une promesse. Cet exemple plutôt artificiel envoie une réponse après un délai d’une seconde, en utilisant <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">Window.setTimeout()</a></code> :</p>
 
 <pre class="brush: js">// background-script.js
 
diff --git a/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html
index 798e5fb6a6..b9b5307bc7 100644
--- a/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html
@@ -1,5 +1,5 @@
 ---
-title: Construction d'une extension cross-browser
+title: Construction d'une extension multi-navigateur
 slug: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension
 tags:
   - Add-ons
@@ -11,62 +11,68 @@ original_slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browse
 ---
 <p>{{AddonSidebar()}}</p>
 
-<p>L'introduction de l'API d'extension de navigateur a créé un paysage plus uniforme pour le développement d'extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principales étant Chrome, Firefox, Opera et Edge), vous verrez des différences à la fois dans l'implémentation de l'API et dans la portée de la couverture. Et puis, Safari utilise ses propres extensions Safari Extensions JS.</p>
+<p>L'introduction de l'API WebExtension a créé un paysage plus homogène pour le développement des extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principaux étant Chrome, Firefox, Opera et Edge), il existe des différences à la fois dans l'implémentation de l'API et dans la couverture des différentes fonctionnalités. Par ailleurs, Safari utilise ses propres extensions Safari Extensions JS.</p>
 
-<p>Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateurs, et dans chaque cas, suggère comment relever ce défi.</p>
+<p>Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateur, et dans chaque cas, suggère comment relever ce défi.</p>
 
-<p>Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le codage JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre polyfill.</p>
+<p>Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le développement JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre prothèse (<i>polyfill</i>).</p>
 
-<h2 id="Obstacles_lors_du_codage_dextension_multiplateforme">Obstacles lors du codage d'extension multiplateforme</h2>
+<h2 id="Cross-platform_extension_coding_hurdles">Obstacles pour les extensions multi-navigateur</h2>
 
-<p>Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :</p>
+<p>Il existe six domaines que vous devez aborder lorsque vous souhaitez développer une extension multiplateforme :</p>
 
 <ul>
- <li>Espace de nommage de l'API</li>
- <li>Gestion asynchrone des événements API</li>
- <li>Couverture des fonctions API</li>
- <li>Clés du Manifest</li>
- <li>Package d'Extension</li>
- <li>Publication</li>
+ <li>L'espace de noms utilisé par l'API</li>
+ <li>La gestion asynchrone des événements par l'API</li>
+ <li>La couverture des fonctions de l'API</li>
+ <li>Les clés du manifeste</li>
+ <li>L'empaquetage d'une extension</li>
+ <li>La publication</li>
 </ul>
 
-<h3 id="Espace_de_nommage_de_lAPI">Espace de nommage de l'API</h3>
+<h3 id="API_namespace">Les espaces de noms des API</h3>
 
-<p>Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :</p>
+<p>Deux espaces de noms (<i>namespaces</i>) sont utilisés pour les quatre principaux navigateurs :</p>
 
 <ul>
- <li><code>browser.*</code>, le standard proposé pour l'API d'extensions, utilisé par Firefox et Edge.</li>
- <li><code>chrome.*</code> utilisé par Chrome et Opera.</li>
+ <li><code>browser.*</code>, l'espace standard  de l'API, utilisé par Firefox et Edge.</li>
+ <li><code>chrome.*</code>, utilisé par Chrome et Opera.</li>
 </ul>
 
-<p>Firefox prend également en charge l'espace de noms <code>chrome.*</code> pour les API compatibles avec Chrome, principalement pour faciliter le <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">portage</a>. Cependant, il est préférable d'utiliser l'espace de nommage <code>browser.*</code>. En plus d'être la norme proposée, <code>browser.*</code> utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.</p>
+<p>Firefox prend également en charge l'espace de noms <code>chrome.*</code> pour les API compatibles avec Chrome, principalement pour faciliter le <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">portage</a>. Cependant, il est préférable d'utiliser l'espace de nommage <code>browser.*</code>. En plus d'être la norme proposée, <code>browser.*</code> utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.</p>
 
-<p>Ce n'est que dans les extensions les plus triviales que l'espace de nommage sera probablement le seul problème multiplateforme qui devra être traité. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette question seul. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.</p>
+<p>Ce n'est que dans les extensions les plus triviales que l'espace de nom sera probablement le seul problème multiplateforme à résoudre. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette seule question. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.</p>
 
-<h3 id="Gestion_asynchrone_des_événements_API">Gestion asynchrone des événements API</h3>
+<h3 id="API_asynchronous_event_handling">Gestion asynchrone des événements</h3>
 
 <p>Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :</p>
 
 <ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a>, le standard proposé pour l'API d'extensions, utilisé par Firefox.</li>
- <li>callbacks, utilisés par Chrome, Edge, et Opera.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Les promesses</a>, le standard proposé pour l'API d'extensions, utilisé par Firefox.</li>
+ <li>Les <i>callbacks</i> (fonctions de rappel), utilisés par Chrome, Edge, et Opera.</li>
 </ul>
 
-<p>Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms <code>chrome.*</code>. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms <code>browser.*</code> du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Il simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.</p>
+<p>Firefox prend également en charge les <i>callbacks</i> pour les API qui prennent en charge l'espace de noms <code>chrome.*</code>. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms <code>browser.*</code> du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Cette approche simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.</p>
 
-<p>Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à <a href="https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee">Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente</a> ou la page des <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">promesses d'utilisation</a> de MDN.</p>
+<div class="notecard note">
+ <p>Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à <a href="https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee">Apprendre à connaître le JavaScript asynchrone : Rappels, promesses et synchronisation/attente</a> ou la page sur <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">l'utilisation des promesses</a> de MDN.</p>
+</div>
 
-<p>Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le <a href="https://github.com/mozilla/webextension-polyfill/">navigateur WebExtension API Polyfill</a>. Cette polyfill prend en compte l'espace de nommage de l'API et la gestion asynchrone des événements dans Firefox, Chrome et Opera. Au moment de la rédaction du présent document (novembre 2018), le soutien pour Edge était en cours d'élaboration.</p>
+<h4 id="The_WebExtension_browser_API_Polyfill">Polyfill pour l'API WebExtension du navigateur</h4>
 
-<p>Vous installez le navigateur WebExtension API Polyfill dans votre environnement de développement à l'aide de npm ou vous le téléchargez directement depuis les <a href="https://github.com/mozilla/webextension-polyfill/releases">versions de GitHub</a>. Vous référencerez alors <code>browser-polyfill.js</code> dans :</p>
+<p>Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le <a href="https://github.com/mozilla/webextension-polyfill/"><i>polyfill</i> pour l'API WebExtension du navigateur</a>.</p>
+
+<p>Pour utiliser le <i>polyfill</i>, installez-le dans votre environnement de développement à l'aide de npm ou téléchargez-le directement depuis les <a href="https://github.com/mozilla/webextension-polyfill/releases">versions de GitHub</a></p>
+
+<p>Vous référencerez alors <code>browser-polyfill.js</code> dans :</p>
 
 <ul>
  <li><code>manifest.json</code>, pour mettre à disposition des scripts de fond et de contenu.</li>
- <li>Documents HTML, tels que les popups <code>browserAction</code> ou les pages à onglet.</li>
- <li>L'appel <code>executeScript</code> dans les scripts de contenu dynamiquement injectés chargés par <code>tabs.executeScript</code>, où il n'a pas été chargé en utilisant une déclaration <code>content_scripts</code> dans manifest.json.</li>
+ <li>Les documents HTML, tels que les popups <code>browserAction</code> ou les pages d'onglet.</li>
+ <li>L'appel à <code>executeScript</code> dans les scripts de contenu dynamiquement injectés chargés par <code>tabs.executeScript</code>, où il n'a pas été chargé en utilisant une déclaration <code>content_scripts</code> dans manifest.json.</li>
 </ul>
 
-<p>Ainsi, par exemple, ce code <code>manifest.json</code> rend le polyfill disponible pour vos scripts d'arrière-plan :</p>
+<p>Ainsi, par exemple, ce code <code>manifest.json</code> rend le <i>polyfill</i> disponible pour vos scripts d'arrière-plan :</p>
 
 <pre class="brush: json">{
  // ...
@@ -78,165 +84,136 @@ original_slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browse
  }
 }</pre>
 
-<p>Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le <code>browser.*</code> API namespace s'exécute.</p>
+<p>Votre but est de vous assurer que le <i>polyfill</i> s'exécute dans votre extension avant tout autre script qui attend le <code>browser.*</code> API namespace s'exécute.</p>
 
-<p>Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le <a href="https://github.com/mozilla/webextension-polyfill/blob/master/README.md">readme du projet sur GitHub.</a></p>
+<div class="notecard note">
+ <p>Pour plus de détails et d'informations sur l'utilisation du <i>polyfill</i> avec un module bundler, voir le <a href="https://github.com/mozilla/webextension-polyfill/blob/master/README.md">readme du projet sur GitHub.</a></p>
+</div>
 
-<p>Il existe d'autres options de polyfill mais, au moment d'écrire ces lignes, aucune ne fournit la couverture de l'API Polyfill du navigateur WebExtension. Ainsi, lorsque vous n'avez pas choisi Firefox comme premier choix, vos options sont d'accepter les limitations des polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge du cross-browser, ou de développer votre propre polyfill.</p>
+<p>Il existe d'autres options de <i>polyfill</i> mais, au moment où nous écrivons ces lignes, aucune ne fournit une couverture équivalente à ce <i>polyfill</i> pour l'API WebExtension du navigateur. Ainsi, lorsque vous n'avez pas choisi Firefox comme cible initiale de navigateur, vos options sont d'accepter les limitations des <i>polyfills</i> alternatifs, de porter sur Firefox et d'ajouter la prise en charge multi-navigateur, ou de développer votre propre <i>polyfill</i>.</p>
 
-<h3 id="Couverture_des_fonctions_API">Couverture des fonctions API</h3>
 
-<p>Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :</p>
 
-<ul>
- <li>Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prenait pas en charge la fonction de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy#Browser_compatibility">vie privée</a>.</li>
- <li>Variations in the support for features within a function. For example, at the time of writing, Firefox doesn’t support the notification function method <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onButtonClicked#Browser_compatibility">onButtonClicked</a> while Firefox is the only browser that supports <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onShown#Browser_compatibility">onShown</a>.</li>
- <li>Proprietary functions, supporting browser specific features. For example, at the time of writing, containers was a Firefox-specific feature supported by the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities#Browser_compatibility">contextualIdentities</a> function.</li>
-</ul>
+<h3 id="API_function_coverage">Couverture des différentes implémentations d'API</h3>
+
+<p>Les différences de fonctionnalités offertes par les différents navigateurs peuvent se répartir en trois catégories :</p>
 
-<p>You can find details about the support for the extension APIs among the four main browsers and Firefox for Android on the Mozilla Developer Network <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a> page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript APIs</a> reference pages.</p>
+<ol>
+ <li><strong>L'absence de prise en charge d'une fonctionnalité à part entière.</strong></li>
+ <li><strong>Les variations de prise en charge pour certains aspects d'une fonctionnalité.</strong> Au moment où nous écrivons ces lignes, Firefox ne prend pas en charge la méthode <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onButtonClicked#browser_compatibility">onButtonClicked</a></code> mais est le seul navigateur qui prend en charge <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onShown#browser_compatibility">onShown</a></code>.</li>
+ <li><strong>Les fonctionnalités propriétaires spécifiques à chaque navigateur.</strong> Au moment où nous écrivons ces lignes, les conteneurs sont une fonctionnalité spécifique à Firefox qui est donc le seul à prendre en charge la fonction <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities#browser_compatibility">contextualIdentities</a></code>.</li>
+</ol>
 
-<p>A simple approach to addressing these differences is to limit the functions used in your extension to functions that offer the same functionality across your range of targeted browsers. In practice, for most extensions, this approach is likely to be too restrictive.</p>
+<p>Vous pouvez trouver plus de détails sur la prise en charge de l'API pour les différents navigateurs sur <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">La prise en charge des API JavaScript WebExtension pour les différents navigateurs</a>. Les informations de compatibilité sont également disponibles sur chaque page de la <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/API">référence des API JavaScript WebExtension</a>.</p>
 
-<p>The approach you should take where there are differences among the APIs, is to offer either alternative implementations or fallback functionality. Remember that you may also need to do this to allow for differences in API support between versions of the same browser.</p>
+<h4 id="Handling_API_differences">Handling API differences</h4>
 
-<p>The use of runtime checks on the availability of a function’s features is the recommended approach to implementing alternative or fallback functionality. The benefit of performing a runtime check is that if the function becomes available you don’t need to update and redistribute the extension to take advantage of it.</p>
+<p>Une approche simple pour gérer ces différences consiste à limiter les fonctionnalités utilisées par une extension afin que celle-ci puisse fonctionner sur différents navigateurs. Toutefois, en pratique, cette approche se révèlera souvent trop restrictive.</p>
 
-<p>The following code enables you to perform a runtime check:</p>
+<p>À la place, on peut utiliser des implémentations alternatives ou des fonctionnalités de recours dans ces cas. Cela peut également s'avérer utile pour gérer les différences d'implémentation entre les différentes versions d'un même navigateur</p>
+
+<p>L'utilisation de vérifications à l'exécution quant à la disponibilité d'une fonctionnalité est une approche recommandée qui permet d'implémenter ou d'utiliser des alternatives à bon escient. L'avantage d'une vérification à l'exécution est que si la fonction devient disponible, il n'est pas nécessaire de mettre à jour ou de redistribuer l'extension à nouveau.</p>
+
+<p>Le fragment de code suivant vous permet de vérifier l'existance d'une fonction lors de l'exécution :</p>
 
 <pre class="brush: js">if (typeof &lt;function&gt; === "function") {
    // safe to use the function
 }</pre>
 
-<h3 id="Manifest_keys">Manifest keys</h3>
+<h3 id="Manifest_keys">Les clés de manifeste</h3>
 
-<p>The differences in the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">manifest.json</a> file keys supported by the four main browsers fall broadly into three categories:</p>
+<p>Les différences pour les clés du fichier <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">manifest.json</a></code> se répartissent en trois catégories :</p>
 
-<ul>
- <li>Extension information attributes. For example, at the time of writing, Firefox and Opera include the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/developer#Browser_compatibility">developer</a> key for details about the developer, as well as the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/author#Browser_compatibility">author</a>, of the extension.</li>
- <li>Extension features. For example, at the time of writing, Edge did not support the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands#Browser_compatibility">commands</a> key that enables shortcut keys to be defined for an extension.</li>
- <li>Key optionality. For example, at the time of writing, the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/author#Browser_compatibility">author</a> key is mandatory in Edge but optional in the other main browsers.</li>
-</ul>
+<ol>
+ <li><strong>Les attributs d'information sur l'extension.</strong> Firefox et Opera incluent la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/developer#browser_compatibility">developer</a></code> pour fournir des détails quant à la développeuse ou au développeur de l'application et la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/author#browser_compatibility">author</a></code>.</li>
+ <li><strong>Les fonctionnalités rattachées à l'extension.</strong> Edge ne prenait pas en charge la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands#browser_compatibility">commands</a></code> qui permet de définir des raccourcis clavier pour une extension.</li>
+ <li><strong>Le caractère optionnel d'une clé.</strong> Ainsi, la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/author#browser_compatibility">author</a></code> était obligatoire dans Edge mais optionnelle pour les autres navigateurs.</li>
+</ol>
 
-<p>Browser compatibility information is included with each key in the Mozilla Developer Network <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json key reference pages</a>.</p>
+<p>Les informations quant à la compatibilité de chaque clé de manifeste sont incluses dans les pages de référence correspondantes.</p>
 
-<p>As <code>manifest.json</code> files tend to change little—except for release numbers, which may be different between the various browsers—creating and editing a static version for each browser is usually the simplest approach.</p>
+<p>Le fichier <code>manifest.json</code> évolue peu entre les différentes versions (exception faite du numéro de version). Il est parfois judicieux d'avoir une version statique différente pour chaque navigateur.</p>
 
-<h3 id="Extension_packaging">Extension packaging</h3>
+<h3 id="Extension_packaging">Empaquetage des extensions</h3>
 
-<p>Packaging an extension for distribution through the browser extension stores is relatively straightforward. Firefox, Chrome, and Opera all use a simple zip format that requires the <code>manifest.json</code> file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.</p>
+<p>L'empaquetage d'une extension pour la distribuer via les plateformes des navigateurs est uniforme .</p>
 
-<p>For details on packaging, refer to the guidance on the respective extension’s developer portals.</p>
+<ul>
+ <li>Firefox, Chrome, et Opera utilise une archive ZIP dans laquelle le fichier  <code>manifest.json</code> doit être à la racine.</li>
+ <li>Pour Microsoft, des étapes supplémentaires sont nécessaires.</li>
+</ul>
+
+<p>Pour plus de détails sur les méthodes d'empaquetage, veuillez vous référer aux documentations de chaque portail de distribution.</p>
+
+<h3 id="Extension_publishing">Publication des extensions</h3>
+
+<p>Chaque navigateur majeur possède une plateforme de distribution d'extension. Chacun de ces magasins effectue une revue de l'extension pour vérifier la présence de vulnérabilités.</p>
 
-<h3 id="Publishing">Publishing</h3>
+<p>Aussi, il faudra gérer l'inscription et la mise à jour d'une extension séparément pour chaque distributeur. Dans certains cas, il est possible d'uploader son extension avec un utilitaire.</p>
 
-<p>Each of the four major browsers maintains browser extension stores. As a consequence, you need to approach adding and updating your extension in each separately. In some cases you can upload your extension using a utility. Each of the stores also performs a review of your extension to check for security vulnerabilities. The table below summarizes the approach and features of each store:</p>
+<p>Le tableau qui suit récapitule les approches et fonctionnalités pour chaque plateforme de distribution :</p>
 
 <table>
- <tbody>
+ <thead>
   <tr>
-   <td></td>
-   <td>
-    <p>Registration fee</p>
-   </td>
-   <td>
-    <p>Upload utility</p>
-   </td>
-   <td>
-    <p>Pre-publication review process</p>
-   </td>
-   <td>
-    <p>Account two factor authentication</p>
-   </td>
+   <th>Navigateur</th>
+   <th>Frais d'enregistrement</th>
+   <th>Utilitaire pour l'<i>upload</i></th>
+   <th>Processus de revue avant la publication</th>
+   <th>Authentification multi-facteur</th>
   </tr>
+ </thead>
+ <tbody>
   <tr>
-   <td>
-    <p>Firefox</p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
-   <td>
-    <p><a href="/en-US/Add-ons/WebExtensions/web-ext_command_reference">web-ext</a></p>
-   </td>
-   <td>
-    <p>Automatic, a few seconds<sup>1</sup></p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
+   <th>Firefox</th>
+   <td>Non</td>
+   <td><a href="https://extensionworkshop.com/documentation/develop/web-ext-command-reference/">web-ext</a></td>
+   <td>Automatique, quelques secondes<sup>1</sup></td>
+   <td>Non</td>
   </tr>
   <tr>
-   <td>
-    <p>Chrome</p>
-   </td>
-   <td>
-    <p>Yes</p>
-   </td>
-   <td>
-    <p>Yes</p>
-   </td>
-   <td>
-    <p>Automatic, less than an hour</p>
-   </td>
-   <td>
-    <p>Yes</p>
-   </td>
+   <th>Chrome</th>
+   <td>Oui</td>
+   <td>Oui</td>
+   <td>Automatique, moins d'une heure</td>
+   <td>Oui</td>
   </tr>
   <tr>
-   <td>
-    <p>Opera</p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
-   <td>
-    <p>Manual, no SLA provided</p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
+   <th>Opera</th>
+   <td>Non</td>
+   <td>Non</td>
+   <td>Manuel, aucun délai garanti</td>
+   <td>Non</td>
   </tr>
   <tr>
-   <td>
-    <p>Edge</p>
-   </td>
-   <td>
-    <p>Yes</p>
-   </td>
-   <td>
-    <p>No</p>
-   </td>
-   <td>
-    <p>Manual, up to 72 hours<sup>2</sup></p>
-   </td>
-   <td>
-    <p>Yes</p>
-   </td>
+   <th>Edge</th>
+   <td>Oui</td>
+   <td>Non</td>
+   <td>Manuel, jusqu'à 72 heures<sup>2</sup></td>
+   <td>Oui</td>
   </tr>
  </tbody>
 </table>
 
-<p>1) A manual review of the extension takes place after publication, which may result in the extension being suspended where issues that need fixing are found.</p>
+<p><sup>1</sup> Une revue manuelle de l'extension a lieu après la publication et peut entraîner la suspension de l'extension dans l'attente des corrections nécessaires aux problèmes éventuellement trouvés.</p>
 
-<p>2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.</p>
+<p><sup>2</sup> Au moment où nous écrivons ces lignes, Microsoft approuvait uniquement la publication d'extensions pré-approuvées.</p>
 
-<h3 id="Other_considerations">Other considerations</h3>
+<h3 id="Other_considerations">Autres considérations</h3>
 
-<h4 id="Extension_naming">Extension naming</h4>
+<h4 id="Extension_naming">Nommage des extensions</h4>
 
-<p>Microsoft requires that extensions have unique names and provides a process for claiming one or more names for your extension through the Windows Dev Center. It may therefore be prudent to reserve an extension name with Microsoft, even if you’re not intending to support Edge immediately. None of the other stores apply name restrictions.</p>
+<p>Microsoft requiert un nom unique pour chaque extension et permet de revendiquer un ou plusieurs noms pour une extension via Windows Dev Center. Aussi, il peut être prudent de réserver un nom pour votre extension dès à présent, même si vous ne prévoyez pas de prendre en charge Edge immédiatement.</p>
 
-<h4 id="Version_numbering">Version numbering</h4>
+<p>Aucune des autres plateformes n'impose de restrictions quant au nom de l'extension.</p>
 
-<p>The Firefox and Chrome stores require that each uploaded version has a separate version number. This means that you cannot revert to an earlier version number, if you come across issues in a release.</p>
+<h4 id="Version_numbering">Numérotation des versions</h4>
 
-<h4 id="Share_content">Share content</h4>
+<p>Les plateformes de distribution pour Firefox et Chrome requièrent un numéro de version distinct et croissant pour chaque <i>upload</i>. Cela signifie qu'on ne peut pas revenir à un numéro de version antérieur s'il y a un problème sur une version.</p>
 
-<p>Even when you include developing extensions for Safari, there are a number of assets you can potentially share across all of your implementations. These include:</p>
+<h4 id="Share_content">Partage des ressources</h4>
+
+<p>Lorsque vous développez une extension pour Safari, vous pouvez réutiliser les éléments suivants entre vos différentes implémentations :</p>
 
 <ul>
  <li>Images</li>
@@ -246,8 +223,10 @@ original_slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browse
 
 <h2 id="Conclusion">Conclusion</h2>
 
-<p>When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the <a href="https://github.com/mozilla/webextension-polyfill/">WebExtension browser API Polyfill</a>. Following this approach you benefit from using API features that are closely aligned with the proposed extensions API standard and offer you the simplicity of promises for asynchronous event handling.</p>
+<p>Lorsqu'on souhaite développer une extension pour les différents navigateurs, on pourra résoudre certaines des différences d'implémentation en visant initialement Firefox et en utilisant <a href="https://github.com/mozilla/webextension-polyfill/">le <i>polyfill</i> pour les API WebExtension</a>. Avec cette approche, on pourra bénéficier des fonctionnalités d'API proches du standard et exploiter les promesses pour la gestion asynchrone des évènements.</p>
+
+<p>La majeure partie du travail d'adaptation consistera à gérer les variations de fonctionnalités entre les différentes implémentations et les différences du fichier manifeste (<code>manifest.json</code>) ; ce dernier pouvant être créé manuellement. L'empaquetage et la distribution contiennent également quelques différences en fonction des plateformes.</p>
 
-<p>The bulk of your cross-platform work is likely to focus on handling variations among the API features supported by the main browsers. Creating your <code>manifest.json</code> files should be relatively straightforward and something you can do manually. You will then need to account for the variations in extension packaging and the processes for submitting to each of the extension stores.</p>
+<p>Vous pouvez utiliser <a href="https://github.com/notlmn/browser-extension-template">browser-extension-template</a> pour rapidement mettre en place un projet d'extension, l'empaqueter et la publier.</p>
 
-<p>Following the advice in this article, you should be able to create an extension that works well on all of the four main browsers, enabling you to deliver your extension features to more people.</p>
+<p>Avec les informations de cet article, vous devriez être en mesure de créer une extension qui fonctionne correctement sur l'ensemble des principaux navigateurs, permettant ainsi au plus grand nombre d'utiliser votre extension.</p>
diff --git a/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.html
index 346463406a..84d5f78263 100644
--- a/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -11,33 +11,33 @@ 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&amp;utm_medium=documentation&amp;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>
+<p>Si vous connaissez déjà les concepts de base des extensions de navigateur, vous pouvez directement consulter <a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension"> afin de 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&amp;utm_medium=documentation&amp;utm_campaign=your-first-extension">atelier sur les extensions de Firefox</a> pour en savoir plus sur le processus de test et de publication des WebExtensions pour 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>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 lequel 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>
+<p>Pour commencer, il vous faut Firefox (dans la version 45 ou avec une version  supérieure).</p>
 
-<h2 id="Ecriture_de_lextension">Ecriture de l'extension</h2>
+<h2 id="Writing_the_extension">Écriture 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>
+<p>Créez un nouveau répertoire et déplacez 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
+<pre class="brush: bash">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>
+<p>Créez un nouveau fichier nommé <code>manifest.json</code> directement dans le répertoire <code>borderify</code> et tapez-y le contenu suivant :</p>
 
-<pre class="brush: json notranslate">{
+<pre class="brush: json ">{
 
   "manifest_version": 2,
   "name": "Borderify",
   "version": "1.0",
 
-  "description": "Adds a solid red border to all webpages matching mozilla.org.",
+  "description": "Ajoute une bordure rouge pleine sur l'ensemble des pages web mozilla.org.",
 
   "icons": {
     "48": "icons/border-48.png"
@@ -53,22 +53,22 @@ cd borderify</pre>
 }</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>
+ <li>Les trois premières clés : <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, et <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code> sont obligatoires et contiennent des métadonnées fondamentales nécessaires au module.</li>
+ <li><code><a href="/fr/docs/Mozilla/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="/fr/docs/Mozilla/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>
+<p>La clé la plus intéressante ici est <code><a href="/fr/docs/Mozilla/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 motif de correspondance de domaines spécifique. Dans notre cas, nous demandons à Firefox de charger un script appelé <code>borderify.js</code> 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>
+ <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">En savoir plus sur les scripts de contenu.</a></li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">En savoir plus sur les motifs de correspondance</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>
+<p><a href="https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/#when_do_you_need_an_add-on_id">Dans certaines situations, vous devez établir un identifiant pour votre extension</a>. Si vous avez besoin d'établir un identifiant pour votre extension, incluez la clé <code><a href="/fr/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": {
+<pre class="brush: json ">"browser_specific_settings": {
   "gecko": {
     "id": "borderify@example.com"
   }
@@ -77,85 +77,85 @@ cd borderify</pre>
 
 <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>Le module doit posséder une icône qui sera affichée dans le gestionnaire de modules du navigateur. Le fichier <code>manifest.json</code> utilisé ici fournit une icône <code>icons/border-48.png</code>.</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>Créons le répertoire <code>icons</code> directement sous le répertoire <code>borderify</code>. Fournissez une icône nommée <code>border-48.png</code>. 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 licence <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>
+<p>Si vous décidez de fournir votre propre icône, sa taille devra être de 48x48 pixels. Il est aussi possible de 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 <code>manifest.json</code> :</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>
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</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>
+ <li><a href="/fr/docs/Mozilla/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>
+<p>Enfin, créez un fichier nommé <code>borderify.js</code> directement dans le répertoire <code>borderify</code> et insérez-y ceci :</p>
 
-<pre class="brush: js notranslate">document.body.style.border = "5px solid red";</pre>
+<pre class="brush: js ">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>
+<p>Ce script sera chargé dans chaque page où le domaine correspond au motif fourni par la clé <code>content_scripts</code> du manifeste. 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>
+ <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Pour en savoir plus sur les scripts de contenu.</a></li>
 </ul>
 
-<h2 id="Essai">Essai</h2>
+<h2 id="Trying_it_out">Essai</h2>
 
 <p>D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit :</p>
 
-<pre class="notranslate">borderify/
+<pre>borderify/
     icons/
         border-48.png
     borderify.js
     manifest.json</pre>
 
-<h3 id="Installation">Installation</h3>
+<h3 id="Installing">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>Dans Firefox : Ouvrez la page <a href="/fr/docs/Tools/about:debugging">about:debugging</a>, cliquez sur "Firefox" (dans les versions plus récentes de Firefox), cliquez sur « Chargez un module complémentaire temporaire… », 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>Le module complémentaire est dorénavant installé et persistera 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>
+<p>Une autre alternative est d’exécuter l'extension depuis la ligne de commande à l'aide de l'outil <a href="https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/">web-ext</a>.</p>
 
-<h3 id="Test">Test</h3>
+<h3 id="Testing">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>
+<p>Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les scripts de contenu 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>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 « Recharger » 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>
+ <li><a href="https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/">En savoir plus sur le chargement des extensions</a></li>
 </ul>
 
-<h2 id="Empaqueter_et_publier">Empaqueter et publier</h2>
+<h2 id="Packaging_and_publishing">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>
+<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/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_">"Publier votre extension"</a>.</p>
 
-<h2 id="Et_ensuite">Et ensuite ?</h2>
+<h2 id="Whats_next">Et ensuite ?</h2>
 
-<p>Maintenant, vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox :</p>
+<p>Maintenant que vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox, voici quelques suggestions pour la suite :</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>
+ <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/Examples">Explorer les exemples d'extension</a></li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/What_next_">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/What_next_#continuez_votre_exp%c3%a9rience_d'apprentissage">Poursuivre votre apprentissage</a>.</li>
 </ul>