原始标题: How My Claude Code Sonnet 4.6 AI Agent Navigates Chrome Autonomous

发布日期: 2026-02-18 | 来源频道: @AllAboutAI

📝 深度摘要

AI 智能体架构与自主开发实战笔记

1. 对话背景与核心主题

本视频主讲人是一位资深 AI 智能体开发者，长期探索如何让 Claude Code AI 代理实现真正的“无人值守”运行。核心元问题聚焦于：如何通过浏览器这一入口，实现 AI 代理对外部世界的完全自主控制。不同于传统的虚拟鼠标或屏幕截图方案，讲师展示了一套基于 Chrome DevTools Protocol（CDP）的硬核技术方案，通过 JavaScript 命令直接与浏览器交互，从而实现高效、精准的自动化操作。

2. 核心干货概览 (Agentic Stack & Assets)

3. 智能体架构与 SOP (Architecture & Implementation Deep Dive)

环境搭建与初始化

配置路径还原： 首先需要在 Mac Mini（或任意 Linux/Mac 机器）上启动 Chrome 浏览器于调试模式。具体而言，执行一个启动脚本，该脚本以调试模式打开 Chrome，并将调试端口设置为 9222。这一步骤的核心 CLI 逻辑大致如下：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

该命令会打开一个 socket 端口，使得外部程序可以通过 Chrome DevTools Protocol 连接到浏览器实例。随后，创建 browser.js 文件，该文件本质上是一系列 CDP 命令的封装，供 Claude Code 通过 browser js 指令调用。

依赖环境： Chrome 浏览器本身、Node.js（用于运行 browser.js）、以及 Claude Code CLI。讲师强调整套方案的简易性——所有命令都可以轻松迁移到 Skill MD 文件中，使 AI 代理能够直接调用。

自主运行逻辑链 (The Loop)

自主运行的核心闭环逻辑遵循以下路径：

1. 任务感知：Claude Code 接收自然语言指令（如“打开 Hacker News 并点击第一条帖子”）
2. 命令解析：AI 解析指令，调用对应的 browser.js 函数（如 open、list、click）
3. CDP 执行：browser.js 通过 WebSocket 向 Chrome 发送 CDP 命令，执行实际浏览器操作
4. 状态反馈：CDP 返回当前页面状态（DOM 结构、可点击元素列表、URL 等）
5. 自我修正：AI 根据返回内容判断是否需要调整下一步操作（如元素定位失败时重新查询）

这一 Loop 实现了“感知-执行-反馈-修正”的完整闭环，使代理能够在没有人工干预的情况下完成复杂的多步骤任务。

实战案例还原 (Use Cases)

案例一：Hacker News 自动导航与点击

• 指令示例：use browser js command list to go to hackernews.com
• 执行流程：
  1. 调用 browser.js list 查看当前打开的标签页
  2. 调用 browser.js open 并传入目标 URL，导航至 hackernews.com
  3. 调用 browser.js elements 获取当前页面所有可点击元素
  4. AI 分析返回的 DOM 结构，定位第一条帖子对应的元素索引（编号 0）
  5. 调用 browser.js click 0 完成点击操作

讲师特别指出，这种方式比使用虚拟鼠标悬停和点击要高效得多。CDP 命令直接操作 DOM 元素，不受页面渲染延迟影响，且能够适配几乎所有网页结构。

案例二：X (Twitter) 帖子自动发布

• 指令示例：use X skill to compose a draft of "hello YouTube. This is my skills md.store page"
• 执行流程：
  1. 调用 browser.js open 导航至 X 的发帖页面
  2. 利用 CDP 脚本将准备好的文本内容粘贴到输入框
  3. 截图确认内容已正确填入

讲师演示了 browser.js 与其他 Skills（如 X Skill）的组合使用方式。通过预先定义好的 Skill MD 路径，AI 能够直接定位到发帖页面并完成内容填充，整个过程仅耗时数秒。

细节支撑

讲师提到他在 Cron Jobs 中配置了类似的自动任务，使 AI 能够在特定时间触发浏览器操作。例如，每日定时检查某些网站更新、自动发布内容到社交媒体等。关于 24/7 运行中可能遇到的报错，讲师提及了"Inception 策略"（注：原文未展开具体报错细节和解决方案，仅提到该概念）。

4. 核心执行资产 (CLI Commands & Prompts)

指令集还原

以下是视频中演示的关键终端指令和 browser.js 函数调用：

• 浏览器启动：--remote-debugging-port=9222（Chrome 调试模式启动参数）
• browser.js open：接受 URL 参数，导航至指定网页
• browser.js list：列出当前所有打开的标签页，返回标签页 ID 和 URL
• browser.js elements：获取当前页面所有可点击/可交互元素，返回元素索引和描述
• browser.js click：接受元素索引参数，点击对应元素
• browser.js close：关闭指定标签页

调用语法示例（通过 Claude Code 自然语言触发）：

use browser js command list to go to hackernews.com
use browser js command click on number one post

系统提示词策略

视频中未直接展示完整的 System Prompt，但从演示逻辑可以推断其核心策略：Agent 被配置为优先使用 CDP 命令而非模拟鼠标操作。Prompt 中应明确指示代理“使用 browser.js 的 JavaScript 命令与浏览器交互，而非尝试模拟人类用户的鼠标悬停和点击行为”。

5. 开发者进阶洞察 (Vibe Coding Insights & Boundary)

Vibe Coding 核心心法

讲师在视频中传递了一个核心观点：“写指令而非写代码”。他展示了如何通过自然语言指令驱动 AI 代理完成复杂的浏览器操作，整个过程无需编写传统意义上的程序代码。browser.js 将所有底层 CDP 协议封装为简单的函数调用，代理只需理解任务意图并选择正确的函数和参数即可。这一范式转移意味着开发者从“代码实现者”转变为“任务描述者”，大幅降低了自动化系统的构建门槛。

自主性风险预警

尽管演示展示了高效能的操作流程，讲师也暗示了潜在风险：

• 死循环风险：如果 AI 代理在循环任务中缺乏有效的退出条件判断，可能陷入反复刷新或点击的困境
• 高额账单风险：持续的浏览器自动化操作会产生大量 API 调用，尤其在使用 Sonnet 4.6 等高成本模型时，需密切关注 Token 消耗
• 页面结构变化：依赖于 DOM 元素索引的 click 操作可能在页面改版后失效，需要定期维护元素定位逻辑

实战陷阱

讲师提到的关键坑点包括：

• 虚拟鼠标的局限性：尝试使用虚拟鼠标模拟人类点击的方式效率低下且容易受页面渲染时序影响
• ** Skill MD 的维护成本**：虽然将命令封装到 Skill MD 中便于调用，但需要手动维护技能描述与实际 CDP 命令的对应关系
• 多标签页管理复杂性：当同时控制多个标签页时，需要精确管理标签页索引（tab zero 等），混乱的索引管理会导致操作目标错误

6. 金句 (Golden Quotes)

• “我使用这套设置的优势在于，它能够高效地利用这些 JavaScript 命令来导航网页，而不是尝试用虚拟鼠标悬停和点击。我认为这种方式更加有效，而且能够适配我们用 Chrome 打开的所有页面。”
• “所以我们基本上可以为所欲为。我们可以把这个 browser.js 和我的 X Skill 结合起来，这样就能直接发帖子了。整个过程快得惊人，只需要几秒钟。”
• “Sonnet 4.6 在智能体相关任务上的表现相当强劲，非常值得一试。”

注：本笔记基于提供的字幕转录稿还原，未引入任何外部 GitHub 信息。部分技术细节（如完整的 System Prompt 内容、具体 Cron Job 配置参数）原视频未展示，已如实标注。

📺 视频原片

视频ID: j6POqm76Slg