更新日: 2014年12月22日
Chrome Extension

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

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

chrome.i18n – Google Chrome

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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

ここまでの作業。


$ mkdir _locales
$ mkdir _locales/ja
$ mkdir _locales/en
$ touch _locales/ja/messages.json
$ touch _locales/en/messages.json

$ mkdir _locales

$ mkdir _locales/ja

$ mkdir _locales/en

$ touch _locales/ja/messages.json

$ touch _locales/en/messages.json

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


$ tree -L 3
├── _locales
│   ├── en
│   │   └── messages.json
│   └── ja
│        └── messages.json
├── manifest.json

$ tree -L 3

├── _locales

│ ├── en

│ │ └── messages.json

│ └── ja

│ └── messages.json

├── manifest.json

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

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

_locales/ja/messages.json（日本語用）

{
  "extName": {
    "message": "拡張機能の名前"
  },
  "extDescription": {
    "message": "拡張機能の説明"
  },
  "options": {
    "message": "設定"
  }
}

{

"extName": {

"message": "拡張機能の名前"

"extDescription": {

"message": "拡張機能の説明"

"options": {

"message": "設定"

}

_locales/en/messages.json（英語用）

{
  "extName": {
    "message": "Extension Name"
  },
  "extDescription": {
    "message": "Extension Description"
  },
  "options": {
    "message": "settings"
  }
}

{

"extName": {

"message": "Extension Name"

"extDescription": {

"message": "Extension Description"

"options": {

"message": "settings"

}

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

manifest.json 内での翻訳

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

manifest.json

{
  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",
  "default_locale": "ja",
}

{

"name": "__MSG_extName__",

"description": "__MSG_extDescription__",

"default_locale": "ja",

}

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

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

JavaScript 内での翻訳

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

chrome.i18n.getMessage("options")

1	chrome.i18n.getMessage("options")

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

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