AI 编码智能体（例如 Antigravity）现在可以生成准确度令人惊叹的扩展程序代码。不过，如要充分发挥它们的潜力并确保获得高质量的结果，您需要为它们提供合适的背景信息和工具。
本指南介绍了如何在编码智能体中设置合适的工具，以及这些工具如何帮助您更快地构建更好的扩展程序。
我们为编码智能体创建了一项专门为扩展程序开发而设计的技能。这项技能是我们更广泛的计划“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。
Antigravity
安装 Antigravity 时，您可以选择包含扩展程序技能的 Modern Web Guidance 插件，也可以通过自定义 > 使用 Google 插件构建 > Modern Web Guidance 添加该插件。
适用于编码智能体的 Chrome 开发者工具
您可以将适用于智能体的 Chrome 开发者工具作为插件、扩展程序或 MCP 服务器添加到您选择的编码智能体中。
以下是一些最热门的智能体的说明。
Antigravity
如需使用 Chrome 开发者工具 MCP 服务器，请按照 Antigravity 文档中的说明安装自定义 MCP 服务器。将以下内容添加到 MCP 服务器配置中：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
其他智能体
如需了解如何设置其他智能体，请查看 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.
在本例中，智能体应创建 Manifest 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 应用商店。
不妨在下一个项目中开始尝试使用这些工具，看看它们如何简化您的扩展程序开发流程，从初始原型到发布。