Google Chrome拡張機能(extension)のi18n国際化

Google Chrome の拡張機能(extension)を、公式に用意されている i18n の API を用いて国際化(多言語化)する手順です。Google Chrome のブラウザ言語設定に基いて、拡張機能の出力文字列が翻訳されます。基本的なやり方は、Rails の i18n などと同様なのですんなりいけました。

chrome.i18n – Google Chrome

スポンサーリンク

国際化用の翻訳ファイルを容易

まず、Chrome 拡張を作成するディレクトリ(manifest.json を置いているディレクトリ)で、_locales ディレクトリを作成。その _locales ディレクトリの配下に、国際化の対象となる言語用のディレクトリを作成します。今回は、日本語(ja)と英語(en)の2つの例。作成した _locales/ja/, _locales/en/ 以下に messages.json という名前のファイルを作成します。

ここまでの作業。

ディレクトリツリー確認。_locales/ と manifest.json 以外は必要に応じて作成。

messages.json(翻訳用ファイル)の中身を json で作成

以下のような json 形式で、言語毎に翻訳用ファイルを作成していきます。

_locales/ja/messages.json(日本語用)

_locales/en/messages.json(英語用)

extName, extDescription は後述する manifest.json 内での拡張機能の名前、説明の翻訳用です。options は任意の箇所で利用できます、これも後述。

manifest.json 内での翻訳

manifest.json 内で、拡張機能の名前(extName)、説明(extDescription)を翻訳させます。以下のように MSG とアンダースコアを使って指定する。

manifest.json

これで、Google Chrome の拡張機能を管理するタブに表示される拡張機能の名前・説明が、Google Chrome のブラウザ言語設定に合わせて翻訳されて表示される。

あと、注意点として i18n 国際化を行う場合は、manifest.json 内で default_locale を設定するのが必須となります。上記の例では、”default_locale”: “ja” とデフォルトを日本語に指定している。

JavaScript 内での翻訳

拡張機能で作成する JavaScript 内で、以下の i18n.getMessage の API を利用して翻訳出力できます。

翻訳用の messages.json ファイルから、Chrome の言語設定に対応する訳を表示する仕組みです。上記の例ですと、messages.json 内の options に対応する翻訳を出力し、Chrome の言語設定が日本語の時は”設定”と表示、英語の時は”settings”と表示されます。

この翻訳用のメソッド(i18n.getMessage)は、Background Page, Options Page, Popup Page, Browser Action, Content Scripts など、任意の JavaScript 内から利用できるそうです。

HTML 内での翻訳

ドキュメントにざっと目を通した限り、HTML ファイル内での翻訳を簡単に行う方法はさそうでした。HTML 内で翻訳が必要な部分は、JavaScript で innerHTML を使うなどするしかないのかな?(間違ってたらすいません

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!