本ページでは、Chrome拡張機能の国際化対応について解説します。
なお、Chrome拡張機能の概要についてはChrome拡張機能の開発入門(概要編)をご覧ください。
国際化対応した拡張機能のファイル構成
Chrome拡張機能を国際化対応にするには、拡張機能のルートフォルダ直下に「_locales」というフォルダを作ります。
さらに、その中に対応させる各言語のフォルダを作り、各フォルダの中に言語ファイル(messages.json)を配置します。
例えば日本語(ja)と英語(en)に対応させる場合、拡張機能の構成は次のようになります。
folder/(拡張機能のルートフォルダ)
└ _locales/ ← 国際化対応に必要なフォルダ(名前の変更不可)
└ en/ ← 英語用フォルダ(名前の変更不可)
└ messages.json ← 英語の言語ファイル
└ ja/ ← 日本語用フォルダ(名前の変更不可)
└ messages.json ← 日本語の言語ファイル
└ manifest.json ← Manifest File
└ js/
└ script.js
└ icons/
└ icon.png
以下は、各言語別のフォルダ名リストです。
(IETF BCP 47 によって定義されている言語タグに準拠しています。)
コード | 言語 |
---|---|
am | Amharic |
ar | Arabic |
bg | Bulgarian |
bn | Bengali |
ca | Catalan |
cs | Czech |
da | Danish |
de | German |
el | Greek (Modern) |
en | English |
en_GB | English (United Kingdom) |
en_US | English (United States) |
es | Spanish |
es_419 | Spanish (Latin America) |
et | Estonian |
fi | Finnish |
fil | Filipino |
fr | French |
gu | Gujarati |
he | Hebrew |
hi | Hindi |
hr | Croatian |
hu | Hungarian |
id | Indonesian |
it | Italian |
ja | Japanese |
kn | Kannada |
ko | Korean |
lt | Lithuanian |
lv | Latvian |
ml | Malayalam |
mr | Marathi |
nb | Norwegian Bokmal |
nl | Dutch |
or | Odia |
pl | Polish |
pt | Portuguese |
pt_BR | Portuguese (Brazil) |
pt_PT | Portuguese (Portugal) |
ro | Romanian |
ru | Russian |
sk | Slovak |
sl | Slovenian |
sr | Serbian |
sv | Swedish |
sw | Swahili |
ta | Tamil |
te | Telugu |
th | Thai |
tr | Turkish |
uk | Ukrainian |
vi | Vietnamese |
zh | Chinese |
zh_CN | Chinese (China) |
zh_TW | Chinese (Taiwan) |
Manifest Fileの国際化対応
Chrome拡張機能を国際化対応するには、Manifest File(manifest.json)で”default_locale”を指定しなければなりません。
例えば日本語と英語に対応させる場合、どちらの言語をデフォルトとするかの設定が必須となります。
“default_locale”はフランス語ユーザーなど、ブラウザの言語設定を日本語と英語以外に設定している場合に表示される言語なので、通常は英語をデフォルトとするのが良いでしょう。
以下は、英語をデフォルトとして設定した場合の例です。
1 |
"default_locale": "en" |
次は、拡張機能の名称や説明文を国際化対応する方法について説明します。
名称(name)と説明文(description)を国際化する場合は決まりがあって、”__MSG_ + messageName(任意のキー名) + __”という形式でキーを設定しなければなりません。
ここでは、名称については”__MSG_ + Name + __”、説明文については”__MSG_ + Description + __”という形式でキー名を記述しています。
1 2 |
"name": "__MSG_Name__", "description": "__MSG_Description__", |
言語ファイルの内容
各言語ファイル(messages.json)はJSON形式で記述します。
各キーと、その対となる「messageキー:値」の値部分に、各言語の文字列を記述していきます。
前項では拡張機能の名称と説明文の国際化設定をManifest Fileに記述しましたが、名称についてはName、説明文についてはDescriptionというキー名を設定しました。
そこで各言語ファイルには、それぞれNameキーとDescriptionキーの内容を対応言語で記述します。
以下は、日本語の言語ファイル(ja/messages.json)の例です。
1 2 3 4 5 6 |
"Name": { "message": "拡張機能の日本語名" }, "Description": { "message": "日本語の説明文" } |
chrome.i18n API
拡張機能の名称と説明文についてはここまでの手順のみで国際化対応が完了しますが、拡張機能で表示されるメッセージ等を国際化するには、chrome.i18n API を利用します。
先ほどの拡張機能の名称と説明文の国際化設定と同じように、まずは各言語ファイル(messages.json)に任意のキーとそれに対応する文字列を記述しておきます。
その後スクリプトでchrome.i18n.getMessageを使うことで、設定しておいた文字列を取得することができます。
例えば以下のようなファイルを用意した場合、script.js内のmsg変数には、ブラウザが日本語設定の場合は”サンプルメッセージ”、英語設定の場合は”Sample message”という文字列が格納されます。
1 2 3 |
"Msg": { "message": "サンプルメッセージ" } |
1 2 3 |
"Msg": { "message": "Sample message" } |
1 |
var msg = chrome.i18n.getMessage('Msg'); // サンプルメッセージ(もしくはSample message) |
国際化対応の実装例
ここでは例として、Chrome拡張機能の開発入門(概要編)で紹介した拡張機能のサンプル(Sample extension)を国際化対応してみたいと思います。
以前のサンプルは常に日本語のメッセージをアラートに出力するものでしたが、ここでは日本語と英語に対応させて、ブラウザが英語設定の場合には英語のメッセージをアラートに出力させるようにします。
また、ブラウザの「拡張機能」設定画面に表示される拡張機能の名称や説明文についても日本語と英語に対応させます。
まずは拡張機能の構成ですが、今回は国際化対応用のフォルダ「_locales」と、さらにその中に各言語用のフォルダとファイルを追加します。
sample_extension/(拡張機能のルートフォルダ)
└ _locales/ ← 国際化対応に必要なフォルダ(名前の変更不可)
└ en/ ← 英語用フォルダ(名前の変更不可)
└ messages.json ← 英語の言語ファイル
└ ja/ ← 日本語用フォルダ(名前の変更不可)
└ messages.json ← 日本語の言語ファイル
└ manifest.json ← 拡張機能のManifest File(JSON)
└ js/
└ script.js ← 拡張機能で実行するスクリプト(Javascript)
Manifest File(manifest.json)
Manifest File(manifest.json)の中身は、以下のように記述します。
国際化対応するためデフォルト言語の設定を追加し、さらに拡張機能の名称(name)と説明文(description)は、各言語ファイルから文字列を呼び出すように変更します。
※ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "manifest_version": 3, "default_locale": "en", // デフォルト言語を設定 "name": "__MSG_Name__", // 拡張機能の名称(多言語対応) "version": "1.0.0", "description": "__MSG_Description__", // 拡張機能の説明文(多言語対応) "content_scripts": [ { "matches": [ "<all_urls>" ], // Content Scriptを実行するURL(この場合はあらゆるURLで実行) "js": [ "script.js" ] // 上記URLへのアクセス時に実行されるスクリプト } ] } |
言語ファイル(messages.json)
次は日本語と英語の言語ファイルをそれぞれ用意します。
“Name”は拡張機能の名称、”Description”は拡張機能の説明文で呼び出される文字列です。
(それぞれManifest Fileで設定したキーを設定します。)
最後の”Alert_message”については、後述するscript.jsで使用します。
1 2 3 4 5 6 7 8 9 10 11 |
{ "Name": { "message": "サンプル拡張機能" }, "Description": { "message": "これは拡張機能のサンプルです。" }, "Alert_message": { "message": "メッセージのサンプルです。" } } |
1 2 3 4 5 6 7 8 9 10 11 |
{ "Name": { "message": "Sample extension" }, "Description": { "message": "This is a sample extension." }, "Alert_message": { "message": "Sample message." } } |
Content Scrpits(script.js)
最後はContent Scrpits(script.js)です。
chrome.i18n APIを使って言語ファイルから各言語に対応した文字列を読み込み、それを変数msgに格納します。
その後、変数msgの文字列を表示したアラートを発生させます。
1 2 |
var msg = chrome.i18n.getMessage('Alert_message'); // 言語ファイルからAlert_messageの文字列を読み込み alert(msg); // 変数msgの文字列を表示したアラートを発生 |
動作確認
これまでのファイルが全て準備できたら、Chrome拡張機能の開発入門(概要編)で紹介した方法でデベロッパーモードから拡張機能をインストールします。
恐らくこのページをご覧の方の多くはブラウザを日本語設定にしているかと思いますが、その場合は拡張機能の名前と説明文が日本語で表示されているかと思います。

インストールされた拡張機能(日本語表示)
さらにこのまま何らかのWebページを開いてみると、そこで表示されるアラートのメッセージも日本語になっているかと思います。

拡張機能によって表示されたアラート(日本語表示)
次にブラウザの設定を英語表示に変更し、拡張機能の設定画面を開きます。
すると、今度は拡張機能の名称と説明文が英語に変わっているかと思います。

インストールされた拡張機能(英語表示)
さらにこのまま何らかのWebページを開いてみると、そこで表示されるアラートのメッセージも英語に変わっているかと思います。
このように、Chrome拡張機能を国際化対応させるとユーザーのブラウザ設定に応じて自動的に対応した言語が表示されるようになります。

拡張機能によって表示されたアラート(英語表示)
コメント