chrome.i18n

Description

Vous devez placer toutes les chaînes visibles par l'utilisateur dans un fichier nommé messages.json. Chaque fois que vous ajoutez un paramètre régional, vous ajoutez un fichier de messages dans un répertoire nommé _locales/_localeCode_, où localeCode est un code tel que en pour l'anglais.

Voici la hiérarchie des fichiers pour une extension internationalisée compatible avec l'anglais (en), l'espagnol (es) et le coréen (ko) :

Prendre en charge plusieurs langues

Supposons que vous ayez une extension avec les fichiers indiqués dans la figure suivante :

Pour internationaliser cette extension, vous devez nommer chaque chaîne visible par l'utilisateur et la placer dans un fichier de messages. Le fichier manifeste, les fichiers CSS et le code JavaScript de l'extension utilisent le nom de chaque chaîne pour obtenir sa version localisée.

Voici à quoi ressemble l'extension lorsqu'elle est internationalisée (notez qu'elle ne comporte toujours que des chaînes en anglais) :

<img "__msg_extname__",="" "default_locale"="" "en".="" "extname"."="" "hello="" _locales="" a="" alt="In the manifest.json file, " and="" been="" changed="" chrome.i18n.getmessage("extname").="" defines="" en="" file="" file,="" has="" hello="" in="" item="" javascript="" messages.json="" named="" new="" src="/static/images/i18n-after-1.gif" the="" to="" value="" world"="" />

Remarques sur l'internationalisation :

• Vous pouvez utiliser n'importe quel paramètre régional compatible. Si vous utilisez un paramètre régional non compatible, Google Chrome l'ignore.

• Dans les fichiers manifest.json et CSS, faites référence à une chaîne nommée messagename comme suit :

  __MSG_messagename__
  

• Dans le code JavaScript de votre extension ou application, faites référence à une chaîne nommée messagename comme suit :

  chrome.i18n.getMessage("messagename")
  

• Dans chaque appel à getMessage(), vous pouvez fournir jusqu'à neuf chaînes à inclure dans le message. Pour en savoir plus, consultez Exemples : getMessage.

• Certains messages, tels que @@bidi_dir et @@ui_locale, sont fournis par le système d'internationalisation. Consultez la section Messages prédéfinis pour obtenir la liste complète des noms de messages prédéfinis.

• Dans messages.json, chaque chaîne visible par l'utilisateur comporte un nom, un élément "message" et un élément "description" facultatif. Le nom est une clé telle que "extName" ou "search_string" qui identifie la chaîne. "message" spécifie la valeur de la chaîne dans ces paramètres régionaux. La "description" facultative aide les traducteurs, qui ne peuvent pas toujours voir comment la chaîne est utilisée dans votre extension. Exemple :

  {
    "search_string": {
      "message": "hello%20world",
      "description": "The string we search for. Put %20 between words that go together."
    },
    ...
  }
  

  Pour en savoir plus, consultez Formats : messages spécifiques aux paramètres régionaux.

Une fois qu'une extension ou une application est internationalisée, il est facile de la traduire. Vous copiez messages.json, le traduisez et placez la copie dans un nouveau répertoire sous _locales. Par exemple, pour prendre en charge l'espagnol, il vous suffit de placer une copie traduite de messages.json sous _locales/es. La figure suivante montre l'extension précédente avec une nouvelle traduction en espagnol.

Messages prédéfinis

Le système d'internationalisation fournit quelques messages prédéfinis pour vous aider à localiser votre application. Il s'agit notamment de @@ui_locale, qui vous permet de détecter les paramètres régionaux actuels de l'UI, et de quelques messages @@bidi_... qui vous permettent de détecter le sens de lecture du texte. Ces derniers messages ont des noms semblables aux constantes de l'API BIDI (bidirectionnelle) des gadgets.

Le message spécial @@extension_id peut être utilisé dans les fichiers CSS et JavaScript, que l'extension ou l'application soient localisées ou non. Ce message ne fonctionne pas dans les fichiers manifestes.

Le tableau suivant décrit chaque message prédéfini.

Voici un exemple d'utilisation de @@extension_id dans un fichier CSS pour construire une URL :

body {
  background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
}

Si l'ID de l'extension est abcdefghijklmnopqrstuvwxyzabcdef, la ligne en gras de l'extrait de code précédent devient :

  background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/background.png');

Voici un exemple d'utilisation des messages @@bidi_* dans un fichier CSS :

body {
  direction: __MSG_@@bidi_dir__;
}

div#header {
  margin-bottom: 1.05em;
  overflow: hidden;
  padding-bottom: 1.5em;
  padding-__MSG_@@bidi_start_edge__: 0;
  padding-__MSG_@@bidi_end_edge__: 1.5em;
  position: relative;
}

Pour les langues qui se lisent de gauche à droite, comme l'anglais, les lignes en gras deviennent :

  dir: ltr;
  padding-left: 0;
  padding-right: 1.5em;

Paramètres régionaux

Vous pouvez choisir parmi de nombreux paramètres régionaux, y compris certains (comme en) qui permettent à une seule traduction de prendre en charge plusieurs variantes d'une langue (comme en_GB et en_US).

Paramètres régionaux pris en charge

Vous pouvez utiliser l'une des langues prises en charge par le Chrome Web Store.

Recherche de messages

Vous n'avez pas besoin de définir chaque chaîne pour chaque paramètre régional compatible. Tant que le fichier messages.json des paramètres régionaux par défaut comporte une valeur pour chaque chaîne, votre extension ou application s'exécutera, quelle que soit la rareté d'une traduction. Voici comment le système d'extension recherche un message :

1. Recherchez les paramètres régionaux préférés de l'utilisateur dans le fichier de messages (le cas échéant). Par exemple, lorsque les paramètres régionaux de Google Chrome sont définis sur l'anglais britannique (en_GB), le système recherche d'abord le message dans _locales/en_GB/messages.json. Si ce fichier existe et que le message s'y trouve, le système ne cherche pas plus loin.
2. Si les paramètres régionaux préférés de l'utilisateur comportent une région (c'est-à-dire si les paramètres régionaux comportent un trait de soulignement : _), recherchez les paramètres régionaux sans cette région. Par exemple, si le fichier de messages en_GB n'existe pas ou ne contient pas le message, le système recherche dans le fichier de messages en. Si ce fichier existe et que le message s'y trouve, le système ne cherche pas plus loin.
3. Recherchez les paramètres régionaux par défaut dans le fichier de messages. Par exemple, si la valeur "default_locale" de l'extension est définie sur "es" et qu'aucun des fichiers _locales/en_GB/messages.json ni _locales/en/messages.json ne contient le message, l'extension utilise le message de _locales/es/messages.json.

Dans la figure ci-dessous, le message "colores" est présent dans les trois langues prises en charge par l'extension, mais "extName" n'est présent que dans deux d'entre elles. Chaque fois qu'un utilisateur exécutant Google Chrome en anglais américain voit le libellé "Colors", un utilisateur en anglais britannique voit "Colours". Les utilisateurs de l'anglais américain et de l'anglais britannique voient le nom de l'extension "Hello World". Comme la langue par défaut est l'espagnol, les utilisateurs qui exécutent Google Chrome dans une langue autre que l'anglais voient le libellé "Colores" et le nom de l'extension "Hola mundo".

Définir les paramètres régionaux de votre navigateur

Pour tester les traductions, vous pouvez définir les paramètres régionaux de votre navigateur. Cette section vous explique comment définir les paramètres régionaux dans Windows, Mac OS X, Linux et ChromeOS.

Windows

Vous pouvez modifier les paramètres régionaux à l'aide d'un raccourci spécifique ou de l'interface utilisateur Google Chrome. L'approche par raccourci est plus rapide une fois que vous l'avez configurée, et elle vous permet d'utiliser plusieurs langues à la fois.

Utiliser un raccourci spécifique aux paramètres régionaux

Pour créer et utiliser un raccourci qui lance Google Chrome avec des paramètres régionaux spécifiques :

1. Créez une copie du raccourci Google Chrome qui se trouve déjà sur votre bureau.
2. Renommez le nouveau raccourci pour qu'il corresponde à la nouvelle langue.

3. Modifiez les propriétés du raccourci de sorte que le champ "Cible" spécifie les indicateurs --lang et --user-data-dir. La cible devrait se présenter comme suit :

   path_to_chrome.exe --lang=locale --user-data-dir=c:\locale_profile_dir
   

4. Lancez Google Chrome en double-cliquant sur le raccourci.

Par exemple, pour créer un raccourci qui lance Google Chrome en espagnol (es), vous pouvez créer un raccourci nommé chrome-es avec la cible suivante :

path_to_chrome.exe --lang=es --user-data-dir=c:\chrome-profile-es

Vous pouvez créer autant de raccourcis que vous le souhaitez, ce qui facilite les tests dans plusieurs langues. Exemple :

path_to_chrome.exe --lang=en --user-data-dir=c:\chrome-profile-en
path_to_chrome.exe --lang=en_GB --user-data-dir=c:\chrome-profile-en_GB
path_to_chrome.exe --lang=ko --user-data-dir=c:\chrome-profile-ko

Utiliser l'UI

Voici comment modifier les paramètres régionaux à l'aide de l'interface utilisateur de Google Chrome pour Windows :

1. Icône de l'application > Options
2. Sélectionnez l'onglet Sous le capot.
3. Faites défiler la page jusqu'à Contenu Web.
4. Cliquez sur Modifier les paramètres de police et de langue.
5. Sélectionnez l'onglet Langues.
6. Utilisez le menu déroulant pour définir la langue de Google Chrome.
7. Redémarrer Chrome

Mac OS X

Pour modifier les paramètres régionaux sur un Mac, vous devez utiliser les préférences système.

1. Dans le menu Pomme, sélectionnez Préférences Système.
2. Dans la section Personnel, sélectionnez International.
3. Choisir votre langue et votre pays
4. Redémarrer Chrome

Linux

Pour modifier les paramètres régionaux sur Linux, commencez par quitter Google Chrome. Ensuite, sur une seule ligne, définissez la variable d'environnement LANGUAGE et lancez Google Chrome. Exemple :

LANGUAGE=es ./chrome

ChromeOS

Pour modifier les paramètres régionaux sur ChromeOS :

1. Dans la barre d'état système, sélectionnez Paramètres.
2. Dans la section Langues et saisie, sélectionnez le menu déroulant Langue.
3. Si votre langue ne figure pas dans la liste, cliquez sur Ajouter des langues, puis ajoutez-la.
4. Une fois la langue ajoutée, cliquez sur l'élément de menu à trois points Autres actions à côté de votre langue, puis sélectionnez Afficher ChromeOS dans cette langue.
5. Cliquez sur le bouton Redémarrer qui s'affiche à côté de la langue définie pour redémarrer ChromeOS.

Exemples

Vous trouverez des exemples simples d'internationalisation dans le répertoire examples/api/i18n. Pour obtenir un exemple complet, consultez examples/extensions/news. Pour obtenir d'autres exemples et de l'aide pour afficher le code source, consultez Exemples.

Exemples : getMessage

Le code suivant récupère un message localisé à partir du navigateur et l'affiche sous forme de chaîne. Il remplace deux espaces réservés dans le message par les chaînes "string1" et "string2".

function getMessage() {
  var message = chrome.i18n.getMessage("click_here", ["string1", "string2"]);
  document.getElementById("languageSpan").innerHTML = message;
}

Voici comment fournir et utiliser une seule chaîne :

  // In JavaScript code
  status.innerText = chrome.i18n.getMessage("error", errorDetails);

"error": {
  "message": "Error: $details$",
  "description": "Generic error template. Expects error parameter to be passed in.",
  "placeholders": {
    "details": {
      "content": "$1",
      "example": "Failed to fetch RSS feed."
    }
  }
}

Pour en savoir plus sur les espaces réservés, consultez la page Messages spécifiques aux paramètres régionaux. Pour en savoir plus sur l'appel de getMessage(), consultez la documentation de référence de l'API.

Exemple : getAcceptLanguages

Le code suivant récupère les langues acceptées à partir du navigateur et les affiche sous forme de chaîne en séparant chaque langue acceptée par une virgule.

function getAcceptLanguages() {
  chrome.i18n.getAcceptLanguages(function(languageList) {
    var languages = languageList.join(",");
    document.getElementById("languageSpan").innerHTML = languages;
  })
}

Pour savoir comment appeler getAcceptLanguages(), consultez la documentation de référence de l'API.

Exemple : detectLanguage

Le code suivant détecte jusqu'à trois langues à partir de la chaîne donnée et affiche le résultat sous forme de chaînes séparées par des sauts de ligne.

function detectLanguage(inputText) {
  chrome.i18n.detectLanguage(inputText, function(result) {
    var outputLang = "Detected Language: ";
    var outputPercent = "Language Percentage: ";
    for(i = 0; i < result.languages.length; i++) {
      outputLang += result.languages[i].language + " ";
      outputPercent +=result.languages[i].percentage + " ";
    }
    document.getElementById("languageSpan").innerHTML = outputLang + "\n" + outputPercent + "\nReliable: " + result.isReliable;
  });
}

Pour en savoir plus sur l'appel de detectLanguage(inputText), consultez la documentation de référence de l'API.

chrome.i18n.detectLanguage(
  text: string,
  callback?: function,
): Promise<object>

chrome.i18n.getAcceptLanguages(
  callback?: function,
): Promise<LanguageCode[]>

chrome.i18n.getMessage(
  messageName: string,
  substitutions?: any,
  options?: object,
): string

chrome.i18n.getUILanguage(): string