扩展使用指南：Manifest文件（上）让你成为Chrome的定制达人

前端

2024-01-12 07:16:32

Manifest 文件：掌控 Chrome 扩展程序的命运

在踏上打造 Chrome 扩展程序的激动人心的旅程时，我们首先要深入了解 Manifest 文件。这份文件是扩展程序的基石，就像一个幕后导演，指引着浏览器如何加载、运行和呈现你的创意。

Manifest 文件：扩展程序的指挥官

1. Manifest 文件概述

Manifest 文件是一个 JSON 格式的文件，包含了扩展程序的生命线信息，包括名称、版本、权限、图标等。它充当了扩展程序与浏览器之间的桥梁，决定了其外观、行为和可用功能。

2. Manifest 文件组成

扩展程序名称： 扩展程序在 Chrome 网上应用店中的独一无二的识别标志。
版本号： 跟踪更新和修复的数字标识。
权限： 扩展程序所需的特定操作权限，例如访问文件系统或读取历史记录。
图标： 在 Chrome 工具栏上显示的扩展程序的视觉代表。
脚本和样式表： 实现扩展程序功能和外观的代码文件。

3. Manifest 文件实例

让我们用一个示例来看看 Manifest 文件长什么样：

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0",
  "description": "This extension adds superpowers to your browsing experience.",
  "permissions": ["tabs", "history"],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content_script.js"]
    }
  ]
}

Manifest 文件版本：V2 与 V3 的殊途同归

1. Manifest V2：稳健可靠的根基

Manifest V2 是 Chrome 扩展程序发展的起点，拥有广泛的兼容性和稳定的运行环境。然而，随着扩展程序变得越来越复杂，V2 的局限性也逐渐暴露出来，比如权限管理的粗放性。

2. Manifest V3：破茧重生的新篇章

Manifest V3 应运而生，旨在解决 V2 的不足之处，为扩展程序开发注入新的活力。V3 引入了更精细的权限管理、更强大的 API，以及对跨平台扩展程序的支持。

Manifest 文件解析：激活扩展程序的魔法

1. Manifest 文件加载

当用户安装扩展程序时，浏览器会加载 Manifest 文件并提取其信息。这些信息用于为扩展程序建立运行环境，包括权限分配、图标加载和脚本加载。

2. 权限验证

浏览器会核对扩展程序请求的权限是否已获得用户授权。如果用户未授权某项权限，则扩展程序将无法使用该权限。

3. 脚本和样式表的加载

浏览器会根据 Manifest 文件的指示加载扩展程序的脚本和样式表文件。这些文件包含了扩展程序的功能逻辑和视觉样式。

Manifest 文件配置：打造个性化扩展程序

1. 权限配置

Manifest 文件提供了配置扩展程序权限的途径。权限分为基本权限和扩展权限，后者需要用户明确批准才能使用。

2. 图标配置

通过 Manifest 文件，可以设置扩展程序的图标。图标在 Chrome 工具栏上显示，帮助用户轻松识别和管理扩展程序。

3. 脚本和样式表配置

Manifest 文件允许配置扩展程序的脚本和样式表文件。脚本文件用于实现功能，而样式表文件用于定义外观。

Manifest 文件示例：打造你的第一个扩展程序

1. 创建一个新的 Manifest 文件

在文本编辑器中创建一个新的 JSON 文件，并输入以下代码：

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple extension to say hello world.",
  "permissions": [],
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content_script.js"]
    }
  ]
}