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

现在，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 插件（其中包含扩展程序技能），也可以通过自定义 > Build With 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. 在启动时，或在设置 > 自定义中，在 Build with Google 下启用 Chrome 开发者工具。这只会安装 Chrome 开发者工具技能，而不会安装 MCP 服务器。

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

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

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

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

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

  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. 创建一个新工作区，并创建一个测试提示：“Create a 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 代理指令

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

当您使用“Let's publish this”（发布此内容）或“Prepare this extension for the store”（为商店准备此扩展程序）等短语时，该技能就会被触发。不过，为了简化 Agentic Workflows，请将以下内容添加到智能体的系统指令中（例如，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.

在这种情况下，代理应创建 Manifest V3 文件并请求 storage 权限，因为它知道自己需要保留数据。现在，智能体可以构建扩展程序、安装扩展程序、观察其运行情况并验证其稳定性，而您无需离开对话界面。

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

通过 CHROMEWEBSTORE.md 简化分发的提示示例

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

  • 首次发布：当您的扩展程序功能完善，并且您希望生成初始商店展示时。
Prepare the extension for publication on the Chrome Web Store.
  • 更新权限和理由：Chrome 应用商店会强制执行单一用途政策，并要求您为 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 应用商店。

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