Skip to content

Commit

Permalink
Typofixes and rewording from review
Browse files Browse the repository at this point in the history
Co-authored-by: v-gb <[email protected]>
  • Loading branch information
SphinxKnight and v-gb committed Apr 11, 2024
1 parent 1ae42cb commit 79ef92b
Showing 1 changed file with 27 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ l10n:

L'API [WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions) dispose d'un module pour [l'internationalisation](/fr/docs/Glossary/Internationalization) des extensions&nbsp;: [`i18n`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n). Dans cet article, nous allons explorer ses fonctionnalités et illustrer son utilisation par un exemple pratique. L'API `i18n` pour les extensions web est similaire aux bibliothèques JavaScript tierces d'internationalisation.

> **Note :** L'exemple d'extension présenté dans cet article, [`notify-link-clicks-i18n`](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n), est disponible sur GitHub. Suivez le code source pendant que vous parcourez les sections suivantes.
> **Note :** L'exemple d'extension présenté dans cet article, [`notify-link-clicks-i18n`](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n), est disponible sur GitHub. Suivez le code source pendant que vous parcourez cette page.
## Anatomie d'une extension internationalisée

Une extension internationalisée peut contenir les mêmes fonctionnalités que n'importe quelle autre extension ([scripts d'arrière-plan](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#scripts_darrière-plan), [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#scripts_de_contenu), etc.), mais elle possède du contenu supplémentaire lui permettant de basculer entre différentes locales. Les éléments ajoutés pour l'internationalisation sont listés dans l'arborescence suivante&nbsp;:
Une extension internationalisée peut contenir les mêmes fonctionnalités que n'importe quelle autre extension ([scripts d'arrière-plan](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#scripts_darrière-plan), [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#scripts_de_contenu), etc.), mais avec du contenu supplémentaire lui permettant de basculer entre différentes locales. Les éléments ajoutés pour l'internationalisation sont résumés dans l'arborescence suivante&nbsp;:

- `répertoire-racine-de-l'extension/`
- `_locales`
Expand All @@ -25,14 +25,14 @@ Une extension internationalisée peut contenir les mêmes fonctionnalités que n
- `messages.json`&nbsp;: un fichier qui contiendra les chaînes de caractères en allemand
- etc.
- `manifest.json`&nbsp;: des métadonnées relatives aux locales sont ajoutées au [manifeste](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json)
- `fichierJavaScript.js`&nbsp;: dans les scripts, on ajoutera généralement une logique pour récupérer la locale du navigateur, certains messages spécifiques pour chaque locale, etc.
- `mesStyles.css`&nbsp;: le code CSS pourra utiliser des paramètres pour chaque locale si nécessaire.
- `fichierJavaScript.js`&nbsp;: de la logique pour récupérer la locale du navigateur, récupérer les messages spécifiques à la locale courante, etc.
- `mesStyles.css`&nbsp;: les règles CSS peuvent changer de comportement suivant la locale

Examinons chacune de ces fonctionnalités supplémentaires. Chacune des sections qui suit représente une étape à suivre pour l'internationalisation de votre extension.

## Fournir des chaînes localisées dans `_locales`

L'internationalisation nécessite de fournir des chaînes traduites pour les différentes locales qu'on souhaite prendre en charge. Pour les extensions, le répertoire `_locales`, présent à la racine de l'extension, contient un répertoire pour chaque locale, nommé grâce à [l'étiquette de langue correspondante](https://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF) et ce dernier contient un fichier `messages.json` avec les chaînes de caractères traduites pour la locale correspondante.
L'internationalisation nécessite de fournir des chaînes traduites pour les différentes locales qu'on souhaite prendre en charge. Pour les extensions, le répertoire `_locales`, présent à la racine de l'extension, contient un sous-répertoire pour chaque locale, nommé grâce à [l'étiquette de langue correspondante](https://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF) et ce dernier contient un fichier `messages.json` avec les chaînes de caractères traduites pour la locale correspondante.

> **Attention :** Contrairement à la convention qui consiste à séparer la sous-étiquette de base et celle de la variante régionale par un tiret (par exemple `en-US` ou `fr-CA`), **il faudra utiliser un tiret bas pour le nom du répertoire sous `_locales`** (par exemple `en_US` ou `fr_CA`).
Expand Down Expand Up @@ -82,23 +82,23 @@ Plusieurs actions sont nécessaires pour internationaliser le manifeste (`manife

### Récupérer les chaînes localisées dans le manifeste

[Le manifeste de l'extension](ttps://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/manifest.json) contient des chaînes de caractères qui seront visibles de l'utilisatrice et de l'utilisateur, comme le nom et la description de l'extension. Si vous localisez ces chaînes en plaçant les traductions appropriées dans les fichiers `messages.json`, la traduction correspondante sera affichée en fonction des paramètres de locale du navigateur.
[Le manifeste de l'extension](https://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/manifest.json) contient des chaînes de caractères qui seront visibles de l'utilisatrice et de l'utilisateur, comme le nom et la description de l'extension. Si vous internationalisez ces propriétés et placez les traductions appropriées dans les fichiers `messages.json`, la traduction appropriée sera affichée en fonction des paramètres de locale du navigateur.

Pour localiser ces métadonnées, renseignez le manifeste ainsi&nbsp;:
Pour internationaliser ces propriétés, renseignez le manifeste ainsi&nbsp;:

```json
"name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__",
```

Ces valeurs spéciales indiqueront au navigateur qu'il convient de rechercher la chaîne localisée correspondante, plutôt que d'utiliser une valeur statique qui serait identique pour chaque locale.
Ces valeurs spéciales indiqueront au navigateur de rechercher la chaîne localisée correspondante, plutôt que d'utiliser la mème valeur statique pour toutes les locales.

Pour utiliser une référence à un message localisé, composez la chaîne de caractères comme ceci&nbsp;:
Pour faire référence à un message localisé, composez la chaîne de caractères en concaténant&nbsp;:

1. Deux tirets bas (`__`), suivis de
2. La chaîne `MSG`, suivi de
3. Un tiret bas (`_`), suivi du
4. Nom du message visé, tel qu'il est défini dans `messages.json`, suivi de
1. Deux tirets bas (`__`)
2. La chaîne `MSG`
3. Un tiret bas (`_`)
4. Le nom du message visé, tel qu'il est défini dans `messages.json`
5. Deux tirets bas (`__`)

```plain
Expand All @@ -113,13 +113,13 @@ Par exemple, si on souhaite utiliser le message localisé identifié par la clé

### Indiquer une locale par défaut

Dans le manifeste, un autre champ doit être renseigné. Il s'agit de [`default_locale`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale), qui indique la locale à utiliser par défaut.
Dans le manifeste, il est conseillé de renseigner la propriété [`default_locale`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale).

```json
"default_locale": "en"
```

Cette locale sera celle utilisée si l'extension ne contient pas de chaîne localisée pour la locale courante du navigateur. Si un message n'est pas disponible dans la locale courante du navigateur, ce dernier utilisera la locale par défaut afin de fournir un texte alternatif. Nous verrons ci-après [certaines informations supplémentaires importantes sur la façon dont le navigateur sélectionne les chaînes de caractères effectivement utilisées](#algorithme_de_sélection_de_la_chaîne_de_caractères_localisée).
Si un message n'est pas disponible dans la locale courante du navigateur, ce dernier cherchera le message dans la locale `default_locale`. Nous verrons ci-après [des informations supplémentaires importantes sur la façon dont le navigateur sélectionne les messages effectivement utilisés](#algorithme_de_sélection_de_la_chaîne_de_caractères_localisée).

## Utiliser du code CSS variant selon la locale

Expand All @@ -133,16 +133,16 @@ header {

Voir aussi [comment utiliser des messages prédéfinis](#messages_prédéfinis) ci-après qui permet une meilleure gestion dans certains cas.

## Récupérer des messages localisés dans le code JavaScript
## Récupérer des messages localisés en JavaScript

Après avoir mis en place les fichiers contenant les messages et paramétré le manifeste, voyons comment utiliser les messages localisés depuis le code JavaScript afin que l'extension utilise la bonne locale autant que possible. [L'API `i18n`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n) dispose de quatre méthodes&nbsp;:

- [`i18n.getMessage()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage)
- : Il s'agit de la méthode que vous utiliserez le plus souvent. Elle permet de récupérer un message traduit à partir de son identifiant. Nous verrons des exemples d'utilisation après.
- : Il s'agit de la méthode que vous utiliserez le plus souvent. Elle récupère un message localisé à partir de son identifiant. Nous verrons des exemples d'utilisation après.
- [`i18n.getAcceptLanguages()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages) et [`i18n.getUILanguage()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage)
- : Ces méthodes peuvent être utilisées pour personnaliser l'interface utilisateur en fonction de la locale (par exemple pour réordonner une liste d'options en mettant les options spécifiques aux langues préférées de l'utilisateur en premier, ou afficher des informations culturelles pertinentes uniquement pour une certaine locale, ou formater les dates affichées en respectant la locale courante du navigateur).
- [`i18n.detectLanguage()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage)
- : Cette méthode peut être utilisée afin de détecter la langue du contenu saisi par la personne afin de le formater correctement.
- : Cette méthode peut être utilisée pour détecter la langue de contenus utilisateurs afin de le formater correctement.

Dans [l'exemple `notify-link-clicks-i18n`](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n), [le script d'arrière-plan](https://github.com/mdn/webextensions-examples/blob/main/notify-link-clicks-i18n/background-script.js) contient ces lignes&nbsp;:

Expand All @@ -151,7 +151,7 @@ let title = browser.i18n.getMessage("notificationTitle");
let content = browser.i18n.getMessage("notificationContent", message.url);
```

La première ligne récupère le message avec l'identifiant `notificationTitle` depuis le fichier `messages.json` le plus pertinent pour la locale courante du navigateur. La seconde ligne est similaire, mais fournit en plus une URL comme deuxième paramètre. C'est cette valeur qui sera utilisée pour remplacer l'emplacement de substitution `$URL$` qui avait été placé dans le champ `message` du champ `notificationContent`&nbsp;:
La première ligne récupère le message avec l'identifiant `notificationTitle` depuis le fichier `messages.json` le plus pertinent pour la locale courante du navigateur. La seconde ligne est similaire, mais fournit en plus une URL comme deuxième paramètre. Cette valeur sera utilisée pour remplacer l'emplacement de substitution `$URL$` dans le champ `message` du champ `notificationContent`&nbsp;:

```json
"notificationContent": {
Expand Down Expand Up @@ -182,7 +182,7 @@ You clicked https://developer.mozilla.org.

### Utilisation directe d'un emplacement de substitution

Il est possible d'insérer vos variables (`$1`, `$2`, `$3`, etc.) directement dans les chaînes de message. Par exemple nous pourrions réécrire le membre `"notificationContent"` comme ceci&nbsp;:
Il est possible d'insérer vos variables (`$1`, `$2`, `$3`, etc.) directement dans les chaînes de message. Par exemple nous pourrions réécrire la propriété `"notificationContent"` comme ceci&nbsp;:

```json
"notificationContent": {
Expand All @@ -191,7 +191,7 @@ Il est possible d'insérer vos variables (`$1`, `$2`, `$3`, etc.) directement da
}
```

Cela peut sembler plus rapide et moins complexe, mais l'utilisation de `"placeholders"` est considérée comme une meilleure pratique. En effet, disposer du nom de l'emplacement réservé (par exemple `"url"`) et de l'exemple vous aidera à vous souvenir du rôle de cet emplacement. Au contraire, si vous utilisez uniquement `$1``$8`, après une semaine, vous aurez plus de difficultés à retrouver les correspondances.
Cela peut sembler plus rapide et moins complexe, mais l'utilisation de `"placeholders"` est considérée comme une meilleure pratique. En effet, le nom de l'emplacement réservé (par exemple `"url"`) et l'exemple vous aideront à vous souvenir du rôle de cet emplacement. Au contraire, si vous utilisez uniquement `$1``$8`, après une semaine, vous aurez plus de difficultés à retrouver les correspondances.

### Substitution codée en dur

Expand All @@ -209,13 +209,13 @@ Il est également possible d'inclure des chaînes statiques dans des emplacement
}
```

Dans ce cas, nous plaçons une chaîne statique pour la substitution plutôt que de l'obtenir à partir d'une variable comme `$1`. Cette technique peut s'avérer utile lorsque le fichier contenant les messages est très complexe et qu'il devient nécessaire de séparer différentes valeurs afin de rendre les chaînes plus lisibles dans le fichier. De plus, on pourra accéder à ces valeurs depuis le code JavaScript.
Dans ce cas, nous plaçons une chaîne statique pour la substitution plutôt que de l'obtenir à partir d'une variable comme `$1`. Cette technique peut s'avérer utile lorsque le fichier de messages est très complexe et qu'il devient nécessaire de séparer différentes valeurs afin de rendre le fichier plus lisible. De plus, ces valeurs sont alors accessibles en JavaScript.

En outre, vous pouvez utiliser ces substitutions pour spécifier les parties de la chaîne que vous ne souhaitez pas traduire, telles que les noms de personne ou d'entreprise.

## Algorithme de sélection de la chaîne de caractères localisée

Les locales peuvent être indiquées à l'aide d'une étiquette de langue simple comme `fr` ou `en`, ou fournies avec un sous-étiquette de région comme `en_US` ou `en_GB`. Lorsqu'on utilise l'API `i18n` afin de récupérer une chaîne de caractères traduite, le moteur du navigateur utilise l'algorithme suivant&nbsp;:
Les locales peuvent être indiquées à l'aide d'une simple étiquette de langue comme `fr` ou `en`, ou avec en plus une sous-étiquette de région comme `en_US` ou `en_GB`. Lorsqu'on utilise l'API `i18n` afin de récupérer une chaîne de caractères localisée, le navigateur utilise l'algorithme suivant&nbsp;:

1. S'il existe un fichier `messages.json` pour exactement la locale courante, et si ce fichier contient la chaîne demandée, c'est celle-ci qui est renvoyée.
2. Sinon, si la locale courante est fournie avec une sous-étiquette de région (par exemple `en_US`) et qu'il existe un fichier `messages.json` pour l'étiquette de langue correspondante sans région (par exemple `en`), et si ce fichier contient la chaîne, c'est celle-ci qui est renvoyée.
Expand Down Expand Up @@ -318,7 +318,7 @@ header {

Grâce à cette écriture, nous pouvons stocker nos images localisées dans des répertoires qui correspondent aux différentes locales prises en charge (`en`, `de`, etc.).

Prenons un autre exemple où nous utilisons le les messages prédéfinis `@@bidi_*` dans un fichier CSS&nbsp;:
Prenons un autre exemple où nous utilisons les messages prédéfinis `@@bidi_*` dans un fichier CSS&nbsp;:

```css
body {
Expand All @@ -335,7 +335,7 @@ div#header {
}
```

Pour les langues écrites de gauche à droite telles que le français, les déclarations CSS avec les messages prédéfinis ci-dessus seraient extrapolées pour obtenir le code suivant&nbsp;:
Pour les langues écrites de gauche à droite telles que le français, les déclarations CSS avec les messages prédéfinis ci-dessus se comportent ainsi&nbsp;:

```css
direction: ltr;
Expand All @@ -353,10 +353,10 @@ padding-left: 1.5em;

## Tester votre extension

Pour tester la localisation de votre extension, utilisez [Firefox](https://www.mozilla.org/fr/firefox/new/) ou [Firefox Beta](https://www.mozilla.org/fr/firefox/channel/desktop/) qui permettent d'installer des packs de langue.
Pour tester la localisation de votre extension, utilisez [Firefox](https://www.mozilla.org/fr/firefox/new/) ou [Firefox Beta](https://www.mozilla.org/fr/firefox/channel/desktop/), car ils permettent d'installer des packs de langue.

Ensuite, pour chaque locale que vous prenez en charge et que vous voulez tester, suivez les instructions de la page [Utiliser Firefox dans une autre langue](https://support.mozilla.org/fr/kb/utiliser-firefox-dans-autre-langue) afin de changer la locale utilisée pour l'interface utilisateur de Firefox (si vous connaissez les paramètres, allez dans la section Langue et utilisez Choisir des alternatives).

Lorsque Firefox s'exécute dans la locale à tester, [installez l'extension temporairement](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/). Après avoir installé votre extension, vérifiez dans la page `about:debugging` que votre extension est bien mise en place et que l'icône, le nom et la description apparaissent avec la bonne locale. Vous pouvez également vérifier les métadonnées localisées via la page `about:addons`. Une fois ces vérifications effectuées, utilisez l'extension et ses fonctionnalités pour vérifier que les chaînes localisées sont bien présentes.
Lorsque Firefox utilise la locale à tester, [installez l'extension temporairement](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/). Après avoir installé votre extension, vérifiez dans la page `about:debugging` que votre extension est bien mise en place et que l'icône, le nom et la description apparaissent avec la bonne locale. Vous pouvez également vérifier les métadonnées localisées via la page `about:addons`. Finalement, utilisez les fonctionnalités de l'extension pour vérifier que les chaînes localisées sont bien présentes.

Si vous souhaitez vous faire la main sur ce processus de test, vous pouvez utiliser [l'exemple d'extension `notify-link-clicks-i18n`](https://github.com/mdn/webextensions-examples/tree/main/notify-link-clicks-i18n). Paramétrez Firefox pour qu'il s'affiche dans l'une des locales prise en charge (l'allemand, le néerlandais ou le japonais), chargez l'extension et allez sur un site web. Cliquez sur un lien pour voir la notification localisée indiquer le lien de l'URL.

0 comments on commit 79ef92b

Please sign in to comment.