こんにちは，太田です。今回はGoogle Chrome拡張のローカライズ対応とギャラリーでの公開手順について，拡張の作り方を総まとめしつつお送りします。

今回ローカライズする拡張はこれまで連載の中で何度か取りあえげてきたSBMカウンタをベースとして使用します。SBMという略称は（そもそもソーシャルブックマークと言う呼び方も？）日本語圏以外ではあまりポピュラーではないので，Social Counterと言う名称を用います。というのも，英語圏でのはてなブックマークに相当するサービスとしてdeliciousやdiggなどがありますが，ブックマーク中心のdeliciousと，ソーシャル中心のdiggと違いがはっきりしており，はてなブックマークはその間に位置しています。というわけで，ソーシャルカウンターとややくくりを大きくしました。

i18nとl10n

i18nはInternationalization（国際化）の略語（iとn間に18文字あるという意味です）で，l10nはLocalization（地域化）の略語です。ChromeのAPIとして用意されているのはi18nですが，主にローカライズのために使用することになります。

chrome.i18n.getMessage

早速，i18n APIの使い方を見ていきます。まず，拡張のフォルダ直下に_localeというフォルダを作り，その中にさらに言語別のフォルダを作ります。使用できる言語別のフォルダ名は，次の通りです（IETFのBCP 47に従っているようです。参考：Language tags in HTML and XML）。

am ar bg bn ca cs da de el en en_GB en_US es es_419 et fi fil fr gu he hi hr hu id it ja kn ko lt lv ml mr nb nl or pl pt pt_BR pt_PT ro ru sk sl sr sv sw ta te th tr uk vi zh zh_CN zh_TW

なお，_localeフォルダを作ると，manifest.jsonには "default_locale" の指定が必須となる点に注意が必要です。

どの言語が使用されるかは，Chrome本体の設定とリンクします（オプション→高度な設定→フォントや言語を変更→言語→Google Chromeの言語）。よって，Chrome本体がサポートする言語が増えれば，上記の一覧にも言語が追加されることになります。

さて，作成したフォルダの中に，今度はmessages.jsonというファイルを作成します。このファイルにキーワードと，それに対応するローカライズされたメッセージを記述していきます。なお，messages.jsonのフィールドに使用できる文字は A-Z，a-z，0-9，_（正規表現の\w相当）です。

{
  "options": {
    "message": "設定"
  }
}

このmessageをchrome.i18n.getMessageで取得することができます。なお，このgetMessageはBackground Pageや，Options Page，Popupなどの拡張コンテキストはもちろん，Content Scriptsでも使用することができます。

var options = chrome.i18n.getMessage('options');
console.log(options); // 設定

さらに，placeholdersを使ってgetMessageに変数を渡すこともできます。

{
  "options": {
    "message": "設定"
  },
  "append": {
    "message": "$name$に追加",
    "placeholders": {
      "name": {
        "content": "$1",
        "example": "delicious"
      }
    }
  }
}

var append = chrome.i18n.getMessage('append',service.name);
console.log(append); // はてなブックマークに追加

さて，manifest.jsonのnameやdescriptionをローカライズするには，やや特殊な対応が必要です。まず，manifest.jsonのnameとdescriptionを以下のように書き換えます。

  "name": "__MSG_extName__",
  "description": "__MSG_extDescription__",

そして，messages.jsonには以下のようにフィールドを追加します。

  "extName": {
    "message": "ソーシャルカウンター"
  },
  "extDescription": {
    "message": "ソーシャルサービスでのブックマーク数などをカウントします"
  },

manifest.jsonでの__MSG_NAME__のNAMEの部分が，messages.jsonのフィールドに一致するようにします。

ちなみに，manifest.jsonやmessage.jsonで使用するJSONは，本来のJSONとは異なり，JavaScriptのようにコメント（//や/* */）を記述することが可能です。ただし，当然JSONとしてはパースできなくなるので，お薦めできません。また，JSONのフォーマットを手で書くとミスをしやすいので，JSON.stringifyメソッドで出力することをお薦めします。Web Inspectorのコンソールで以下のように実行すれば簡単に出力できます。

copy(JSON.stringify({name:"sample",version:"1.1"},null,2));

chrome.i18n.getAcceptLanguages

getAcceptLanguagesは，Chrome本体で設定している「ウェブサイトの表示に使用する言語」を取得できます。多くの場合，複数の言語が設定されており，優先される言語順に配列で取得することができます。

日本語である "ja" が含まれている場合だけ，日本語圏向けの情報を情報を表示するといった使い方ができます。

chrome.i18n.getAcceptLanguages(function(langs){
  if (langs.indexOf('ja') >= 0){
    document.querySelector('#japan').style.display='block';
  }
});