企业官网建设流程全解析

解锁浏览器超能力：爪爪 PawWork 的 sys 系统调用（tabs/eval/fetch/cdp）详解

【免费下载链接】BrowserKittenPaw Work - selection-first web agent for Chrome: select on the live page, describe the outcome, take away an editable office file. BYOK, sandboxed, no server.项目地址: https://gitcode.com/gh_mirrors/pa/BrowserKitten

🐾爪爪 PawWork是一款 Chrome 侧栏 AI 助手扩展：在真实网页上选区、描述想要的结果，就能带走一份可编辑的 Office 文件。它的底层杀手锏，是sys系统调用表（pawwork-sys-v1）——模型可以在沙箱里编程你的浏览器：管理标签页、在页面内执行代码、带登录态抓取数据、直连 CDP。全程 BYOK（自带密钥）、沙箱隔离、无服务器。

一、什么是 sys？浏览器机器的「系统调用表」

PawWork 把「已登录的 Chrome」当作一台可编程的电脑。模型写的代码运行在 QuickJS 访客沙箱里，故意拿不到chrome.*、window、document这些浏览器全局对象。想操作浏览器，唯一的路径就是sys：

guest 沙箱代码 → sys.* → Service Worker（workspace_sys）→ 浏览器真实能力

• 沙箱侧的 ABI 目录与调用约定见 browserSys.js，其中SYS_OPS就是全部系统调用清单：help、capabilities、tabs.*、eval、waitFor、fetch、cdp、download、screenshot。
• Service Worker 侧的 syscall 实现在 browserSysHost.js：它负责超时控制、取消、tab 租约和权限探测。

sys不是独立的 AI 工具，而是run工具里一段沙箱代码可调用的「系统调用表」。完整的调用目录可用inspect view=sys或sys.help()查看，说明文本维护在 browserSys.js。

二、sys.tabs：打开标签页的「进程表」

sys.tabs.*一族操作标签页，就像操作系统的进程管理：

⚠️ 注意：open成功后会自动占用该 tab 的租约，防止多个会话同时操作同一标签页（报错码TAB_LEASED），实现见 browserSysHost.js。

三、sys.eval：在页面内部执行代码

sys.eval({ code, world, tabId?, frameId? })是威力最大的调用：code是一个async 函数体，返回值必须能 JSON 序列化。

关键概念是world（世界）：

• 🅰️MAIN 世界：页面自己的 JS 堆 + 页面 cookie，能读到页面状态、调用页面函数；
• 🅱️USER 世界：扩展自有世界，能碰 DOM，但碰不到页面 JS。

硬性限制（新手最容易踩的坑）：

• 代码上限 100,000 字符，单次 eval 约 20 秒超时；
• 只允许注入普通http(s)页面，chrome://、扩展页等返回NEED_PAGE；
• 返回 DOM 节点或函数会得到NOT_CLONEABLE，超大结果得到TOO_LARGE。

想要「等一会儿再判断」？别手写轮询——用sys.waitFor({ code | selector | text, timeoutMs?, stableMs? })：它在页面内部轮询，timeoutMs最高可到 120 秒；stableMs > 0还能等流式输出「稳定下来」才返回。实现细节见 browserSysHost.js。

四、sys.fetch：两张网卡，「页面身份」vs「扩展身份」

sys.fetch({ as, url, tabId?, init?, saveTo? })有两条身份通道，这是 PawWork 抓取登录页内容的核心设计：

两个实用参数：

• saveTo: '/scratch/…'或'/artifacts/…'：把响应字节直接写进访客文件系统，只返回文件回执，避免大文件撑爆上下文（上限 8MB，超出报TOO_LARGE）。
• 省略as时宿主按extension处理——建议永远显式传as。

这套「双网卡」语义的完整规则写在 browserSys.js，宿主分发逻辑见 browserSysHost.js。

五、sys.cdp：直连 Chrome DevTools Protocol

sys.cdp是一条CDP（Chrome DevTools Protocol）管道，让模型直接下发 DevTools 协议命令：

• 发送：sys.cdp({ method, params?, tabId?, targetId? })，自动 attach（协议版本 1.3）；
• 会话：{ action: "attach" | "detach" | "events" | "targets" }；
• 经典用法：attach +Network.enable，再action: "events"读取已发出的请求列表。

使用红线（新手必看）：

1. 目标标签的DevTools（F12）必须关闭，否则返回CDP_BUSY；
2. attach 期间 Chrome 会显示「正在调试」横幅；
3. 别用Network.getResponseBody倒媒体——结果上限约 6MB，媒体应把 URL 交给sys.fetch as:"page"去下载；
4. CDP 事件是定长环形缓冲（上限 300 条），不是完整日志。

超时与容量常量集中在 browserSysHost.js：普通调用 20s、waitFor120s、CDP 60s。

六、其余调用与通用错误码速查

除了四大主角，sys还有：

• sys.capabilities()：实时探测 userScripts / debugger / 截图 / 下载是否可用及大小限制——选执行路线前先探一次；
• sys.download({ url, filename? })：走chrome.downloads，用本 profile 的 cookie 罐 + 本机 IP 下载大文件；
• sys.screenshot({ tabId?, format?, saveTo? })：视口截图，目标标签必须可见，否则TAB_NOT_VISIBLE。

七、新手上手：三步跑通第一个 sys 调用

1. 加载扩展：Chrome 打开chrome://extensions→ 开发者模式 → 加载已解压的扩展（README.md 有完整步骤）；
2. 在侧栏粘贴你的 OpenAI 兼容 API Key（BYOK，存在chrome.storage.local），Chrome 138+ 记得在扩展详情页开启Allow User Scripts；
3. 在一个普通http(s)页面直接对侧栏说人话，例如：「列出我打开的所有标签页」「抓取这个页面的商品价格存到表格」。模型会自行在run沙箱里编排sys.*调用，并在侧栏展示交付物。

想查完整 ABI 目录，对模型侧的入口是inspect view=sys；人类读者建议直接读 src/agent/AGENTS.md 的 sys 调用表和根目录 AGENTS.md 的「未实现的边界」一节——那里写明了 tab 租约、取消语义等硬边界。

八、关键文件与文档索引

• 访客 ABI 与 help 目录：src/agent/vnext/sessionWorkspace/browserSys.js
• Service Worker 侧 syscall 实现（tabs / eval / waitFor / fetch / cdp / download / screenshot）：src/agent/vnext/host/browserSysHost.js
• 调用约定与工具契约总览：src/agent/AGENTS.md
• 消息路由（workspace_sys只接受本扩展 offscreen 的请求）：src/AGENTS.md
• 安装与使用入口：README.md
• 打包 playbook（示例：页面重排 skill）：src/agent/vnext/skills/page-restyle/SKILL.md

一句话总结：sys.tabs管进程、sys.eval管现场、sys.fetch管网络、sys.cdp管协议——四把钥匙打开同一台「浏览器机器」，而沙箱与租约机制保证模型只能按规矩进门。🔐

【免费下载链接】BrowserKittenPaw Work - selection-first web agent for Chrome: select on the live page, describe the outcome, take away an editable office file. BYOK, sandboxed, no server.项目地址: https://gitcode.com/gh_mirrors/pa/BrowserKitten