本地化和国际化

Plasmo 内置支持本地化。如果您曾经在任何其他 Chrome 扩展中做过本地化，这些概念应该对您很熟悉。

Plasmo 期望您的语言环境文件位于以下任何位置：

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

您需要选择一个并坚持使用！

英语示例

创建一个 locales/en/messages.json 文件，其中包含唯一 key 和语言环境对象之间的 JSON 映射：

locales/en/messages.json


{
  "extensionName": {
    "message": "with-locales-i18n-en",
    "description": "扩展的名称。"
  },
  "extensionDescription": {
    "message": "使用 locales + i18n 的示例！",
    "description": "扩展的描述。"
  },
  "popup": {
    "message": "逻辑是智慧的开端，而不是终点。",
    "description": "弹出窗口消息。"
  }
}

默认情况下，Plasmo 按字母顺序选择第一个可用的语言环境作为默认值。但是，您可以在清单中指定 default_locale，如下所示：

package.json


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

更强大的是，您可以在语言环境文件中使用环境变量：

locales/en/messages.json


{
  ...
  "popup": {
    "message": "逻辑是智慧的开端，而不是终点。 - $PLASMO_PUBLIC_QUOTE_AUTHOR",
    "description": "弹出窗口消息。"
  }
}

.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>
        欢迎使用您的 <a href="https://www.plasmocn.org">Plasmo</a> 扩展！
      </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 文档了解更多信息。

如果您想查看展示语言环境的示例，请查看 Plasmo 示例仓库中的 with-locales-i18n 。