Интернационализация с использованием «i18n-content» в Google Chrome

Question

Официальная документация рекомендует извлекать строки для интернационализации, например:

document.querySelector("#appname").innerHTML = chrome.i18n.getMessage("appname");

Однако в исходном коде встроенных страниц, таких как страница новой вкладки и страница настроек вкладки (пример здесь ), используется другой метод, который не требует настройки дополнительных Команды JavaScript:

<title i18n-content="appname"></title> 

Я пытался использовать это в своих собственных веб-приложениях и расширениях, но я не могу заставить его работать.

Кто-нибудь может пролить свет на это? Возможно ли использовать это в веб-приложениях и расширениях?

ОБНОВЛЕНИЕ: Я отметил ответ Мухаммеда Мансура как принятый, потому что технически он правильный. Если кто-то искал решение на основе JavaScript, я разместил свой ответ ниже.

Answer 1

Вы смотрите на две совершенно разные вещи.Я кратко объясню.

Для ссылки first это относится к API расширений Google Chrome.Если вы делаете расширение для Chrome, то вы можете использовать его API поддержки интернализации для этого.Это «только» для расширений в Google Chrome.

Для ссылки second она ссылается на DOMUI в браузере Google Chrome.Это специально сделано для Google Chrome!Когда мы создаем страницу параметров для Google Chrome (chrome: // options /), нам необходимо поддерживать несколько интернационализаций, а в Google Chrome все это делается в C ++.Поскольку страницы DOMUI взаимодействуют с пользовательским интерфейсом браузера Chrome и Core, мы отправляем сообщения обратно из DOMUI (страница параметров) и C ++ (браузер).Эта реализация предназначена для внутреннего использования Google Chrome.

Суммировать

1. Вы не можете использовать ни один из подходов, упомянутых выше, в обычном веб-приложении.Они не созданы для этого.Существует множество библиотек (если вы ищете в Google) для поддержки интернализации JavaScript.Тот, который приходит на ум, - это библиотека закрытия.
2. Для расширений используйте документацию, упомянутую выше для расширений Chrome.
3. Для приложений C ++, в которых вы хотите реализовать DOMUI с поддержкой интернализации, не стесняйтесь копировать некоторый код из Chromium и использовать егов ваших собственных проектах.

Я надеюсь, что все прояснилось.

Answer 2

Если у вас есть удобный jQuery:

    // localize all labels
function localize() {
    'use strict';
    $('[i18n-content]').each(function(index, element){
        element.innerHTML = chrome.i18n.getMessage($(this).attr('i18n-content'));
    });
}

Затем локализуйте на ContentLoaded

document.addEventListener('DOMContentLoaded', localize);

Answer 3

Технически, ответ Мухаммеда Мансура правильный, поэтому я пометил его как принятый. Однако, если кому-то интересно, я нашел функциональное решение, вставив следующий блок кода на страницу или сославшись на него как отдельный файл JavaScript:

var i18n = function() {
  function i(b) {
    b = b.querySelectorAll(l);
    for (var d, f = 0; d = b[f]; f++)
      for (var e = 0; e < h.length; e++) {
        var c = h[e],
          a = d.getAttribute(c);
        a != null && j[c](d, a)
      }
  }
  var j = {
      "i18n-content": function(b, d) {
        b.textContent = chrome.i18n.getMessage(d)
      },
      "i18n-values": function(b, d) {
        for (var f = d.replace(/\s/g, "").split(/;/), e = 0; e < f.length; e++) {
          var c = f[e].match(/^([^:]+):(.+)$/);
          if (c) {
            var a = c[1];
            c = chrome.i18n.getMessage(c[2]);
            if (a.charAt(0) == ".") {
              a = a.slice(1).split(".");
              for (var g = b; g && a.length > 1;) g = g[a.shift()];
              if (g) {
                g[a] = c;
                a == "innerHTML" && i(b)
              }
            } else b.setAttribute(a, c)
          }
        }
      }
    },
    h = [],
    k;
  for (k in j) h.push(k);
  var l = "[" + h.join("],[") + "]";
  return {
    process: i
  }
}();

Выше можно вызвать после загрузки документа с i18n.process(document);.

Будет применена правильная локализованная строка к InnerHTML любого элемента с соответствующим атрибутом i18n-content. (Например: i18n-content="name".)

Answer 4

Похоже, что никто не занимался фактической ручной работой при подготовке HTML-страницы Chrome для приложения / расширения для i18n.

Поскольку я не смог найти в Google ничего интересного, я написал этот небольшой фрагмент Chrome Devtools:

Я не включаю здесь исходный код, поскольку он находится всего в одном клике .

Вот тизер:

https://github.com/anaran/devtools-snippets#html_i18n_contentjs

Я успешно использовал его для собственного Автосохранения текста Расширение Chrome.