Web Vitals Chrome 扩展技术文档

安装指南

从 Chrome 网上应用店安装

1. 访问 Chrome 网上应用店。
2. 点击“添加到 Chrome”按钮。
3. 确认安装，扩展程序将自动安装并添加到您的 Chrome 浏览器中。

从 GitHub 安装（主分支）

1. 从 GitHub 下载项目的 ZIP 文件：下载链接。
2. 解压下载的 ZIP 文件，您将得到一个名为 web-vitals-extension-master 的文件夹。
3. 打开 Chrome 浏览器，进入扩展程序页面（chrome://extensions）。
4. 启用开发者模式。
5. 将 web-vitals-extension-master 文件夹拖放到扩展程序页面中进行导入（不要删除该文件夹）。

项目使用说明

环境徽章

安装扩展程序后，环境徽章将显示在浏览器的工具栏中。徽章会根据页面的 Core Web Vitals 指标状态显示不同的颜色：

• 灰色方块：未启用状态。
• 绿色圆圈：所有指标均通过。
• 琥珀色方块：一个或多个指标需要改进。
• 红色三角形：一个或多个指标未通过。

如果一个或多个指标未通过，徽章将动画显示这些指标的值（可以在选项中关闭动画）。

详细钻取

点击环境徽章图标，可以查看各个指标的详细值。扩展程序还会提示哪些指标需要用户操作。例如，Interaction to Next Paint 需要用户与页面进行交互（如点击/轻触），直到用户操作后才会显示具体值。

覆盖层

覆盖层显示了一个 Heads up display (HUD)，覆盖在页面上。这对于开发过程中需要持续查看 Core Web Vitals 指标非常有用。启用覆盖层的步骤如下：

1. 右键点击环境徽章，进入选项。
2. 勾选“显示 HUD 覆盖层”并点击“保存”。
3. 重新加载要测试的页面。覆盖层将显示在页面上。

控制台日志

Web Vitals 扩展程序还提供了控制台日志功能，用于诊断所有支持的指标。启用控制台日志的步骤如下：

1. 右键点击环境徽章，进入选项。
2. 勾选“控制台日志”并点击“保存”。
3. 打开 DevTools 中的控制台面板，并过滤 Web Vitals。

项目 API 使用文档

核心 API

扩展程序的核心 API 位于 src/browser_action/vitals.js 文件中，该脚本利用 WebVitals.js 库收集指标，并将指标变化广播给徽章和 HUD。

背景脚本

背景脚本位于 src/bg/background.js 文件中，负责根据 vitals.js 提供的数据更新徽章图标，并将数据传递给 popup.js 以显示更详细的本地指标摘要。

弹出窗口脚本

弹出窗口脚本位于 src/browser_action/popup.js 文件中，负责在点击徽章图标时渲染详细的指标报告。

选项 UI

选项 UI 位于 src/options/options.js 文件中，用于配置高级功能，如 HUD 覆盖层和控制台日志。

项目安装方式

项目可以通过以下两种方式安装：

1. 从 Chrome 网上应用店安装：访问 Chrome 网上应用店 并点击“添加到 Chrome”按钮。
2. 从 GitHub 安装（主分支）：下载项目的 ZIP 文件并手动导入到 Chrome 浏览器中。

通过以上步骤，您可以轻松安装并使用 Web Vitals Chrome 扩展程序，帮助您在开发过程中实时监控和优化页面的 Core Web Vitals 指标。