面向智能体的 Chrome 开发者工具使智能体能够启动浏览器会话,并使用 MCP 服务器安装 Chrome 扩展程序或与之互动。这样,您的编程智能体就可以控制扩展程序的生命周期:安装、重新加载和触发操作。
您无需再手动加载未打包的扩展程序、每次更改代码时都点击扩展程序管理页面中的重新加载按钮,以及手动触发扩展程序来测试它,而是可以指示 AI 代理自主管理整个流程。这弥合了静态代码生成与实时扩展程序测试之间的差距。
您可以使用扩展程序工具执行以下操作:
- 安装扩展程序:从本地目录路径安装未封装的 Chrome 扩展程序。
- 列出扩展程序:检索所有已安装的 Chrome 扩展程序的列表,包括其名称、ID、版本和启用状态。
- 重新加载扩展程序:按 ID 重新加载未打包的 Chrome 扩展程序,以立即应用代码更改。
- 触发操作:通过扩展程序 ID 触发扩展程序的默认操作,例如打开菜单或执行后台脚本操作(请参阅 API 文档中的 chrome.action)。
- 卸载扩展程序:按 ID 从浏览器会话中移除 Chrome 扩展程序。
前提条件
在使用扩展工具之前,请确保您已做好以下准备:
- 实验性标志:在代理的开发者工具中,扩展类别默认处于非活跃状态。您必须使用
--categoryExtensions标志配置 MCP 服务器。 - 未打包的扩展程序:
install_extension等工具需要未打包的扩展程序文件夹的绝对路径,因此非常适合本地开发。
Chrome 扩展程序工具的应用场景
在开发和修复 bug 时,指示代理管理扩展程序生命周期。
注意:代理执行步骤是潜在行为的示例。智能体的行为可能会有所不同。
快速迭代和重新加载扩展程序
每次更改文件后都手动重新加载扩展程序会减慢开发速度。 指示代理应用代码修复并立即重新加载扩展程序,以验证新行为,而无需手动干预。
提示示例:
您可以采用以下一般方法:
Verify the extension has access to the active tab.
或者,您也可以更详细地描述:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
代理执行示例:代理修改文件系统中的 manifest.json 文件。然后,使用提供的 ID 调用 reload_extension 工具。
最后,它会调用 trigger_extension_action 工具来激活扩展程序,并验证控制台中是否抛出任何权限错误。
在目标网页上测试扩展程序的默认操作
您通常需要测试内容脚本或扩展程序操作与特定网站的互动方式。通过指示代理前往相应网站、安装扩展程序并触发它,自动执行此流程。
提示示例:
您可以采用以下一般方法:
Test my extension on example.com and verify it works correctly.
或者,您也可以更详细地描述:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
智能体执行示例:您的智能体使用 navigate_page 导航到目标网址。然后,它会使用 install_extension 和提供的绝对路径。加载扩展程序后,它会执行 trigger_extension_action 来模拟用户点击。最后,它使用 list_console_messages 确认内容脚本已运行并生成预期输出。
验证已安装的扩展程序并进行清理
在自动化测试期间,您可能需要验证扩展程序是否已正确加载并具有正确的版本,或者移除扩展程序以确保下一个测试处于干净状态。
提示示例:
Uninstall 'My Test Extension' from the browser.
智能体执行示例:您的智能体使用 list_extensions 工具检索已安装的扩展程序及其元数据的列表。它会解析输出,以识别与“My Test Extension”关联的 ID。然后,它会使用 uninstall_extension 工具和该 ID 安全地从浏览器中移除该扩展程序。
创建新扩展程序并对其进行测试
从头开始创建新的 Chrome 扩展程序通常需要创建样板文件,并手动将解压缩的目录加载到浏览器中进行测试。只需指示代理生成初始代码、加载扩展程序并验证其基本功能,即可一步到位地跳过此手动设置。
提示示例:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
代理执行示例:您的代理创建了一个基本的 Manifest V3 manifest.json 和一个监听 chrome.action.onClicked 事件的后台服务工作器。然后,它会前往测试网页,调用 install_extension,并使用 trigger_extension_action 模拟用户点击。最后,它会检查 DOM 或拍摄屏幕截图,以确认背景已变为灰色,从而证明样板代码正常运行。