Google Chrome Extensions — Локализация!

Пролог

Как всегда, хочу начать издалека, с небольшой предыстории. Классически я всегда пользовался браузером Opera. Старушка никогда не подводила: вкладки, скорость, удобство — тогда это были основные отличительные черты браузера. Более года назад, когда я из-за чистого интереса попробовал Chrome, мной не могли быть не замечены его преимущества. Однако еще тогда мне показалась совсем неудобной панель быстрого запуска (еще бы, в опере была конфигурируемая, масштабируемая, удобная панель быстрого запуска). Чтобы решить эту проблему, приобрести опыт программирования расширений, а так же ради знакомства с документацией от Google, мне захотелось написать свое первое расширение. И это интересно, скажу я вам! Поработать с грамотной документацией, применить знания HTML + CSS + JS (для прикладного программиста знания необязательные). И, как мне недавно показалось, одно расширение доросло для того, чтобы им поделиться. Но чтобы это сделать, мне пришлось его локализовать! Об этом и топик ;)

Ближе к делу

Итак, мое расширение — VkQuick представляет собой выпадающий список с наиболее часто используемыми элементами социальной сети ВКонтакте. Лично я и еще с десяток моих знакомых посчитали его [расширение] удобным, в связи с чем я его и выложил в магазин. Но аудитория сайта vk.com не ограничивается только русскоговорящими людьми, в связи с чем выкладывать его с жестко вбитыми в HTML названиями пунктов было бы как-то нецелесообразно, в связи с чем было принято решение локализовать его!

i18n

Перво-наперво необходимо создать в папке расширения ( а любое расширение для Google Chrome — есть папка с необходимым набором файлов, обязательно включающая manifest.json и необходимые странички) каталог с названием _locales

Кстати я использую для разработки e-texteditor.

Внутри этой папки необходимо создать по одной папочке для каждой локали. Выглядит это примерно так:

Названия папок имеют важное значение, было бы странно, если бы они просто так назывались «ru» и «en», не так ли?! Для каждой поддерживаемой локали необходимо создать по каталогу, название которой соответствует двухбуквенному коду языка страны. Опять же как видно из скриншота выше, каждая папка должна содержать файл под названием messages.json, содержащий все необходимые строки. Рассмотрим его поближе!

Данный файл содержит список некоторых идентификаторов строк, например msgIm и msgAudio, которым соответствует текст и более полное описание (в моем примере описание не используется и оно просто дублирует текст). Т.е. тут мы видим простую, стандартную схему интернационализации — по некоторому ключу-идентификатору имеем возможность получить локализованную строку! Просто и элегантно, а что может быть лучше простых программ?!

Теперь Вас, о уважаемый читатель, должен интересовать вопрос, как получить сию строку из JS? Очень просто, смотрим код:
var strArr = []
strArr.push(chrome.i18n.getMessage("msgIm"))
strArr.push(chrome.i18n.getMessage("msgAudio"))
strArr.push(chrome.i18n.getMessage("msgVideo"))
strArr.push(chrome.i18n.getMessage("msgFriends"))
strArr.push(chrome.i18n.getMessage("msgDocs"))
strArr.push(chrome.i18n.getMessage("msgFeed"))
strArr.push(chrome.i18n.getMessage("msgOptions"))

Вот таким нехитрым способом с помощью вызова функции chrome.i18n.getMessage с указанием ключа-идентификатора мы можем получить требуемое значение! Я в своем конкретном случае пользуюсь массивом, с последующим заданием текста для некоторых DOM-элементов!

Есть еще парочка моментов. Если приложение локализованное, то в manifest.json необходимо указать параметр «default_locale». В моем случае это «default_locale»: «en».
Еще один тонкий момент, касаемый manifest'a — название приложение указывается в нем, в атрибуте «name», следовательно должен быть способ получить локализованную строку и из манифеста. Способ, как вы могли догадаться, прост и лаконичен! Привожу пример
"descriptions" : "__MSG_msgDescr__"
__MSG_msgDescr__ строка, сформированная из приставки "__MSG_", ключа-идентификатора строки и суффикса "__".

Эпилог

Таким нехитрым образом можно добавить в свое расширение локализацию! Пишите расширения, это действительно полезно, хотя бы ради знакомства с новой технологией и приобретения опыта работы с хорошей документацией! Спасибо!

Ах да, пользуйтесь на здоровье, если любите ВК: VkQuick

Кстати, для создания подобного рода вещей так же прекрасно подходит редактор Sublime Text 2. Его и вышеупомянутый «е» частенько называют «TextMate on Windows».