Repository: eze-is/web-access Branch: main Commit: 6532d4da491f Files: 11 Total size: 51.5 KB Directory structure: gitextract_o6wyb2pj/ ├── .claude-plugin/ │ ├── marketplace.json │ └── plugin.json ├── .gitignore ├── README.md ├── SKILL.md ├── references/ │ ├── cdp-api.md │ └── site-patterns/ │ └── .gitkeep └── scripts/ ├── cdp-proxy.mjs ├── check-deps.mjs ├── find-url.mjs └── match-site.mjs ================================================ FILE CONTENTS ================================================ ================================================ FILE: .claude-plugin/marketplace.json ================================================ { "name": "web-access", "owner": { "name": "一泽 Eze" }, "metadata": { "description": "Complete web browsing and automation skill for Claude Code" }, "plugins": [ { "name": "web-access", "description": "All web operations: search, fetch, CDP browser automation, site experience accumulation", "source": "./", "category": "productivity", "tags": ["web", "browser", "cdp", "automation", "search"] } ] } ================================================ FILE: .claude-plugin/plugin.json ================================================ { "name": "web-access", "description": "Complete web browsing and automation skill for Claude Code - intelligent tool selection, CDP browser automation, and site experience accumulation", "version": "2.4.2", "author": { "name": "一泽 Eze" }, "homepage": "https://github.com/eze-is/web-access", "repository": "https://github.com/eze-is/web-access", "license": "MIT", "keywords": ["web", "browser", "cdp", "automation", "search"], "skills": "./" } ================================================ FILE: .gitignore ================================================ .DS_Store *.log references/site-patterns/*.md ================================================ FILE: README.md ================================================
🌐 Language
English | 简体中文 | 繁體中文 | 日本語 | 한국어 | Français | Deutsch | Español | Português | Русский
image

给 AI Agent 装上完整联网能力的 Skill。
🌐 官网 · 📖 设计详解 · ⚡ 快速安装

AI Agent 原本的联网能力(WebSearch、WebFetch)缺少调度策略和浏览器自动化能力。这个 Agent Skill 补上的是:**联网策略 + CDP 浏览器操作 + 站点经验积累**。兼容所有支持 SKILL.md 的 Agent(Claude Code、Cursor、Gemini CLI、Codex CLI 等)。 > 推荐必读:[Web Access:一个 Skill,拉满 Agent 联网和浏览器能力](https://mp.weixin.qq.com/s/rps5YVB6TchT9npAaIWKCw) ,完整介绍了 Web-Access Skill 的开发细节与 Agent Skill 设计哲学,帮助你也能写出类似通用、高上限的 Skill --- ## v2.5.0 能力 | 能力 | 说明 | |------|------| | 联网工具自动选择 | WebSearch / WebFetch / curl / Jina / CDP,按场景自主判断,可任意组合 | | CDP Proxy 浏览器操作 | 直连用户日常 Chrome,天然携带登录态,支持动态页面、交互操作、视频截帧 | | 三种点击方式 | `/click`(JS click)、`/clickAt`(CDP 真实鼠标事件)、`/setFiles`(文件上传) | | 本地 Chrome 书签/历史检索 | `find-url.mjs` 查询公网搜不到的目标(内部系统)或用户访问过的页面,支持关键词/时间窗/访问频度排序 | | 并行分治 | 多目标时分发子 Agent 并行执行,共享一个 Proxy,tab 级隔离 | | 站点经验积累 | 按域名存储操作经验(URL 模式、平台特征、已知陷阱),跨 session 复用 | | 媒体提取 | 从 DOM 直取图片/视频 URL,或对视频任意时间点截帧分析 | **v2.5.0 更新:** - **本地 Chrome 资源检索** — 新增 `scripts/find-url.mjs`,从本地 Chrome 书签/历史按关键词/时间窗/访问频度定位 URL。典型场景:用户提到组织内部系统("我们的 XX 平台"等公网搜不到的目标)、回查之前访问过但不记得地址的页面、查看最近高频访问网站等(场景感谢 @MVPGFC 在 #60 提出)
v2.4.3 更新 - **修复 CLAUDE_SKILL_DIR 路径问题** — bash 代码块改用 `${CLAUDE_SKILL_DIR}` 字符串替换语法,修复 Windows Git Bash 路径转换错误和变量未设置问题(#47 #46) - **站点经验列表合并到前置检查** — 启动检查通过后自动输出已有站点经验列表,移除不可靠的 `!` 内联注入
v2.4.1 更新 - **跨平台支持** — 脚本从 bash 迁移到 Node.js,Windows / Linux / macOS 均可使用 - **DOM 边界穿透** — 新增技术事实:eval 递归遍历可穿透 Shadow DOM、iframe 等选择器不可跨越的边界
v2.4 更新 - **站点内 URL 可靠性** — 新增事实说明:站点生成的链接自带完整上下文,手动构造的 URL 可能缺失隐式必要参数 - **平台错误提示不可信** — 新增技术事实:平台返回的"内容不存在"等提示可能是访问方式问题而非内容本身问题 - **小红书站点经验增强** — xsec_token 机制、创作者平台状态校验、暂存草稿流程
v2.3 更新 - **浏览哲学重构** — 更清晰的「像人一样思考」框架,强调目标驱动而非步骤驱动 - **Jina 积极推荐** — 明确鼓励在合适场景主动使用 Jina 节省 token - **子 Agent prompt 指引优化** — 明确加载写法,增加避免动词暗示执行方式的说明
## 安装 **方式一:npx skills 一键安装(推荐)** ```bash npx skills add eze-is/web-access ``` > [skills CLI](https://github.com/vercel-labs/skills) 是开源的 Agent Skill 包管理器,自动检测你的 Agent 环境并安装到正确位置。 **方式二:让 Agent 自动安装** ``` 帮我安装这个 skill:https://github.com/eze-is/web-access ``` **方式三:Plugin 安装(Claude Code)** ```bash claude plugin marketplace add https://github.com/eze-is/web-access claude plugin install web-access@web-access --scope user ``` **方式四:手动** ```bash git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access ``` ## 前置配置(CDP 模式) CDP 模式需要 **Node.js 22+** 和 Chrome 开启远程调试: 1. Chrome 地址栏打开 `chrome://inspect/#remote-debugging` 2. 勾选 **Allow remote debugging for this browser instance**(可能需要重启浏览器) 环境检查(Agent 运行时会自动完成前置检查,无需手动执行): ```bash node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs" # $CLAUDE_SKILL_DIR 是 skill 加载时自动设置的环境变量 # 手动运行请替换为实际路径,如 ~/.claude/skills/web-access ``` ## CDP Proxy API Proxy 通过 WebSocket 直连 Chrome(兼容 `chrome://inspect` 方式,无需命令行参数启动),提供 HTTP API: ```bash # 启动(Agent 会自动管理 Proxy 生命周期,无需手动启动) node "${CLAUDE_SKILL_DIR}/scripts/cdp-proxy.mjs" & # 页面操作 curl -s "http://localhost:3456/new?url=https://example.com" # 新建 tab curl -s -X POST "http://localhost:3456/eval?target=ID" -d 'document.title' # 执行 JS curl -s -X POST "http://localhost:3456/click?target=ID" -d 'button.submit' # JS 点击 curl -s -X POST "http://localhost:3456/clickAt?target=ID" -d '.upload-btn' # 真实鼠标点击 curl -s -X POST "http://localhost:3456/setFiles?target=ID" \ -d '{"selector":"input[type=file]","files":["/path/to/file.png"]}' # 文件上传 curl -s "http://localhost:3456/screenshot?target=ID&file=/tmp/shot.png" # 截图 curl -s "http://localhost:3456/scroll?target=ID&direction=bottom" # 滚动 curl -s "http://localhost:3456/close?target=ID" # 关闭 tab ``` ## ⚠️ 使用前提醒 通过浏览器自动化操作社交平台(如小红书)存在账号被平台限流或封禁的风险。**强烈建议使用小号进行操作。** ## 使用 安装后直接让 Agent 执行联网任务,skill 自动接管: - "帮我搜索 xxx 最新进展" - "读一下这个页面:[URL]" - "去小红书搜索 xxx 的账号" - "帮我在创作者平台发一篇图文" - "同时调研这 5 个产品的官网,给我对比摘要" ## 设计哲学 > Skill = 哲学 + 技术事实,不是操作手册。讲清 tradeoff 让 AI 自己选,不替它推理。 详见 [SKILL.md](./SKILL.md) 中的浏览哲学部分。 ## License MIT · 作者:[一泽 Eze](https://github.com/eze-is) · [官网](https://web-access.eze.is) ## Star History [![Star History Chart](https://api.star-history.com/svg?repos=eze-is/web-access&type=Date)](https://star-history.com/#eze-is/web-access&Date) image ================================================ FILE: SKILL.md ================================================ --- name: web-access license: MIT github: https://github.com/eze-is/web-access description: 所有联网操作必须通过此 skill 处理,包括:搜索、网页抓取、登录后操作、网络交互等。 触发场景:用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容(小红书、微博、推特等)、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。 metadata: author: 一泽Eze version: "2.5.0" --- # web-access Skill ## 前置检查 在开始联网操作前,先检查 CDP 模式可用性: ```bash node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs" ``` 未通过时引导用户完成设置: - **Node.js 22+**:必需(使用原生 WebSocket)。版本低于 22 可用但需安装 `ws` 模块。 - **Chrome remote-debugging**:在 Chrome 地址栏打开 `chrome://inspect/#remote-debugging`,勾选 **"Allow remote debugging for this browser instance"** 即可,可能需要重启浏览器。 检查通过后并必须在回复中向用户直接展示以下须知,再启动 CDP Proxy 执行操作: ``` 温馨提示:部分站点对浏览器自动化操作检测严格,存在账号封禁风险。已内置防护措施但无法完全避免,Agent 继续操作即视为接受。 ``` ## 浏览哲学 **像人一样思考,兼顾高效与适应性的完成任务。** 执行任务时不会过度依赖固有印象所规划的步骤,而是带着目标进入,边看边判断,遇到阻碍就解决,发现内容不够就深入——全程围绕「我要达成什么」做决策。这个 skill 的所有行为都应遵循这个逻辑。 **① 拿到请求** — 先明确用户要做什么,定义成功标准:什么算完成了?需要获取什么信息、执行什么操作、达到什么结果?这是后续所有判断的锚点。 **② 选择起点** — 根据任务性质、平台特征、达成条件,选一个最可能直达的方式作为第一步去验证。一次成功当然最好;不成功则在③中调整。比如,需要操作页面、需要登录态、已知静态方式不可达的平台(小红书、微信公众号等)→ 直接 CDP **③ 过程校验** — 每一步的结果都是证据,不只是成功或失败的二元信号。用结果对照①的成功标准,更新你对目标的判断:路径在推进吗?结果的整体面貌(质量、相关度、量级)是否指向目标可达?发现方向错了立即调整,不在同一个方式上反复重试——搜索没命中不等于"还没找对方法",也可能是"目标不存在";API 报错、页面缺少预期元素、重试无改善,都是在告诉你该重新评估方向。遇到弹窗、登录墙等障碍,判断它是否真的挡住了目标:挡住了就处理,没挡住就绕过——内容可能已在页面 DOM 中,交互只是展示手段。 **④ 完成判断** — 对照定义的任务成功标准,确认任务完成后才停止,但也不要过度操作,不为了"完整"而浪费代价。 ## 联网工具选择 - **确保信息的真实性,一手信息优于二手信息**:搜索引擎和聚合平台是信息发现入口。当多次搜索尝试后没有质的改进时,升级到更根本的获取方式:定位一手来源(官网、官方平台、原始页面)。 | 场景 | 工具 | |------|------| | 搜索摘要或关键词结果,发现信息来源 | **WebSearch** | | URL 已知,需要从页面定向提取特定信息 | **WebFetch**(拉取网页内容,由小模型根据 prompt 提取,返回处理后结果) | | URL 已知,需要原始 HTML 源码(meta、JSON-LD 等结构化字段) | **curl** | | 非公开内容,或已知静态层无效的平台(小红书、微信公众号等公开内容也被反爬限制) | **浏览器 CDP**(直接,跳过静态层) | | 需要登录态、交互操作,或需要像人一样在浏览器内自由导航探索 | **浏览器 CDP** | 浏览器 CDP 不要求 URL 已知——可从任意入口出发,通过页面内搜索、点击、跳转等方式找到目标内容。WebSearch、WebFetch、curl 均不处理登录态。 **Jina**(可选预处理层,可与 WebFetch/curl 组合使用,由于其特性可节省 tokens 消耗,请积极在任务合适时组合使用):第三方网络服务,可将网页转为 Markdown,大幅节省 token 但可能有信息损耗。调用方式为 `r.jina.ai/example.com`(URL 前加前缀,不保留原网址 http 前缀),限 20 RPM。适合文章、博客、文档、PDF 等以正文为核心的页面;对数据面板、商品页等非文章结构页面可能提取到错误区块。 进入浏览器层后,`/eval` 就是你的眼睛和手: - **看**:用 `/eval` 查询 DOM,发现页面上的链接、按钮、表单、文本内容——相当于「看看这个页面有什么」 - **做**:用 `/click` 点击元素、`/scroll` 滚动加载、`/eval` 填表提交——像人一样在页面内自然导航 - **读**:用 `/eval` 提取文字内容,判断图片/视频是否承载核心信息——是则提取媒体 URL 定向读取或 `/screenshot` 视觉识别 浏览网页时,**先了解页面结构,再决定下一步动作**。不需要提前规划所有步骤。 ### 补充:本地 Chrome 资源 用户指向**本人访问过的页面**("我之前看的那个讲 X 的文章"、"上次打开过的 XX 面板")或**组织内部系统**("我们的 XX 平台"、"公司那个 YY 系统"等公网搜不到的目标)时,检索本地 Chrome 书签/历史: ```bash node "${CLAUDE_SKILL_DIR}/scripts/find-url.mjs" [关键词...] [--only bookmarks|history] [--limit N] [--since 1d|7h|YYYY-MM-DD] [--sort recent|visits] ``` 关键词空格分词、多词 AND,匹配 title + url(可省略);`--since` / `--sort` 仅作用于历史;默认按最近访问倒序,`--sort visits` 按访问次数排序(适合"高频访问的网站"这类场景)。 ### 程序化操作与 GUI 交互 浏览器内操作页面有两种方式: - **程序化方式**(构造 URL 直接导航、eval 操作 DOM):成功时速度快、精确,但对网站来说不是正常用户行为,可能触发反爬机制。 - **GUI 交互**(点击按钮、填写输入框、滚动浏览):GUI 是为人设计的,网站不会限制正常的 UI 操作,确定性最高,但步骤多、速度慢。 根据对目标平台的了解来灵活选择方式。GUI 交互也是程序化方式的有效探测——通过一次真实交互观察站点的实际行为(URL 模式、必需参数、页面跳转逻辑),为后续程序化操作提供依据;同时当程序化方式受阻时,GUI 交互是可靠的兜底。 **站点内交互产生的链接是可靠的**:通过用户视角中的可交互单元(卡片、条目、按钮)进行的站点内交互,自然到达的 URL 天然携带平台所需的完整上下文。而手动构造的 URL 可能缺失隐式必要参数,导致被拦截、返回错误页面、甚至触发反爬。 ## 浏览器 CDP 模式 通过 CDP Proxy 直连用户日常 Chrome,天然携带登录态,无需启动独立浏览器。 若无用户明确要求,不主动操作用户已有 tab,所有操作都在自己创建的后台 tab 中进行,保持对用户环境的最小侵入。不关闭用户 tab 的前提下,完成任务后关闭自己创建的 tab,保持环境整洁。 ### 启动 ```bash node "${CLAUDE_SKILL_DIR}/scripts/check-deps.mjs" ``` 脚本会依次检查 Node.js、Chrome 端口,并确保 Proxy 已连接(未运行则自动启动并等待)。Proxy 启动后持续运行。 ### Proxy API 所有操作通过 curl 调用 HTTP API: ```bash # 列出用户已打开的 tab curl -s http://localhost:3456/targets # 创建新后台 tab(自动等待加载) curl -s "http://localhost:3456/new?url=https://example.com" # 页面信息 curl -s "http://localhost:3456/info?target=ID" # 执行任意 JS:可读写 DOM、提取数据、操控元素、触发状态变更、提交表单、调用内部方法 curl -s -X POST "http://localhost:3456/eval?target=ID" -d 'document.title' # 捕获页面渲染状态(含视频当前帧) curl -s "http://localhost:3456/screenshot?target=ID&file=/tmp/shot.png" # 导航、后退 curl -s "http://localhost:3456/navigate?target=ID&url=URL" curl -s "http://localhost:3456/back?target=ID" # 点击(POST body 为 CSS 选择器)— JS el.click(),简单快速,覆盖大多数场景 curl -s -X POST "http://localhost:3456/click?target=ID" -d 'button.submit' # 真实鼠标点击 — CDP Input.dispatchMouseEvent,算用户手势,能触发文件对话框 curl -s -X POST "http://localhost:3456/clickAt?target=ID" -d 'button.upload' # 文件上传 — 直接设置 file input 的本地文件路径,绕过文件对话框 curl -s -X POST "http://localhost:3456/setFiles?target=ID" -d '{"selector":"input[type=file]","files":["/path/to/file.png"]}' # 滚动(触发懒加载) curl -s "http://localhost:3456/scroll?target=ID&y=3000" curl -s "http://localhost:3456/scroll?target=ID&direction=bottom" # 关闭 tab curl -s "http://localhost:3456/close?target=ID" ``` ### 页面内导航 两种方式打开页面内的链接: - **`/click`**:在当前 tab 内直接点击用户视角中的可交互单元,简单直接,串行处理。适合需要在同一页面内连续操作的场景,如点击展开、翻页、进入详情等。 - **`/new` + 完整 URL**:使用目标链接的完整地址(包含所有URL参数),在新 tab 中打开。适合需要同时访问多个页面的场景。 很多网站的链接包含会话相关的参数(如 token),这些参数是正常访问所必需的。提取 URL 时应保留完整地址,不要裁剪或省略参数。 ### 媒体资源提取 判断内容在图片里时,用 `/eval` 从 DOM 直接拿图片 URL,再定向读取——比全页截图精准得多。 ### 技术事实 - 页面中存在大量已加载但未展示的内容——轮播中非当前帧的图片、折叠区块的文字、懒加载占位元素等,它们存在于 DOM 中但对用户不可见。以数据结构(容器、属性、节点关系)为单位思考,可以直接触达这些内容。 - DOM 中存在选择器不可跨越的边界(Shadow DOM 的 `shadowRoot`、iframe 的 `contentDocument`等)。eval 递归遍历可一次穿透所有层级,返回带标签的结构化内容,适合快速了解未知页面的完整结构。 - `/scroll` 到底部会触发懒加载,使未进入视口的图片完成加载。提取图片 URL 前若未滚动,部分图片可能尚未加载。 - 拿到媒体资源 URL 后,公开资源可直接下载到本地后用读取;需要登录态才可获取的资源才需要在浏览器内 navigate + screenshot。 - 短时间内密集打开大量页面(如批量 `/new`)可能触发网站的反爬风控。 - 平台返回的"内容不存在""页面不见了"等提示不一定反映真实状态,也可能是访问方式的问题(如 URL 缺失必要参数、触发反爬)而非内容本身的问题。 ### 视频内容获取 用户 Chrome 真实渲染,截图可捕获当前视频帧。核心能力:通过 `/eval` 操控 `