Chromeアプリの国際化。

Chromeアプリ開発では、国際化(多言語化)に対応するためのとても便利な仕組みが用意されています。その仕組みを使えば、国際化に関する処理部分とビジネスロジック部分を切り離すことができ、アプリ開発者と翻訳者が分業しやすくなります。
Chromeアプリの国際化はとてもシンプルです。

メッセージリソース作成

まずはメッセージリソースファイル /_locales/<locale_name>/messages.json を作成します。 <locale_name> は、ISO 639 規格の文字列です。例えば、日本語なら ja、 英語なら en となります。

英語(en)メッセージリソースの例：
_locales/en/messages.json

{
  "appName": {
    "message": "HelloWorld App",
    "description": "This is Application's name."
  },
  ...
}

日本語(ja)メッセージリソースの例：
_locales/ja/messages.json

{
  "appName": {
    "message": "ハローワールドアプリ",
    "description": "これはアプリケーションの名前です。"
  },
  ...
}

manifest.json の国際化対応

次に manifest.json ファイルを国際化対応させます。
manifest.json 内では __MSG_*__ のような記述で messages.json で定義された文言を置き換え表示させることができます。

manifest.json

{
  "name": "__MSG_appName__",
  ...
  "default_locale": "en" 
}

JavaScriptからメッセージリソースを呼び出す

もちろんプログラムからメッセージリソースを呼び出すこともできます。

var appName = chrome.i18n.getMessage("appName");

ユーザの locale が "en" の時は appName に "HelloWorld App" が入り、 "ja" の時には "ハローワールドアプリ" という文字列が格納されます。

他にも、messages.json で "placeholders" を使うことでメッセージリソースの一部を置き換えるといったこともできます。
下のサンプルはエラーメッセージの詳細部分を置き換え可能にしています。

_locales/en/messages.json

{
  "app_name": {
    "message": "HelloWorld App"
  },
  ...
  "error": {
    "message": "Error: $errorCode$ $errorDetails$",
    "description": "部分的に置き換え可能なメッセージです。",
    "placeholders": {
      "errorCode": {
        "content": "$1",
        "example": "404"
      },
      "errorDetails": {
        "content": "$2",
        "example": "Not Found."
      }
    }
  }
}

JavaScript側

console.log(chrome.i18n.getMessage("error", [ "xxx", "data not found." ]));
// output 'Error: xxx data not found.'

messages.json の $errorCode$ と $errorDetails$ がそれぞれ chrome.i18n.getMessage() の第二引数の配列の第一要素, 第二要素の文字列に置き換えられます。

htmlの国際化

現時点では残念ながらHTMLファイル内のメッセージを国際化する便利な仕組みは用意されていないようです。これを実現するには、content script 内でメッセージリソースを取得して dom.innerHTML = chrome.i18n.getMessage("hoge"); のようにするしかなさそうですね。

参考にしたサイト

chrome.i18n - Google Chrome