keywords: Chrome插件, 国际化支持, 多语言开发, messages.json, 插件国际化

description: 本章节详细介绍如何在Chrome插件中添加国际化支持，通过编写国际化文件和示例演示，掌握多语言插件开发的基础知识和技术实现。

本章节将详细介绍如何在 Chrome 插件中添加国际化支持，以便让插件适应不同语言环境中的用户需求。我们将通过编写国际化文件，并以中文和英文为例进行演示。通过本章的学习，您将掌握国际化插件开发的基础知识和技术实现。

1. 引言

国际化（Internationalization, i18n）是指为软件应用提供多语言支持，从而使其能够在不同地区、不同语言环境中良好运作。在开发 Chrome 插件时，添加国际化支持可以显著提升用户体验，使插件更具普适性。

2. 添加多语言支持

2.1 创建国际化目录和文件

首先，我们需要在项目根目录下创建一个名为 _locales 的文件夹。该文件夹将包含不同语言的子文件夹，每个子文件夹中都有一个 messages.json 文件，用于存放该语言的翻译内容。

  1. project_root/
  2. │
  3. ├── _locales/
  4. │   ├── en/
  5. │   │   └── messages.json
  6. │   └── zh/
  7. │       └── messages.json
  8. ├── manifest.json
  9. ├── popup.html
  10. ├── popup.js
  11. ├── content.js
  12. └── background.js

2.2 编写 messages.json 文件

messages.json 文件用来存储插件界面中使用的所有文本。每个文本项都有一个唯一的标识符（message ID），以及对应的翻译内容。

英文版本 messages.json

文件路径：_locales/en/messages.json

  1. {
  2.   "appName": {
  3.     "message": "Translation and Dictionary Plugin",
  4.     "description": "Name of the extension"
  5.   },
  6.   "appDescription": {
  7.     "message": "A Chrome extension to translate text and look up dictionary definitions.",
  8.     "description": "Description of the extension"
  9.   },
  10.   "translateButton": {
  11.     "message": "Translate",
  12.     "description": "Button text for translating selected text"
  13.   },
  14.   "dictionaryButton": {
  15.     "message": "Dictionary",
  16.     "description": "Button text for looking up dictionary definitions"
  17.   }
  18. }

中文版本 messages.json

文件路径：_locales/zh/messages.json

  1. {
  2.   "appName": {
  3.     "message": "翻译和词典插件",
  4.     "description": "扩展程序的名称"
  5.   },
  6.   "appDescription": {
  7.     "message": "一个用于翻译文本和查词的 Chrome 扩展程序。",
  8.     "description": "扩展程序的描述"
  9.   },
  10.   "translateButton": {
  11.     "message": "翻译",
  12.     "description": "翻译选中文本的按钮文字"
  13.   },
  14.   "dictionaryButton": {
  15.     "message": "词典",
  16.     "description": "查词定义的按钮文字"
  17.   }
  18. }

3. 修改 manifest.json 文件

在 manifest.json 中，我们需要声明插件的默认语言。该设置将告知 Chrome 在找不到特定语言文件时，使用哪种语言作为默认语言。

  1. {
  2.   "manifest_version": 3,
  3.   "name": "__MSG_appName__",
  4.   "description": "__MSG_appDescription__",
  5.   "version": "1.0",
  6.   "default_locale": "en",
  7.   "background": {
  8.     "service_worker": "background.js"
  9.   },
  10.   "action": {
  11.     "default_popup": "popup.html"
  12.   },
  13.   "permissions": ["storage", "activeTab"]
  14. }

在 name 和 description 字段中，我们使用了 __MSG_ 前缀加上对应的 message ID。这种方式告诉 Chrome 使用 messages.json 文件中的翻译内容来替换这些字段。

4. 在 HTML 中使用国际化内容

在 popup.html 文件中，我们同样可以使用国际化内容。需要在 HTML 标签的 data-i18n 属性中指定 message ID，然后在 JavaScript 中进行替换。

4.1 更新 popup.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title><span data-i18n="appName"></span></title>
  6.     <style>
  7.       /* 样式省略 */
  8.     </style>
  9.   </head>
  10.   <body>
  11.     <h1><span data-i18n="appName"></span></h1>
  12.     <p><span data-i18n="appDescription"></span></p>
  13.     <button id="translateButton" data-i18n="translateButton"></button>
  14.     <button id="dictionaryButton" data-i18n="dictionaryButton"></button>
  16.     <script src="popup.js"></script>
  17.   </body>
  18. </html>

4.2 更新 popup.js

在 popup.js 中，我们编写一个函数来替换 HTML 标签中的 data-i18n 属性内容。

  1. document.addEventListener("DOMContentLoaded", () => {
  2.   function updateI18nTexts() {
  3.     document.querySelectorAll("[data-i18n]").forEach((elem) => {
  4.       const messageId = elem.getAttribute("data-i18n");
  5.       elem.textContent = chrome.i18n.getMessage(messageId);
  6.     });
  7.   }
  9.   updateI18nTexts();
  10. });

5. 示例：添加中文和英文支持

现在，我们已经完成了多语言支持的配置和实现。您可以将 Chrome 插件加载到浏览器中，切换浏览器的语言设置，并看到插件界面文本根据语言的不同进行相应的切换。

5.1 测试中文支持

  1. 打开 Chrome 浏览器，进入设置界面。
  2. 向下滚动，找到“语言”设置。
  3. 添加中文，并将其设置为首选语言。
  4. 重新加载插件，您将看到插件界面文本变为中文。

5.2 测试英文支持

  1. 同样在 Chrome 的语言设置中，添加英文并将其设置为首选语言。
  2. 重新加载插件，您将看到插件界面文本变为英文。

通过本章节的学习，你已经掌握了如何为 Chrome 插件添加国际化支持的基本方法。这不仅提升了插件的用户体验，也为插件在全球范围内的推广打下了基础。

国际化支持的实现过程包括创建 _locales 目录和 messages.json 文件，更新 manifest.json 文件，以及在 HTML 和 JavaScript 代码中使用国际化内容。