ローカライズと国際化

Plasmo はローカライズを内蔵でサポートしています。他の Chrome 拡張機能でこれを行ったことがある場合、これらの概念は馴染みのあるものだと思います。

Plasmo は、ロケールファイルを次のいずれかの場所に配置することを想定しています。

/locales/{lang}/messages.json
/assets/_locales/{lang}/messages.json
/assets/locales/{lang}/messages.json

いずれか1つを選択して、それに従ってください！

英語の例

一意の key とロケールオブジェクト間の JSON マッピングを含む locales/en/messages.json ファイルを作成します。

locales/en/messages.json

{
  "extensionName": {
    "message": "with-locales-i18n-en",
    "description": "Name of the extension."
  },
  "extensionDescription": {
    "message": "Example using locales + i18n!",
    "description": "Description of the extension."
  },
  "popup": {
    "message": "Logic is the beginning of wisdom, not the end.",
    "description": "Popup message."
  }
}

デフォルトでは、Plasmo はアルファベット順で最初に利用可能なロケールをデフォルトとして選択します。ただし、マニフェストで default_locale を次のように指定することもできます。

package.json

{
  "manifest": {
    "default_locale": "en"
  }
}

さらに強力な機能として、ロケールファイル内で環境変数を使用できます。

locales/en/messages.json

{
  ...
  "popup": {
    "message": "Logic is the beginning of wisdom, not the end. - $PLASMO_PUBLIC_QUOTE_AUTHOR",
    "description": "Popup message."
  }
}

.env

PLASMO_PUBLIC_QUOTE_AUTHOR=Spock

開発サーバーの起動前にロケールファイルが存在していた場合、ロケールファイルは Plasmo によって監視されます。そのため、ロケールファイルを変更して、開発サーバーを再起動せずにブラウザでの変更を確認できます。

使用方法

ロケールファイルが配置されたら、i18n API を使用して拡張機能をローカライズできます。

ソースコードモジュール内

コンポーネント内でロケール文字列を取得するには、i18n API を使用して、key でロケールメッセージを取得します。

popup.tsx

import { useState } from "react"
 
function IndexPopup() {
  const [data, setData] = useState("")
 
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <h1>
        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
      </h1>
      <h2>{chrome.i18n.getMessage("popup")}</h2>
      <input onChange={(e) => setData(e.target.value)} value={data} />
    </div>
  )
}
 
export default IndexPopup

package.json とマニフェストのオーバーライド内

マニフェストのオーバーライド内でロケール文字列を参照するには、キーを __MSG_<key>__ で囲みます。

package.json

{
  "name": "with-locales-i18n",
  "displayName": "__MSG_extensionName__",
  "version": "0.0.0",
  "description": "__MSG_extensionDescription__",
  "manifest": {
    "name": "__MSG_extensionName__"
  }
}

詳細については、Chrome の i18n ドキュメント (opens in a new tab) を参照してください。

ロケールの例を確認したい場合は、Plasmo の例 (opens in a new tab)リポジトリにあるwith-locales-i18n (opens in a new tab)をご覧ください。

Icon Remote Code