Guardium- 密码保护器 (第2天)

Source: Dev.to

请提供您希望翻译的完整文本内容（除代码块和 URL 之外），我将按照要求将其翻译成简体中文并保持原有的 Markdown 格式。

概述

manifest.json 文件是 Chrome 扩展的核心，它是 Chrome 在加载或运行扩展之前读取的主要元数据和配置文件。它定义了扩展的 身份——包括名称、版本、描述、作者和图标——并明确指定 扩展在浏览器中的行为方式。通过 manifest，开发者声明 权限，这些权限控制扩展可以访问的浏览器 API 和网站，从而确保安全性和用户透明度。它还链接了扩展的所有主要组件，如 后台服务工作线程、内容脚本、弹出页面、选项页面以及可网页访问的资源，让 Chrome 知道何时何地执行每个部分。

在 Manifest Version 3 (MV3) 中，manifest.json 的作用更加关键，它通过 非持久化后台执行、更严格的权限处理和性能提升 等现代安全实践来强制执行安全规范，使其成为构建安全、高效、可维护的 Chrome 扩展的必备要素。

示例 manifest.json

{
  "manifest_version": 3,
  "name": "Guardium",
  "short_name": "Guardium",
  "description": "A secure browser-based password manager with autofill support",
  "version": "1.0.0",

  "action": {
    "default_title": "Open Guardium",
    "default_popup": "index.html"
  },

  "icons": {
    "16": "assets/icons/icon16.png",
    "32": "assets/icons/icon32.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  },

  "background": {
    "service_worker": "background.js",
    "type": "module"
  },

  "content_scripts": [
    {
      "matches": [""],
      "js": ["contentScript.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],

  "permissions": [
    "activeTab",
    "tabs",
    "storage",
    "scripting",
    "alarms",
    "notifications"
  ],

  "host_permissions": [
    ""
  ],

  "web_accessible_resources": [
    {
      "resources": [
        "assets/icons/*",
        "injected/*.js"
      ],
      "matches": [""]
    }
  ],

  "options_page": "options.html",

  "commands": {
    "open-guardium": {
      "suggested_key": {
        "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"
      },
      "description": "Open Guardium popup"
    }
  },

  "minimum_chrome_version": "114"
}

Explanation of Every Line

清理后的 Manifest 概览

以下是您提供的 manifest.json 片段的整洁、可直接复制的版本。所有标题、代码块和说明性注释均保留，重复的占位符已被移除。

1️⃣ 内容脚本

{
  "js": ["contentScript.js"],
  "run_at": "document_end",
  "all_frames": true
}

• js – 注入匹配页面的 JavaScript 文件。
• run_at – 脚本在 DOM 加载完成后运行，确保表单和输入框已存在。
• all_frames – 在主页面 以及 所有 iframe 中运行（对嵌入式登录表单尤为重要）。

2️⃣ 权限

[
  "activeTab",
  "tabs",
  "storage",
  "scripting",
  "alarms",
  "notifications"
]

3️⃣ 主机权限

[
  ""
]

• 指定扩展可以访问的站点。
• "" 表示扩展拥有与 任何 网站交互的权限——自动填充扩展通常需要此权限。

4️⃣ 可网页访问的资源

[
  {
    "resources": [
      "assets/icons/*",
      "injected/*.js"
    ],
    "matches": [""]
  }
]

• 允许网页或内容脚本加载随扩展打包的文件。
• resources – 可被外部访问的文件列表。
• matches – 被允许请求这些资源的站点。

5️⃣ 选项页面

"options_page": "options.html"

• 扩展的设置页面。
• 用于配置偏好、安全设置以及同步选项。

6️⃣ 键盘快捷命令

{
  "open-guardium": {
    "suggested_key": {
      "default": "Ctrl+Shift+G",
      "mac": "Command+Shift+G"
    },
    "description": "Open Guardium popup"
  }
}

• 定义打开 Guardium 弹出窗口的快捷键。
• 平台特定键位（default 适用于 Windows/Linux，mac 适用于 macOS）。

7️⃣ Chrome 版本要求

"minimum_chrome_version": "114"

• 确保扩展与所使用的 MV3 API 兼容。

✅ 最终总结

• 完全符合 MV3 标准的 manifest.json。
• 支持 密码管理 + 自动填充。
• 已准备好提交至 Chrome Web Store。
• 覆盖 UI、background、content scripts、permissions 和 security。

📦 Chrome 扩展工作概览

Chrome 扩展被拆分为相互隔离的组件，通过 消息传递 进行通信：

所有这些组件都在 manifest.json 中声明，Chrome 在启动时读取它，以了解 需要哪些权限、显示哪些 UI 元素以及注入哪些脚本。

📊 架构图

该图示说明了 UI 组件、内容脚本 和 后台服务工作者 如何在 Chrome 内部（扩展沙箱）和 外部（网页）之间进行交互。

请随意将 JSON 代码片段直接复制到 manifest.json 文件中，根据项目结构调整路径或键，即可获得干净、可投入生产的 Guardium 密码管理器扩展的清单文件。

**Chrome Extension Architecture Overview**

The **background service worker** acts as the central controller: it handles logic, storage, alarms, notifications, and communication. All these parts communicate using **message passing (`runtime.message`)**.  

The background can also access **Chrome data and APIs** (storage, cookies, history, bookmarks) and can communicate with **external APIs** outside Chrome.  

Overall, the diagram highlights the **separation of concerns, security isolation, and message‑based communication** that make Chrome extensions safe and efficient.