AI 编码智能体（例如 Antigravity）现在可以生成准确度令人惊叹的扩展程序代码。不过，如要真正发挥它们的潜力并确保获得高质量的结果，您需要为它们提供合适的上下文和工具。
本指南介绍了如何在编码智能体中设置合适的工具，以及这些工具如何帮助您更快地构建更好的扩展程序。
我们为编码智能体创建了一项专门为扩展程序开发而设计的技能。这项技能是我们更广泛的计划“现代 Web 指南”的一部分，该计划为 AI 编码智能体提供 Web 平台专业知识、最佳实践和现代 API 模式。
不过，构建扩展程序只是第一步。为了帮助您验证代码是否按预期运行，适用于智能体的 Chrome 开发者工具可让 AI 编码助理直接在 Chrome 中调试扩展程序，并受益于开发者工具的调试功能和性能分析。
设置
现代 Web 指南
如需使用技能包，请将“现代 Web 指南”安装到您偏好的环境中，然后向其中添加扩展程序技能。以下是一些常用工具的说明。
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.
使用编码智能体构建和测试扩展程序
“现代 Web 指南”中包含的扩展程序技能可通过以下三种主要方式帮助智能体：
- 最新的 API 知识 ：它会向智能体介绍最新的 API，这些 API 可能是在您使用的模型接受训练后发布的。
- 最佳实践 ：它可确保智能体能够访问我们的团队多年来构建 Chrome 扩展程序时学到的所有最佳实践。
- 提交准备就绪 ：它会跟踪您可能需要提交扩展程序到 Chrome 应用商店的信息，从而简化分发流程。
“现代 Web 指南”还包含涵盖提供出色用户体验所需一切内容的技能，例如性能、无障碍功能和现代 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.
总结
将“现代 Web 指南”技能与适用于智能体的 Chrome 开发者工具相结合，不仅有助于您更快地构建高质量的功能，还能确保您的扩展程序稳定且已准备好提交到 Chrome 应用商店。
不妨在下一个项目中开始尝试使用这些工具，看看它们如何简化从初始原型到发布的扩展程序开发流程。