Как локализовать Chrome расширение с I18n так, чтобы пацаны со двора уважали

Недавно мне была поставлена задача - написать Chrome расширение, с поправкой на то, что оно должно поддерживать локализацию нескольких языков. Благодаря отличной документации я быстро нашел и разобрался с такой штукой, как Chrome i18n, которая позволяет создать различные языковые версии расширения. И в этой статье, я покажу, я локализовал своё расширение, оставив чистой html-разметку, и простой JavaScript код.

Почему компонент локализации носит название i18n? На самом деле, это сокращение, которое идёт от слова интернационализация (internationalization). И, ввиду того, что это слово очень длинное, ленивые программисты решили оставить первую и последнюю букву, а между ними поставив количесво пропущенных символов. Вот так и получилось i18n. Похожим образом, локализацию можно называть L18n (большую L я использовал для того, чтобы устранить неоднозначность с l18n)

Локализация расширения в Google Chrome состоит из 2 шагов: определения и перевода строки текста, и разметка расширения так, чтобы Google I18n отрендерил расширение в соответствии с актуальным языком пользователя. Переводы каждого из языков находятся в json файлах, отдельный для каждого.

Рассмотрим работу интернационализации на примере. Представим, что мы хотим создать кнопку, которая что-то сохраняет в нашем расширении :)

Тогда файл перевода на англиский будет выглядеть так:

{
  ...
  "saveButton": {
    "message": "Save button",
    "description": "Text for the button"
  },
  ...
}

А на русский:

{
  ...
  "saveButton": {
    "message": "Сохранить"
  },
  ...
}

Структура файлов в расширении выглядит так:

И теперь, к этим переводам можно обратиться, выполнил в JS-файле код:

var saveButtonTranslate = chrome.i18n.getMessage('saveButton'); // Сохранить

В этом примере, переменная saveButtonTranslate будет иметь значение Save, или Сохранить, в зависимости от настроек локализации браузера пользователя.

Это очень здорово и удобно, что Chrome поддерживает встроенные средства локализации, однако недостаток их решения в том, что это работает только в CSS и JavaScript файлах. И, к сожалению, HTML не попадает в их список. Однако, благодаря магии JavaScript-а, мы можем обойти это ограничение, и можем создать локализованную html-разметку.

Прежде всего, создадим кнопку и добавим data-аттрибут data-resource, который содержит ключ перевода (определённый в файлах локализации):

<button data-resource="saveButton"></button>

Теперь, напишем код на JavaScript, который найдёт все элементы, нуждающиеся в локализации, и заменит их нужным переводом:

var elements = document.querySelectorAll('[data-resource]');
elements.forEach(function(el) {
    el.innerText = chrome.i18n.getMessage(el.getAttribute('data-resource'))
})

И в результате чего, мы получим желаемый локализованный результат.

Это решение является удобным и практичным, потому как теперь, для того, чтобы добавить новый перевод (например кнопки удаления), достаточно добавить перевод в файлы локализации, добавить этот элемент в разметку, прописав ему соответствующий data-resource аттрибут. И всё, выгода этого способа заключается в том, что вам не придётся каждый раз изменять ваш JavaScript код, всё будет отработатано автоматически.

Пример кода, при использовании JQuery

Если ваше расширение использует JQuery, то код выше можно переписать так:

$('[data-resource]').each(function() {
  var el = $(this);
  var keyName = el.data('resource');
  el.text(chrome.i18n.getMessage(keyName));
});

Резюме

В этой статье я показал, как перевести приложение на несколько языков, его локализация, локализация html-разметки и сохранение чистоты кода расширения. Эта статья не является полной заменой страницы из документации по Chrome i18n, а является лишь дополнением и помощником в более чистой организации кода расширения.