深入了解Chrome插件开发：基础知识

Chrome插件是一种强大的浏览器扩展，它们可以改善用户的浏览体验，增强浏览器的功能，并提供各种实用工具。本文将详细介绍Chrome插件开发的基础知识，帮助您开始创建自己的插件。

1. 插件的基本结构

Chrome插件的基本结构包括以下几个重要部分：

1.1 清单文件（Manifest）

清单文件是插件的入口文件，它告诉Chrome浏览器插件的名称、版本、作者信息，以及插件包含的脚本和页面等信息。清单文件通常命名为 manifest.json，并位于插件目录的根目录下。

以下是一个基础的 manifest.json 文件示例：

{
  "manifest_version": 3,
  "name": "我的插件",
  "version": "1.0",
  "description": "这是我的第一个Chrome插件",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

1.2 弹出页面（Popup Page）

弹出页面是插件的用户界面，当用户点击插件图标时会显示。在上面的清单文件示例中，popup.html 是定义弹出页面内容的HTML文件。

1.3 背景脚本（Background Script）

背景脚本是插件的后台运行脚本，通常用于处理插件的核心逻辑，例如处理事件、维护数据等。在上面的清单文件示例中，background.js 是背景脚本的文件名。背景脚本可以通过消息通信与其他插件组件和内容脚本进行交互。

1.4 内容脚本（Content Script）

内容脚本是可以注入到网页中的JavaScript脚本，用于与正在浏览的网页进行交互。内容脚本通常用于修改页面内容、响应用户操作等。在清单文件示例中，content.js 是一个内容脚本的文件名，它定义了可以注入的网页匹配规则。

2. 插件的权限

插件需要声明所需的权限，以便访问浏览器的特定功能或网站。在清单文件中，使用 permissions 字段来列出所需的权限。权限包括：

"activeTab"：允许插件访问当前活动标签页的信息。
"storage"：允许插件访问扩展存储，用于保存插件的数据。

根据插件的功能需求，可以声明不同的权限，以确保插件能够正常运行。

3. 插件的图标

插件通常具有一个图标，显示在浏览器的工具栏中。在清单文件中，使用 icons 字段来定义插件图标的不同大小。这些图标文件应该位于插件目录中的一个子目录中。不同尺寸的图标可以用于不同的地方，例如工具栏、扩展管理页面等。

16x16 图标： 16x16 像素的图标通常显示在浏览器的地址栏左侧，也就是所谓的"地址栏图标"。这是插件的小图标，用于标识插件的存在。如果您的插件定义了 browser_action 或 action，这个小图标将显示在浏览器的地址栏旁边。通常，这个小图标用于表示插件的状态或提供一些基本的操作。

48x48 图标： 48x48 像素的图标主要用于显示在浏览器的扩展管理页面中。当用户打开扩展管理页面时，他们可以看到您插件的大图标，以及插件的名称和版本信息。这个大图标通常用于展示插件的标识和品牌，因此应该具有较高的质量和清晰度。

128x128 图标： 128x128 像素的图标用于显示在Chrome Web Store或其他扩展目录中，以供用户浏览和下载。这个图标应该是插件的宣传图标，要具有吸引人的外观，以吸引用户下载和安装插件。

4. 事件处理和消息通信

Chrome插件可以通过事件处理和消息通信来与浏览器和网页进行交互。常见的事件包括用户点击插件图标、标签页加载完成等。插件还可以通过消息通信来与内容脚本或其他插件组件进行通信。这些机制使插件能够动态响应用户操作和网页事件。

5. 多语言支持（Internationalization）

多语言支持是确保您的插件在全球范围内能够被用户理解的重要部分。Chrome插件提供了国际化（i18n）的功能，使您可以轻松地为不同语言的用户提供翻译版本。

5.1 准备多语言文本

首先，您需要准备插件中使用的所有文本的翻译版本。这些文本包括插件名称、描述、弹出页面的内容、按钮标签等等。将这些文本的翻译整理到不同的语言文件中。

例如，您可以创建一个名为 _locales 的文件夹，其中包含子文件夹，每个子文件夹对应一种语言（例如 _locales/en 表示英语，_locales/fr 表示法语）。在每个语言文件夹中，创建一个名为 messages.json 的文件，用于存储该语言的翻译文本。

5.2 在清单文件中声明多语言支持

在插件的清单文件 manifest.json 中，您需要声明支持的语言和默认语言。这可以通过 default_locale 和 manifest_version 字段来实现。

{
  "manifest_version": 3,
  "name": "__MSG_pluginName__",
  "version": "1.0",
  "description": "__MSG_pluginDescription__",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "default_locale": "en"
}

请注意，在 manifest.json 文件中，您可以使用 __MSG_ 前缀来引用文本的翻译版本，后面跟上文本的名称（在 messages.json 文件中定义）。在运行时，Chrome将根据用户的语言首选项选择正确的翻译版本。

5.3 创建翻译文件

创建一个名为 _locales 的文件夹，并在其中为每种语言创建一个子文件夹，命名规则是根据语言的ISO 639-1代码（例如，英语为 en，法语为 fr）。在每个语言文件夹中，创建一个名为 messages.json 的文件，并在其中添加对应语言的翻译。

例如，对于英语和法语的翻译文件，目录结构如下：

_locales/
  |-- en/
  |    |-- messages.json
  |
  |-- fr/
       |-- messages.json

messages.json 文件的内容可以如下所示：

// 英语翻译文件 (en/messages.json)
{
  "pluginName": {
    "message": "My Plugin"
  },
  "pluginDescription": {
    "message": "This is my first Chrome extension"
  },
  "buttonLabel": {
    "message": "Click Me"
  }
}

// 法语翻译文件 (fr/messages.json)
{
  "pluginName": {
    "message": "Mon Extension"
  },
  "pluginDescription": {
    "message": "Ceci est ma première extension Chrome"
  },
  "buttonLabel": {
    "message": "Cliquez-moi"
  }
}

5.4 在插件中使用翻译文本

一旦您设置了多语言支持并创建了翻译文件，您可以在插件的HTML和JavaScript文件中使用 __MSG_ 前缀来引用翻译文本。例如：

<button id="myButton">__MSG_buttonLabel__</button>

document.getElementById("myButton").textContent = chrome.i18n.getMessage("buttonLabel");

Chrome会根据用户的语言首选项自动加载正确的翻译文本，并将其应用于您的插件。

这样，该Chrome插件就支持多语言了，用户将会看到适合其语言的插件界面和文本

6.写在最后的话

本次只是对插件基础内容进行了整理，后面会有更多插件开发相关知识及踩坑经验更新~

开始开发你的第一个插件吧！

官方文档传送门