使用编码智能体构建扩展程序

现在，Antigravity 等 AI 编码智能体可以生成准确度令人惊叹的扩展程序代码。不过，如要真正发挥它们的潜力并确保获得高质量的结果，您需要为它们提供正确的上下文和工具。

本指南介绍了如何在编码智能体中设置正确的工具，以及这些工具如何帮助您更快地构建更好的扩展程序。

我们为编码智能体创建了一项专门为扩展程序开发而设计的技能。这项技能是我们更广泛的计划“Modern Web Guidance”的一部分，该计划为 AI 编码智能体提供 Web 平台专业知识、最佳实践和现代 API 模式。

不过，构建扩展程序只是第一步。为了帮助您验证代码是否按预期运行，适用于智能体的 Chrome 开发者工具可让 AI 编码助理直接在 Chrome 中调试扩展程序，并受益于开发者工具的调试功能和性能分析。

设置

Modern Web Guidance

如需使用技能包，请将 Modern Web Guidance 安装到您偏好的环境中，然后向其中添加扩展程序技能。以下是一些热门工具的说明。

CLI

对于大多数编码智能体（包括 Gemini CLI、Claude Code 和 Codex），建议通过 Chrome 团队构建的 modern-web-guidance CLI 进行安装。通过 modern-web-guidance CLI 安装技能会自动使技能保持最新状态。

  npx modern-web-guidance@latest install --choose

这会运行一个交互式向导，以根据您的偏好安装技能。当系统显示选项时，请选择您的编码智能体，然后同时选择 chrome-extensions 和 modern-web-guidance。

Modern Web Guidance CLI 选择器提示。
在安装程序向导中选择 chrome-extensions 和 modern-web-guidance。

Antigravity

安装 Antigravity 时，您可以选择包含扩展程序技能的 Modern Web Guidance 插件，也可以通过自定义 > 使用 Google 插件构建 > Modern Web Guidance 添加该插件。

Antigravity 安装界面中的 Modern Web Guidance 插件。
在 Antigravity 安装期间选择 Modern Web Guidance 插件。

Antigravity 自定义设置中的“Build With Google”插件下的“Modern Web Guidance”。
安装后通过“自定义”添加 Modern Web Guidance。

适用于编码智能体的 Chrome 开发者工具

您可以将适用于智能体的 Chrome 开发者工具作为插件、扩展程序或 MCP 服务器添加到您选择的编码智能体中。

以下是一些最热门的智能体的说明。

Antigravity

  1. 下载 Antigravity IDE（不建议使用 Antigravity，因为它不允许您手动修改 MCP 服务器配置）。

  2. 在启动时，或在设置 > 自定义中，在使用 Google 构建下启用Chrome 开发者工具。这只会安装 Chrome 开发者工具技能，而不会安装 MCP 服务器。

    Antigravity 设置界面中的“开发者工具和现代 Web 指南”复选框选项。
    在启动或自定义期间启用 Modern Web Guidance 和 Chrome 开发者工具。

  3. 如需添加 Chrome 开发者工具 MCP 服务器，请依次前往设置 > 自定义，点击添加 MCP 服务器 按钮，然后搜索 Chrome 开发者工具。

    Antigravity 中的“添加 MCP 服务器”搜索对话框，显示了搜索结果中的 Chrome 开发者工具。
    在“添加 MCP 服务器”窗口中搜索 Chrome 开发者工具。
    在 Antigravity 界面中安装 Chrome 开发者工具 MCP 服务器。
    安装 Chrome 开发者工具 MCP 服务器。
    自定义列表，显示已添加到有效 MCP 服务器的 Chrome 开发者工具。
    Chrome 开发者工具 MCP 服务器列在“自定义”下。

  4. 点击 Open MCP Config 以打开 MCP 服务器配置。请注意，您必须关闭设置才能在 IDE 中看到配置文件。

    “自定义设置”窗口，其中显示了“打开 MCP 配置”按钮。
    在设置中找到“Open MCP config”按钮。

  5. 添加以下两个配置参数：--categoryExtensions（用于启用扩展程序工具）和 --autoConnect（用于启用与现有 Chrome 个人资料的连接，在使用 Chrome 的内置 AI API 或需要登录时，必须启用此参数）。

    {
 "mcpServers": {
   "chrome-devtools-mcp": {
     "args": [
       "-y",
       "chrome-devtools-mcp@latest",
       "--categoryExtensions",
       "--autoConnect"
     ],
     "command": "npx"
   }
 }
}

  6. 如需启用远程调试，请打开 Chrome，前往 chrome://inspect/#remote-debugging，然后选择允许此浏览器实例进行远程调试 。

    chrome://inspect 页面，其中显示了远程调试的复选框。
    在 Chrome 中启用“允许此浏览器实例进行远程调试”设置。

  7. 重启 Antigravity IDE。

  8. 创建一个新的工作区，并创建一个测试提示：“创建一个 Hello World Chrome 扩展程序。使用 Chrome 开发者工具进行测试。”当智能体在浏览器中启动扩展程序测试时，Chrome 会向您显示一个对话框，请求远程调试权限。选择允许 。启用远程调试会话后，Chrome 会显示横幅“Chrome 目前受到自动测试软件的控制”。

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

其他智能体

如需了解有关设置其他智能体的说明，请查看 Chrome 开发者工具 MCP GitHub 上的文档。

CHROMEWEBSTORE.md 智能体说明

发布扩展程序的一个重要环节是填写开发者信息中心。该技能通过让编码智能体创建和维护 CHROMEWEBSTORE.md 文件来解决此问题，该文件会跟踪必要的信息，包括对代码中请求的每项权限的理由说明。

当您使用“Let's publish this”或“Prepare this extension for the store”等短语时，该技能将被触发，但为了简化智能体工作流程，请将以下内容添加到智能体的系统说明中（例如，Antigravity 的 ~/.gemini/GEMINI.md 或 Claude 的 ~/.claude/CLAUDE.md）：

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

使用编码智能体构建和测试扩展程序

Modern Web Guidance 中包含的扩展程序技能可通过以下三种主要方式帮助智能体：

  • 最新的 API 知识 ：它会向智能体介绍最新的 API，这些 API 可能是在您使用的模型经过训练后发布的。
  • 最佳实践 ：它可确保智能体能够访问我们的团队多年来构建 Chrome 扩展程序所学到的所有最佳实践。
  • 提交准备就绪 ：它会跟踪您可能需要提交扩展程序到 Chrome 应用商店的信息，从而简化分发流程。

Modern Web Guidance 还包含一些技能，涵盖了提供出色用户体验所需的一切，例如性能、无障碍功能和现代 API。例如，内置 AI API 技能可确保 AI 编码智能体始终使用最新版本的 API，并提供有关使用这些 API 的明确架构规则和硬件限制的其他信息，从而实现对模型下载的高效管理、对安全性的关注以及优雅的回退策略。

该技能还有助于智能体跟踪发布所需的必要信息，包括对代码中请求的每项权限的理由说明。例如，如果您要求编码智能体使用 Side Panel API 构建扩展程序并将其发布到 Chrome 应用商店，则智能体会识别出它需要 sidePanel 权限。然后，它会创建一个包含理由说明的 CHROMEWEBSTORE.md 文件。准备好提交时，您可以查看此理由说明，根据需要进行调整，然后将其直接复制到开发者信息中心。

适用于智能体的 Chrome 开发者工具可让 AI 编码助理在运行的 Chrome 实例中安装和调试扩展程序，具体如下：

  • 安装和卸载扩展程序。
  • 列出所有已安装的扩展程序并重新加载它们。
  • 触发扩展程序操作。
  • 检查扩展程序的每个界面（弹出式窗口、侧边栏、Service Worker）。

以下是一个提示和一个视频，展示了如何在实践中使用这些功能：

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

在本例中，智能体应创建一个清单 V3 文件并请求 storage 权限，因为它知道需要保留数据。现在，智能体无需离开聊天界面即可构建扩展程序、安装扩展程序、观看扩展程序运行并验证其稳定性。

这是一个简单的提示示例。如需详细了解不同的提示技巧，并找到最适合您的使用场景的技巧，请参阅我们的提示工程指南。

使用 CHROMEWEBSTORE.md 简化分发流程的提示示例

虽然安装扩展程序技能并向智能体添加说明可以完成大部分工作，但在提示中具体说明可以为所处的开发阶段带来更好的结果。以下是一份快速指南，介绍了如何提示智能体创建、更新和维护 CHROMEWEBSTORE.md 文件。

  • 首次发布：当您的扩展程序功能完备，并且您想要生成初始应用商店信息时。
Prepare the extension for publication on the Chrome Web Store.
  • 更新权限和理由说明：Chrome 应用商店会强制执行单一用途政策，并要求对 `manifest.json` 中请求的每项权限提供详细的理由说明。manifest.json
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • 处理应用商店拒绝：如果您的扩展程序在审核过程中被拒绝或被标记，您可以直接向智能体提供拒绝理由，并要求它更新您的合规性元数据。
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

总结

将 Modern Web Guidance 技能与适用于智能体的 Chrome 开发者工具相结合，不仅有助于您更快地构建高质量的功能，还能确保您的扩展程序稳定且已准备好提交到 Chrome 应用商店。

不妨在下一个项目中开始尝试使用这些工具，看看它们如何简化您的扩展程序开发流程，从初始原型到发布。