From ed27358bb580f8366fadca2124a7477814b7e16e Mon Sep 17 00:00:00 2001 From: Joris Daniel Date: Sat, 20 Mar 2021 11:10:41 +0100 Subject: 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 --- .../webextensions/api/runtime/onmessage/index.html | 75 +++--- .../build_a_cross_browser_extension/index.html | 265 ++++++++++----------- .../your_first_webextension/index.html | 94 ++++---- 3 files changed, 207 insertions(+), 227 deletions(-) (limited to 'files/fr/mozilla/add-ons/webextensions') 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 --- -

Utilisez cet événement pour écouter les messages d’une autre partie de votre extension. Par exemple, utilisez-le :

+

Utilisez cet événement pour écouter les messages d’une autre partie de votre extension.

Voici quelques exemples de cas d'utilisation :

Pour envoyer un message reçu par l'écouteur onMessage, utilisez {{WebExtAPIRef("runtime.sendMessage()")}} ou (pour envoyer un message à un script de contenu) {{WebExtAPIRef("tabs.sendMessage()")}}.

-

Évitez de créer plusieurs écouteurs onMessage pour le même type de message, car l'ordre dans lequel plusieurs auditeurs vont tirer n'est pas garanti.

+

Évitez de créer plusieurs écouteurs onMessage pour le même type de message, car l'ordre de déclenchement des différents écouteurs ne sera pas garanti.

-

Lorsque vous voulez garantir la livraison d'un message à un point final spécifique, utilisez l'approche basée sur la connexion pour échanger des messages.

+

Lorsque vous voulez garantir la livraison d'un message à une terminaison spécifique, utilisez l'approche basée sur la connexion pour échanger des messages.

-

Avec le message lui-même, l’écouteur reçoit en paramètres :

+

En plus du message, l’écouteur reçoit en paramètres :

-

Vous pouvez envoyer une réponse synchrone au message en appelant la fonction sendResponse dans votre écouteur. Voir un exemple.

+

Vous pouvez envoyer une réponse synchrone au message en appelant la fonction sendResponse() dans votre écouteur. Voir un exemple.

-

Pour envoyer un réponse asynchrone, il existe deux options :

+

Pour envoyer une réponse asynchrone, il existe deux options :

-

Retourner une Promise est maintenant le moyen préféré car sendResponse sera retirée de la spécification W3C.

+

Retourner une promesse (Promise) est désormais la méthode à privilégier car sendResponse() sera retirée de la spécification W3C.

La bibliothèque populaire webextension-polyfill a déjà supprimé cette fonction de son implémentation.

-

Vous pouvez également utiliser une approche basée sur la connexion pour échanger des messages.

+

Vous pouvez également utiliser une approche basée sur la connexion pour échanger des messages.

Syntaxe

-
browser.runtime.onMessage.addListener(listener)
-browser.runtime.onMessage.removeListener(listener)
-browser.runtime.onMessage.hasListener(listener)
+
browser.runtime.onMessage.addListener(listener)
+browser.runtime.onMessage.removeListener(listener)
+browser.runtime.onMessage.hasListener(listener)
+

Les événements ont trois fonctions :

@@ -88,7 +89,7 @@ browser.runtime.onMessage.hasListener(listener)
message
-
object. Le message lui-même. C’est un objet JSON-ifiable.
+
Un objet qui est le message lui-même. C’est un objet sérialisable (voir l'algorithme de clonage de données).
@@ -99,17 +100,17 @@ browser.runtime.onMessage.hasListener(listener)
sendResponse
-

Une fonction à appeler, au plus une fois, pour envoyer une réponse au message. La fonction prend un seul argument, qui peut être n'importe quel objet JSON-ifiable. Cet argument est renvoyé à l'expéditeur du message.

+

Une fonction à appeler, au plus une fois, pour envoyer une réponse au message. La fonction prend un seul argument, qui peut être n'importe quel objet sérialisable (voir l'algorithme de clonage de données). Cet argument est renvoyé à l'expéditeur du message.

Si vous avez plus d'un écouteur onMessage() dans le même document, alors un seul peut envoyer une réponse.

Pour envoyer une réponse de manière synchrone, appelez sendResponse() avant le retour de la fonction d'écoute.

-

Pour envoyer une réponse de manière asynchrone

+

Pour envoyer une réponse de manière asynchrone :

    -
  • soit garder une référence à l'argument sendResponse() et retourner true depuis la fonction listenener. Vous pourrez alors appeler sendResponse() après le retour de la fonction d'écoute.
    • -
  • 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é
    • +
  • soit on gardera une référence à l'argument sendResponse() et on retournera true depuis la fonction listenener. sendResponse() pourra être appelée après le retour de la fonction d'écoute.
    • +
  • 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.
@@ -117,9 +118,9 @@ browser.runtime.onMessage.hasListener(listener)

La fonction listener peut renvoyer un booléen ou une {{jsxref("Promise")}}.

-

Important: N'appelez pas addListener() en utilisant une fonction  async :

+

Important: N'appelez pas addListener() en utilisant une fonction async :

- 
// don't do this
+ 
// ne faites pas ça
 browser.runtime.onMessage.addListener(
   async (data, sender) => {
     if (data.type === 'handle_me') { return 'done'; }
@@ -127,9 +128,9 @@ browser.runtime.onMessage.addListener(
 );
 

 
- 
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.

+ 
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.

 
- 
Si vous souhaitez adopter une approche asynchrone, utilisez plutôt une Promise, comme ceci :

+ 
Si vous souhaitez adopter une approche asynchrone, utilisez plutôt une Promise, comme ceci :

 
  
browser.runtime.onMessage.addListener(
   (data, sender) => {
@@ -147,11 +148,11 @@ browser.runtime.onMessage.addListener(
 
 
 
-
{{Compat("webextensions.api.runtime.onMessage()")}}

+
{{Compat("webextensions.api.runtime.onMessage")}}

 
-
Exemples

+
Exemples

 
-
Exemple simple

+
Exemple simple

 
 
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 :

 
@@ -166,7 +167,7 @@ function notifyExtension(e) {
   browser.runtime.sendMessage({"url": e.target.href});
 }

 
-
Le script d’arrière-plan écoute ces messages et affiche une notification à l’aide de l’API notifications.

+
Le script d’arrière-plan écoute ces messages et affiche une notification à l’aide de l’API notifications.

 
 
// background-script.js
 
@@ -181,9 +182,9 @@ function notify(message) {
   });
 }

 
-
Envoyer une réponse synchrone

+
Envoyer une réponse synchrone

 
-
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 :

+
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 :

 
 
// content-script.js
 
@@ -224,9 +225,9 @@ function handleMessage(request, sender, sendResponse) {
 
 browser.runtime.onMessage.addListener(handleMessage);

 
-
Envoi d’une réponse asynchrone à l’aide de sendResponse

+
Envoi d’une réponse asynchrone à l’aide de sendResponse

 
-
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 return true; dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument sendResponse après le retour de l’écouteur.

+
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 return true; dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument sendResponse() après le retour de l’écouteur.

 
 
// background-script.js
 
@@ -240,7 +241,7 @@ function handleMessage(request, sender, sendResponse) {
 
 browser.runtime.onMessage.addListener(handleMessage);

 
-
Envoi d’une réponse asynchrone à l’aide d’une promesse

+
Envoi d’une réponse asynchrone à l’aide d’une promesse

 
 
Ce script de contenu reçoit le premier lien <a> 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")}} : true si l’emplacement est dans les marque-pages, false sinon.

 
@@ -258,7 +259,7 @@ browser.runtime.sendMessage({
   url: firstLink.href
 }).then(handleResponse);
-

Voici le script d’arrière plan. Il utilise {{WebExtAPIRef("bookmarks.search()")}} pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} :

+

Voici le script d’arrière-plan. Il utilise {{WebExtAPIRef("bookmarks.search()")}} pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} :

// background-script.js
 
@@ -272,7 +273,7 @@ function isBookmarked(message, sender, response) {
 
 browser.runtime.onMessage.addListener(isBookmarked);
-

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 Window.setTimeout() :

+

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 Window.setTimeout() :

// 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
 ---
 
{{AddonSidebar()}}

 
-
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.

+
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.

 
-
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.

+
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.

 
-
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.

+
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 (polyfill).

 
-
Obstacles lors du codage d'extension multiplateforme

+
Obstacles pour les extensions multi-navigateur

 
-
Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :

+
Il existe six domaines que vous devez aborder lorsque vous souhaitez développer une extension multiplateforme :

 
 
    
- 
  • Espace de nommage de l'API
    • 
- 
  • Gestion asynchrone des événements API
    • 
- 
  • Couverture des fonctions API
    • 
- 
  • Clés du Manifest
    • 
- 
  • Package d'Extension
    • 
- 
  • Publication
    • 
+ 
  • L'espace de noms utilisé par l'API
    • 
+ 
  • La gestion asynchrone des événements par l'API
    • 
+ 
  • La couverture des fonctions de l'API
    • 
+ 
  • Les clés du manifeste
    • 
+ 
  • L'empaquetage d'une extension
    • 
+ 
  • La publication
    • 
 

 
-
Espace de nommage de l'API

+
Les espaces de noms des API

 
-
Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :

+
Deux espaces de noms (namespaces) sont utilisés pour les quatre principaux navigateurs :

 
 
    
- 
  • browser.*, le standard proposé pour l'API d'extensions, utilisé par Firefox et Edge.
    • 
- 
  • chrome.* utilisé par Chrome et Opera.
    • 
+ 
  • browser.*, l'espace standard  de l'API, utilisé par Firefox et Edge.
    • 
+ 
  • chrome.*, utilisé par Chrome et Opera.
    • 
 

 
-
Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

+
Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

 
-
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.

+
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.

 
-
Gestion asynchrone des événements API

+
Gestion asynchrone des événements

 
 
Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :

 
 
    
- 
  • Promises, le standard proposé pour l'API d'extensions, utilisé par Firefox.
    • 
- 
  • callbacks, utilisés par Chrome, Edge, et Opera.
    • 
+ 
  • Les promesses, le standard proposé pour l'API d'extensions, utilisé par Firefox.
    • 
+ 
  • Les callbacks (fonctions de rappel), utilisés par Chrome, Edge, et Opera.
    • 
 

 
-
Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* 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.

+
Firefox prend également en charge les callbacks pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* 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.

 
-
Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente ou la page des promesses d'utilisation de MDN.

+

+ 
Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le JavaScript asynchrone : Rappels, promesses et synchronisation/attente ou la page sur l'utilisation des promesses de MDN.

+

 
-
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 navigateur WebExtension API Polyfill. 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.

+
Polyfill pour l'API WebExtension du navigateur

 
-
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 versions de GitHub. Vous référencerez alors browser-polyfill.js dans :

+
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 polyfill pour l'API WebExtension du navigateur.

+
+
Pour utiliser le polyfill, installez-le dans votre environnement de développement à l'aide de npm ou téléchargez-le directement depuis les versions de GitHub

+
+
Vous référencerez alors browser-polyfill.js dans :

 
 
    
  
  • manifest.json, pour mettre à disposition des scripts de fond et de contenu.
    • 
- 
  • Documents HTML, tels que les popups browserAction ou les pages à onglet.
    • 
- 
  • L'appel executeScript dans les scripts de contenu dynamiquement injectés chargés par tabs.executeScript, où il n'a pas été chargé en utilisant une déclaration content_scripts dans manifest.json.
    • 
+ 
  • Les documents HTML, tels que les popups browserAction ou les pages d'onglet.
    • 
+ 
  • L'appel à executeScript dans les scripts de contenu dynamiquement injectés chargés par tabs.executeScript, où il n'a pas été chargé en utilisant une déclaration content_scripts dans manifest.json.
    • 
 

 
-
Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

+
Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

 
 
{
  // ...
@@ -78,165 +84,136 @@ original_slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browse
  }
 }

 
-
Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

+
Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

 
-
Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

+

+ 
Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

+

 
-
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.

+
Il existe d'autres options de polyfill mais, au moment où nous écrivons ces lignes, aucune ne fournit une couverture équivalente à ce polyfill 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 polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge multi-navigateur, ou de développer votre propre polyfill.

 
-
Couverture des fonctions API

 
-
Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :

 
-
    
- 
  • 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 vie privée.
    • 
- 
  • Variations in the support for features within a function. For example, at the time of writing, Firefox doesn’t support the notification function method onButtonClicked while Firefox is the only browser that supports onShown.
    • 
- 
  • Proprietary functions, supporting browser specific features. For example, at the time of writing, containers was a Firefox-specific feature supported by the contextualIdentities function.
    • 
-

+
Couverture des différentes implémentations d'API

+
+
Les différences de fonctionnalités offertes par les différents navigateurs peuvent se répartir en trois catégories :

 
-
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 Browser support for JavaScript APIs page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network JavaScript APIs reference pages.

+
    
+ 
  1. L'absence de prise en charge d'une fonctionnalité à part entière.
    2. 
+ 
  2. Les variations de prise en charge pour certains aspects d'une fonctionnalité. Au moment où nous écrivons ces lignes, Firefox ne prend pas en charge la méthode onButtonClicked mais est le seul navigateur qui prend en charge onShown.
    3. 
+ 
  3. Les fonctionnalités propriétaires spécifiques à chaque navigateur. 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 contextualIdentities.
    4. 
+

 
-
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.

+
Vous pouvez trouver plus de détails sur la prise en charge de l'API pour les différents navigateurs sur La prise en charge des API JavaScript WebExtension pour les différents navigateurs. Les informations de compatibilité sont également disponibles sur chaque page de la référence des API JavaScript WebExtension.

 
-
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.

+
Handling API differences

 
-
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.

+
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.

 
-
The following code enables you to perform a runtime check:

+
À 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

+
+
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.

+
+
Le fragment de code suivant vous permet de vérifier l'existance d'une fonction lors de l'exécution :

 
 
if (typeof <function> === "function") {
    // safe to use the function
 }

 
-
Manifest keys

+
Les clés de manifeste

 
-
The differences in the manifest.json file keys supported by the four main browsers fall broadly into three categories:

+
Les différences pour les clés du fichier manifest.json se répartissent en trois catégories :

 
-
    
- 
  • Extension information attributes. For example, at the time of writing, Firefox and Opera include the developer key for details about the developer, as well as the author, of the extension.
    • 
- 
  • Extension features. For example, at the time of writing, Edge did not support the commands key that enables shortcut keys to be defined for an extension.
    • 
- 
  • Key optionality. For example, at the time of writing, the author key is mandatory in Edge but optional in the other main browsers.
    • 
-

+
    
+ 
  1. Les attributs d'information sur l'extension. Firefox et Opera incluent la clé developer pour fournir des détails quant à la développeuse ou au développeur de l'application et la clé author.
    2. 
+ 
  2. Les fonctionnalités rattachées à l'extension. Edge ne prenait pas en charge la clé commands qui permet de définir des raccourcis clavier pour une extension.
    3. 
+ 
  3. Le caractère optionnel d'une clé. Ainsi, la clé author était obligatoire dans Edge mais optionnelle pour les autres navigateurs.
    4. 
+

 
-
Browser compatibility information is included with each key in the Mozilla Developer Network manifest.json key reference pages.

+
Les informations quant à la compatibilité de chaque clé de manifeste sont incluses dans les pages de référence correspondantes.

 
-
As manifest.json 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.

+
Le fichier manifest.json é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.

 
-
Extension packaging

+
Empaquetage des extensions

 
-
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 manifest.json file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.

+
L'empaquetage d'une extension pour la distribuer via les plateformes des navigateurs est uniforme .

 
-
For details on packaging, refer to the guidance on the respective extension’s developer portals.

+
    
+ 
  • Firefox, Chrome, et Opera utilise une archive ZIP dans laquelle le fichier  manifest.json doit être à la racine.
    • 
+ 
  • Pour Microsoft, des étapes supplémentaires sont nécessaires.
    • 
+

+
+
Pour plus de détails sur les méthodes d'empaquetage, veuillez vous référer aux documentations de chaque portail de distribution.

+
+
Publication des extensions

+
+
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.

 
-
Publishing

+
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.

 
-
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:

+
Le tableau qui suit récapitule les approches et fonctionnalités pour chaque plateforme de distribution :

 
 
- 
+ 
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
+ 
+ 
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   
-   
-   
-   
-   
-   
+   
+   
+   
+   
+   

   

-    
Registration fee

-   		
-    
Upload utility

-   		
-    
Pre-publication review process

-   		
-    
Account two factor authentication

-   		NavigateurFrais d'enregistrementUtilitaire pour l'uploadProcessus de revue avant la publicationAuthentification multi-facteur
   

   

-    
Firefox

-   		
-    
No

-   		
-    
web-ext

-   		
-    
Automatic, a few seconds1

-   		
-    
No

-   		FirefoxNonweb-extAutomatique, quelques secondes1Non
   

   

-    
Chrome

-   		
-    
Yes

-   		
-    
Yes

-   		
-    
Automatic, less than an hour

-   		
-    
Yes

-   		ChromeOuiOuiAutomatique, moins d'une heureOui
   

   

-    
Opera

-   		
-    
No

-   		
-    
No

-   		
-    
Manual, no SLA provided

-   		
-    
No

-   		OperaNonNonManuel, aucun délai garantiNon
   

   

-    
Edge

-   		
-    
Yes

-   		
-    
No

-   		
-    
Manual, up to 72 hours2

-   		
-    
Yes

-   		EdgeOuiNonManuel, jusqu'à 72 heures2Oui
   

  
 

 
-
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.

+
1 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.

 
-
2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.

+
2 Au moment où nous écrivons ces lignes, Microsoft approuvait uniquement la publication d'extensions pré-approuvées.

 
-
Other considerations

+
Autres considérations

 
-
Extension naming

+
Nommage des extensions

 
-
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.

+
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.

 
-
Version numbering

+
Aucune des autres plateformes n'impose de restrictions quant au nom de l'extension.

 
-
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.

+
Numérotation des versions

 
-
Share content

+
Les plateformes de distribution pour Firefox et Chrome requièrent un numéro de version distinct et croissant pour chaque upload. 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.

 
-
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:

+
Partage des ressources

+
+
Lorsque vous développez une extension pour Safari, vous pouvez réutiliser les éléments suivants entre vos différentes implémentations :

 
 
    
  
  • Images
    • 
@@ -246,8 +223,10 @@ original_slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browse
 
 
    Conclusion
    
 
-
    When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the WebExtension browser API Polyfill. 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.
    
+
    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 le polyfill pour les API WebExtension. 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.
    
+
+
    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 (manifest.json) ; ce dernier pouvant être créé manuellement. L'empaquetage et la distribution contiennent également quelques différences en fonction des plateformes.
    
 
-
    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 manifest.json 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.
    
+
    Vous pouvez utiliser browser-extension-template pour rapidement mettre en place un projet d'extension, l'empaqueter et la publier.
    
 
-
    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.
    
+
    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.
    
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
 
    {{AddonSidebar}}
    
 
 
    
-
    Si vous connaissez déjà les concepts de base des extensions de navigateur, passez cette section pour voir comment les fichiers d'extension sont assemblés. Ensuite, utilisez la documentation de référence pour commencer la construction de votre extension. Visitez l'atelier sur les extensions de Firefox pour en savoir plus sur le flux de travail pour le test, la publication et les extensions Firefox.
    
+
    Si vous connaissez déjà les concepts de base des extensions de navigateur, vous pouvez directement consulter  afin de voir comment les fichiers d'extension sont assemblés. Ensuite, utilisez la documentation de référence pour commencer la construction de votre extension. Visitez l'atelier sur les extensions de Firefox pour en savoir plus sur le processus de test et de publication des WebExtensions pour Firefox.
    
 
    
 
-
    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.
    
+
    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.
    
 
 
    Le code source de cet exemple est disponible sur GitHub : https://github.com/mdn/webextensions-examples/tree/master/borderify.
    
 
-
    Pour commencer, il vous faut Firefox version 45 ou supérieure.
    
+
    Pour commencer, il vous faut Firefox (dans la version 45 ou avec une version  supérieure).
    
 
-
    Ecriture de l'extension
    
+
    Écriture de l'extension
    
 
-
    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 :
    
+
    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 :
    
 
-
    mkdir borderify
+
    mkdir borderify
 cd borderify
    
 
 
    manifest.json
    
 
-
    Créez un nouveau fichier nommé "manifest.json" directement dans le répertoire "borderify" et tapez-y le contenu suivant :
    
+
    Créez un nouveau fichier nommé manifest.json directement dans le répertoire borderify et tapez-y le contenu suivant :
    
 
-
    {
+
    {
 
   "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
    
 }
    
 
 
      
- 
    • Les trois premières clés : manifest_version, name, et version sont obligatoires et contiennent des métadonnées fondamentaux qui sont nécessaires au module.
      • 
- 
    • description est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module.
      • 
- 
    • icons est optionnelle, mais recommandée : elle permet d'établir l'icône du module qui s'affichera dans le gestionnaire de module.
      • 
+ 
    • Les trois premières clés : manifest_version, name, et version sont obligatoires et contiennent des métadonnées fondamentales nécessaires au module.
      • 
+ 
    • description est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module.
      • 
+ 
    • icons est optionnelle, mais recommandée : elle permet d'établir l'icône du module qui s'affichera dans le gestionnaire de module.
      • 
 
    
 
-
    La clé la plus intéressante ici est content_scripts, 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.
    
+
    La clé la plus intéressante ici est content_scripts, 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é borderify.js dans toutes les pages HTTP ou HTTPS du domaine "mozilla.org" et tous ses sous-domaines.
    
 
 
 
 
    
-
    Dans certaines situations, vous devez établir un ID pour votre extension. Si vous avez besoin d'établir un ID pour votre extension, incluez la clé browser_specific_settings dans manifest.json et définissez sa propriété gecko.id :
    
+
    Dans certaines situations, vous devez établir un identifiant pour votre extension. Si vous avez besoin d'établir un identifiant pour votre extension, incluez la clé browser_specific_settings dans manifest.json et définissez sa propriété gecko.id :
    
 
-
    "browser_specific_settings": {
+
    "browser_specific_settings": {
   "gecko": {
     "id": "borderify@example.com"
   }
@@ -77,85 +77,85 @@ cd borderify
    
 
 
    icons/border-48.png
    
 
-
    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".
    
+
    Le module doit posséder une icône qui sera affichée dans le gestionnaire de modules du navigateur. Le fichier manifest.json utilisé ici fournit une icône icons/border-48.png.
    
 
-
    Créons le répertoire "icons" directement sous le répertoire "borderify". Fournissez une icône nommée "border-48.png".  Vous pouvez utiliser celle-ci, qui est tirée du repértoire d'icônes Google Material Design, et est utilisable à condition de respecter les termes de la license Creative Commons Attribution-ShareAlike.
    
+
    Créons le répertoire icons directement sous le répertoire borderify. Fournissez une icône nommée border-48.png. Vous pouvez utiliser celle-ci, qui est tirée du repértoire d'icônes Google Material Design, et est utilisable à condition de respecter les termes de la licence Creative Commons Attribution-ShareAlike.
    
 
-
    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é 96 de l'objet icon dans le fichier "manifest.json" :
    
+
    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é 96 de l'objet icon dans le fichier manifest.json :
    
 
-
    "icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
    
+
    "icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
    
 
 
    Une alternative est de fournir un fichier SVG qui sera automatiquement mis à la bonne échelle.
    
 
 
 
 
    borderify.js
    
 
-
    Enfin, créez un fichier nommé "borderify.js" directement dans le répertoire "borderify" et insérez-y ceci :
    
+
    Enfin, créez un fichier nommé borderify.js directement dans le répertoire borderify et insérez-y ceci :
    
 
-
    document.body.style.border = "5px solid red";
    
+
    document.body.style.border = "5px solid red";
    
 
-
    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é content_scripts du manifest.json. Ce script a un accès direct au document contrairement à des scripts chargés par la page elle-même.
    
+
    Ce script sera chargé dans chaque page où le domaine correspond au motif fourni par la clé content_scripts du manifeste. Ce script a un accès direct au document contrairement à des scripts chargés par la page elle-même.
    
 
 
 
-
    Essai
    
+
    Essai
    
 
 
    D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit :
    
 
-
    borderify/
+
    borderify/
     icons/
         border-48.png
     borderify.js
     manifest.json
    
 
-
    Installation
    
+
    Installation
    
 
-
    Dans Firefox : Ouvrez la page about:debugging, 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.
    
+
    Dans Firefox : Ouvrez la page about:debugging, 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.
    
 
 
    {{EmbedYouTube("cer9EUKegG4")}}
    
 
-
    Le module complémentaire est dorénavant installé et résidera jusqu’à ce que vous redémarriez Firefox.
    
+
    Le module complémentaire est dorénavant installé et persistera jusqu’à ce que vous redémarriez Firefox.
    
 
-
    Une autre alternative est d’exécuter la WebExtension depuis la ligne de commande à l'aide de l'outil web-ext.
    
+
    Une autre alternative est d’exécuter l'extension depuis la ligne de commande à l'aide de l'outil web-ext.
    
 
-
    Test
    
+
    Test
    
 
 
    Rendez-vous sur une page web du domaine "mozilla.org". Vous devriez y voir une bordure rouge qui entoure la page :
    
 
 
    {{EmbedYouTube("rxBQl2Z9IBQ")}}
    
 
 
    
-
    Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les content scripts sont bloqués sur ce domaine.
    
+
    Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les scripts de contenu sont bloqués sur ce domaine.
    
 
    
 
-
    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 :
    
+
    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 :
    
 
 
    {{EmbedYouTube("NuajE60jfGY")}}
    
 
 
 
-
    Empaqueter et publier
    
+
    Empaqueter et publier
    
 
-
    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 "Publier votre extension".
    
+
    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 "Publier votre extension".
    
 
-
    Et ensuite ?
    
+
    Et ensuite ?
    
 
-
    Maintenant, vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox :
    
+
    Maintenant que vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox, voici quelques suggestions pour la suite :
    
 
 
-- 
cgit v1.2.3-54-g00ecf