多言語対応のための設定

Chrome拡張機能の国際化（i18n）において、「多言語対応のための設定」は、拡張機能を複数の言語に対応させるための重要な手順です。以下にその設定方法と仕組みについて詳しく説明します。

1. 国際化の目的

Chrome拡張機能を多言語に対応させることで、ユーザーのブラウザ設定に応じて自動的に言語を切り替えることができます。Googleが提供する国際化API（chrome.i18n）を活用することで、翻訳を効率的に管理できます。

2. 基本構成

多言語対応の設定は以下のファイルによって構成されます。

① manifest.json における設定

json
{
  "name": "__MSG_extension_name__",
  "description": "__MSG_extension_description__",
  "default_locale": "en",
  ...
}

  • __MSG_XXX__ は、ローカライズされた文字列に置き換えられます。

  • default_locale はデフォルトで使用する言語（フォールバック言語）です。

② _locales フォルダの作成

拡張機能のルートディレクトリに _locales フォルダを作成し、各言語用のサブフォルダを用意します（例：en、ja、frなど）。

例

pgsql
/_locales
   ├─ en
   │   └─ messages.json
   ├─ ja
   │   └─ messages.json

③ messages.json の構成

各言語フォルダ内に messages.json を作成し、キーと翻訳文を定義します。

例：_locales/en/messages.json

json
{
  "extension_name": {
    "message": "My Extension"
  },
  "extension_description": {
    "message": "This is a sample Chrome extension."
  }
}

例：_locales/ja/messages.json

json
{
  "extension_name": {
    "message": "私の拡張機能"
  },
  "extension_description": {
    "message": "これはサンプルのChrome拡張機能です。"
  }
}

3. HTMLファイル内での使用

HTMLファイルでは、以下のようにJavaScriptを使って多言語文字列を挿入できます。

popup.html

html
<span id="greeting"></span>
<script src="popup.js"></script>

popup.js

javascript
document.getElementById("greeting").innerText = chrome.i18n.getMessage("extension_name");

4. 注意点

  • messages.json は必ず UTF-8 で保存する必要があります。

  • messages.json に定義したキーは、JavaScript・manifest.json・HTMLの全てで共通して利用できます。

  • 未定義のキーを呼び出すと、空文字列が返されます。

5. ローカルテスト時のポイント

  • 拡張機能を読み込んだ後、Chromeの言語設定を変更して動作確認が可能です。

  • chrome://settings/languages から使用言語の優先順位を変更できます。

まとめ

Chrome拡張機能における多言語対応は、以下のステップで実現されます。

  1. manifest.json に __MSG_キー__ を記述し、default_locale を設定。

  2. _locales/言語コード/messages.json を作成し、翻訳文を定義。

  3. chrome.i18n.getMessage を使ってJavaScriptから翻訳文字列を取得。

  4. ユーザーのブラウザ言語設定に応じて、自動的に表示言語が切り替わる。

この仕組みにより、拡張機能のユーザビリティと国際展開性が大きく向上します。必要に応じて、HTML内の要素にも動的に反映することで、UIのローカライズも柔軟に対応可能です。

生成日：2025/05/18