本地化和国际化
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.plasmo.com">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 文档 (opens in a new tab) 获取更多信息。
如果您想查看展示本地化的示例，请查看 with-locales-i18n (opens in a new tab) 在 Plasmo 示例 (opens in a new tab) 仓库中。