当前位置：首页 > article >正文

chrome扩展程序如何实现国际化

article 2025/2/23 18:20:28

先来看一个 manifest.json 文件的内容例子：

{
"update_url": "https://clients2.google.com/service/update2/crx ",

    "default_locale": "en",
    "name": "__MSG_appName__",
    "short_name": "__MSG_appNameAbbr__",
    "version": "1.0.3",
    "manifest_version": 2,
    "description": "__MSG_appDesc__",
    "homepage_url": "https://fanyi.caiyunapp.com ",
    "icons": { 
        "16": "images/logo.png",
        "128": "images/logo.png"
    },
    "options_page": "options.html",
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://www.google-analytics.com ; object-src 'self'; connect-src 'self' https://www.google-analytics.com  https://api.growingio.com/  https://caiyunapp.com/  https://biz.caiyunapp.com/  https://api.interpreter.caiyunai.com/  http://api.interpreter.caiyunai.com/  ws://api.interpreter.caiyunai.com/ http://sentry.in.caiyunapp.com/ ; frame-src 'self' https://caiyunapp.com/ ",
    "background": {
        "scripts": [
            "bkg.js"
        ],
        "persistent": true
    },
    "browser_action": {
        "default_title": "LingoCloud",
        "default_icon": "images/logo.png"
    },
    "permissions": [
        "tabCapture",
        "activeTab",
        "webRequest",
        "webRequestBlocking",
        "webNavigation",
        "storage",
        "tabs",
        "contextMenus",
        "cookies",
        "<all_urls>"
    ],
    "optional_permissions": [
       
    ],
    "web_accessible_resources": [
        "images/*",
        "css/*"
    ]
}

注意其中的

"default_locale": "en",
"name": "__MSG_appName__",
"short_name": "__MSG_appNameAbbr__",

"default_locale": "en"

作用：指定扩展程序的默认语言。
说明：default_locale 指定了扩展程序的默认语言包路径。语言包通常存储在扩展的 _locales 文件夹中，例如 _locales/en/messages.json。
示例：如果设置为 "en"，则默认加载 _locales/en/messages.json 文件中的国际化内容。

"name": "__MSG_appName__",
"short_name": "__MSG_appNameAbbr__"

作用：定义扩展程序的完整名称和简短名称。
说明：
- name 是扩展程序的完整名称，通常显示在扩展管理页面。
- short_name 是扩展程序的简短名称，通常用于浏览器工具栏中的图标显示。
- __MSG_appName__ 和 __MSG_appNameAbbr__ 是国际化占位符，实际显示的内容会从语言包中读取。

__MSG_appName__ 和 __MSG_appNameAbbr__ 是国际化占位符，实际显示的内容会从语言包中读取。这个读取过程是自动的吗？需要额外代码支持吗？

在 Chrome 扩展中，__MSG_<message_name>__ 是一种特殊的占位符，用于实现国际化（i18n）。这些占位符的内容会自动从扩展的语言包中读取，而不需要额外的代码支持。这个过程是由 Chrome 浏览器的扩展机制自动完成的。

国际化占位符的工作原理

占位符格式
在 manifest.json 或 HTML 文件中，使用 __MSG_<message_name>__ 格式的占位符来表示需要国际化的字符串。例如：

JSON复制
```
"name": "__MSG_appName__",
"short_name": "__MSG_appNameAbbr__"
```

语言包文件
扩展需要在 _locales 文件夹下定义语言包文件。每个语言包文件是一个 JSON 文件，包含一组键值对，其中键是占位符中的 <message_name>，值是对应的本地化字符串。

例如：

_locales/en/messages.json：

JSON复制

{
  "appName": {
    "message": "LingoCloud",
    "description": "The full name of the application."
  },
  "appNameAbbr": {
    "message": "LC",
    "description": "The abbreviated name of the application."
  }
}

_locales/zh_CN/messages.json：

JSON复制

{
  "appName": {
    "message": "彩云小译",
    "description": "应用的完整名称。"
  },
  "appNameAbbr": {
    "message": "小译",
    "description": "应用的简称。"
  }
}

自动解析
当扩展加载时，Chrome 浏览器会根据用户的语言偏好（或扩展设置的语言）自动从对应的语言包文件中读取占位符的值，并替换 __MSG_<message_name>__ 占位符。
- 如果用户的语言是英语（en），则从 _locales/en/messages.json 中读取。
- 如果用户的语言是中文（zh-CN），则从 _locales/zh_CN/messages.json 中读取。
默认语言
如果某些语言包中缺少某个占位符的定义，Chrome 会回退到 default_locale 指定的语言包。在你的例子中，default_locale 是 "en"，因此默认会使用 _locales/en/messages.json 中的值。

是否需要额外代码支持？

不需要额外代码支持：对于 manifest.json 文件中的国际化占位符，Chrome 浏览器会自动处理解析过程。你只需要正确配置语言包文件即可。
HTML 和 JavaScript 中的国际化：如果需要在 HTML 或 JavaScript 中使用国际化字符串，可以通过 Chrome 提供的 i18n API 来实现。例如：
- 在 HTML 中：
  
  HTML复制
```
<div id="appName"></div>
<script>
  document.getElementById("appName").textContent = chrome.i18n.getMessage("appName");
</script>
```
- 在 JavaScript 中：
  
  JavaScript复制
```
const appName = chrome.i18n.getMessage("appName");
console.log(appName);
```