§15 浏览器工具：让 Agent 真的会"看"网页

把 Agent 的能力往外扩：让它真的会"看"、会"跑代码"、会"接外部世界"。

15.1 问题：静态 HTML 抓不到

很多内容要 JS 跑完才出现。Agent 不能只发个 HTTP GET。它得开真浏览器。

15.2 browser_execute：让模型写 CDP 代码

Cloudflare 的浏览器工具不给你固定的"点击/截图"动作集。它让模型写代码，经沙箱跑 CDP 命令操作真实浏览器。

import { createBrowserTools } from "agents/browser/ai";

const browserTools = createBrowserTools({
  ctx: this.ctx,
  browser: this.env.BROWSER,
  loader: this.env.LOADER,
});

const result = streamText({
  model, system: "You can browse the web and inspect pages.",
  messages: await convertToModelMessages(this.messages),
  tools: { ...browserTools },
  stopWhen: stepCountIs(10),
});

wrangler 要加两个 binding，入口导出运行时类：

{ "browser": { "binding": "BROWSER" }, "worker_loaders": [{ "binding": "LOADER" }] }

export { CodemodeRuntime } from "agents/browser";

15.3 三种会话模式

模式	含义	标叔的建议
one-shot	每次新会话	默认，最干净
reuse	命名共享	要登录态持续用
dynamic	可提升为共享	要登录后再继续

15.4 无状态快读

只要 browser binding，不用 DO，就能做 markdown/extract/links/scrape：

import { createQuickActionTools } from "agents/browser/ai";
const tools = createQuickActionTools({ browser: this.env.BROWSER });
// browser_markdown, browser_extract, browser_links, browser_scrape

注意

沙箱里禁止 fetch 外部网络；CDP 调用必须顺序（不能 Promise.all），否则重放日志乱序。Live View 链接约 5 分钟有效，可配合人工登录/CAPTCHA 审批。

浏览器讲完。下一章让 Agent 能跑任意代码。