skill刚开源就斩获 1.7K Star!web-access让AI真正“上网“

张开发
2026/4/21 1:29:01 15 分钟阅读

分享文章

skill刚开源就斩获 1.7K Star!web-access让AI真正“上网“
向AI转型的程序员都关注公众号 机器学习AI算法工程你是否也遇到过这些尴尬时刻让 Claude 去查某个技术文档,结果它只能搜到一些过时的博客文章;想让它帮你收集某个开源项目的最新动态,但 GitHub 上那些需要登录才能看到的内容,它完全无法访问;最离谱的是,有时候它还会用 WebSearch 去搜索小红书、微博这些平台的站内内容——就像用百度去搜朋友圈,除了瞎忙活,什么也搜不到。这些问题的根源不在 Claude 本身,而在于它缺了一样东西:真正意义上的联网能力。最近开源的web-accessSkill,就是要彻底解决这个痛点。让我用实战案例告诉你,它到底能做什么。从单工具到工具链:智能调度的底层逻辑web-access 的核心不是给 Claude 装个浏览器这么简单。它的真正威力在于,把联网从单一工具选择升级为智能工具链调度。五层工具的精准分工不同于传统方案中要么全靠搜索,要么全靠浏览器的粗暴做法,web-access 设计了一套五层工具链:快速信息层: WebSearch → 搜索引擎入口 Jina → 高效内容提取(比 WebFetch 节省 75-99% token) 深入访问层: WebFetch → 获取静态网页 curl → HTTP 请求、API 调用 浏览器操作层: CDP Proxy → 完整的浏览器自动化这个分层设计的精妙之处在于,web-access 会根据任务特点自动选择最优工具组合:场景一:查询某个 API 文档WebSearch 找到官方文档链接WebFetch 或 Jina 直接获取内容整个过程几秒钟完成,无需启动浏览器场景二:获取需要登录的 GitHub 私有仓库信息自动切换到 CDP 模式复用你 Chrome 中已登录的 GitHub session访问私有仓库,提取你需要的 commit 历史、Issue 列表场景三:调研小红书上某个话题的讨论热度识别出这是需要站内搜索的平台直接启动 CDP 浏览器在小红书内执行搜索、翻页、提取内容自动识别哪些是热门推荐,哪些是最新发布关键差异:传统方案中,模型往往被关键词搜索锚定,导致它在需要浏览器操作时还在用搜索引擎。web-access 通过 Skill Prompt 设计,让模型理解任务本质而非执行步骤。CDP Proxy:为什么选择 Chrome 原生协议?在 web-access 之前,我也试过其他浏览器自动化方案,比如 Puppeteer、Playwright。但它们都有一个共同问题:启动速度慢,资源占用大。web-access 最终选择了 Chrome DevTools Protocol(CDP),这个决定让它实现了三个关键突破:1. 共享你的登录态,而不是另起炉灶CDP 直连你日常使用的 Chrome 浏览器,这意味着:你在 GitHub 上登录的账号,web-access 能直接使用你在小红书、微博上保存的 Cookie,全都能复用不需要为 AI 单独配置一套虚拟身份对比一下传统方案:表格方案登录态处理配置复杂度Puppeteer/Playwright需要手动导出 Cookie 文件高Browser MCP需要单独维护 Profile中高web-access (CDP)直接复用 Chrome 已登录状态低2. 单浏览器多 Tab,真正的并行不干扰web-access 的并行机制有一个容易被忽略但至关重要的设计:所有子 Agent 共享同一个 Chrome 实例,但各自操作独立的 Tab。这意味着:同时调研 10 个网站,只启动一个 Chrome 进程每个子 Agent 有独立的 Target ID,互不干扰不会出现抢浏览器控制权的情况——浏览器照样你可以用,AI 在后台 tab 里忙它的实测中,我用 10 个子 Agent 同时调研小红书、微博、B站、GitHub、知乎等 10 个平台,一次性打开 100 个网页,CPU 占用始终在可控范围内,而每个子 Agent 的执行速度几乎和单独跑一个任务一样快。3. 视频截帧、DOM 深度操作CDP 让 web-access 能够做一些其他方案做不到的事情:视频内容分析:# 获取视频时长 curl-shttp://localhost:3456/eval?targetID\ -ddocument.querySelector(video).duration # 跳转到第 60 秒并截图 curl-s-X POST http://localhost:3456/eval?targetID\ -dvar vdocument.querySelector(video); v.currentTime60; v.play() # 等待 2 秒让视频渲染 sleep2 # 截取当前帧 curl-shttp://localhost:3456/screenshot?targetIDfile/tmp/frame.pngDOM 深度遍历:很多网站的元素藏在 Shadow DOM 或 iframe 里,普通的选择器根本点不到。web-access 的/eval命令可以直接执行 JavaScript,递归遍历所有层级,找到你需要的元素。实战案例:多平台内容调研让我用一个真实案例,展示 web-access 的多任务并行能力。任务需求调研AIGC 工具这个话题在以下平台的热度和讨论点:小红书 (用户分享)知乎 (专业问答)GitHub (开源项目)B站 (视频教程)Hacker News (国际技术圈)每个平台提取 10 条最热门的内容,最后汇总成一份综合报告。传统方案的耗时如果你手动做这个调研:每个平台平均需要 15-20 分钟(搜索、筛选、阅读、整理)5 个平台串行处理,总耗时 1.5-2 小时整理汇总还需要额外 30 分钟总计:约 2 小时web-access 方案的执行对 Claude 说一句话:帮我用 web-access 开 5 个子 Agent,分别去: 1. 小红书 → 搜索AIGC工具,找 10 个讨论度高的笔记 2. 知乎 → 搜索AIGC,找 10 个高赞回答 3. GitHub → 搜索AIGC,找 10 个最近活跃的开源项目 4. B站 → 搜索AIGC,找 10 个播放量高的视频 5. Hacker News → 找首页前 10 条与 AIGC 相关的帖子 最后汇总成一份报告,分析每个平台的关注重点执行过程:Claude 自动识别这是多平台并行任务创建 5 个子 Agent,每个分配一个独立端口所有子 Agent 共享同一个 CDP Proxy,但各自打开独立的 Chrome Tab并行执行,每个 Agent 只需要处理自己的平台主 Agent 接收汇总后的结果,不浪费 token 在中间内容上实际耗时:约 5-7 分钟效率提升:20 倍以上输出质量对比表格维度手动调研web-access信息覆盖容易遗漏系统性覆盖数据提取部分靠记忆精准提取时效性可能看到过时内容实时获取最新整理成本高自动汇总站点经验积累:越用越聪明的秘密武器web-access 最让我惊喜的设计,是它的经验沉淀机制。它是如何工作的?每次 web-access 完成一个平台的访问后,会自动保存以下信息:按域名存储: - URL 模式(哪些 URL 可以直接构造,哪些必须模拟点击) - 平台特征(小红书需要登录才能看到完整内容,GitHub 私有仓库需要认证) - 已知陷阱(某些页面会跳转到登录页,某些按钮有延迟加载) - 成功的操作路径(如何最快地找到目标内容)下次再访问同一个域名时,web-access 会直接复用这些经验,跳过试错环节。实际效果对比第一次访问小红书:尝试用 WebSearch 搜小红书站内内容 → 失败切换到 CDP 模式发现需要登录 → 暂停,提示用户登录登录后重新访问,搜索目标内容试了几次才找到正确的翻页方式总耗时:约 3 分钟第二次访问小红书:直接加载 CDP 模式(知道小红书需要登录)使用已知的搜索 URL 模式(无需手动搜索框)直接使用正确的翻页逻辑总耗时:约 45 秒效率提升:4 倍这是一个持续优化的过程。你用得越多,它积累的经验越丰富,执行速度越快。安装配置:5 分钟上手指南前置要求Node.js 22(CDP Proxy 需要)Chrome 或 Edge 浏览器Git Bash(Windows 用户需要)安装步骤1. 启用 Chrome 远程调试在 Chrome 地址栏输入:chrome://inspect/#remote-debugging勾选Allow remote debugging for this browser instance,可能需要重启浏览器。2. 让 Claude 自动安装直接对 Claude 说:帮我安装这个 skill:https://github.com/eze-is/web-accessClaude 会自动完成以下操作:下载 skill 文件到~/.claude/skills/web-access检测并安装依赖配置环境3. 验证安装运行检查脚本:bash ~/.claude/skills/web-access/scripts/check-deps.sh如果一切正常,会看到CDP mode ready的提示。4. 启动 CDP Proxynode ~/.claude/skills/web-access/scripts/cdp-proxy.mjs 这个命令会在后台启动 CDP Proxy 服务,默认监听http://localhost:3456。常用命令速查web-access 的所有操作都通过 curl 调用 HTTP API,这里列出最常用的几个:页面操作# 创建新 tab 并打开指定 URL curl-shttp://localhost:3456/new?urlhttps://example.com # 获取页面信息 curl-shttp://localhost:3456/info?targetID # 在页面中执行 JavaScript curl-s-X POST http://localhost:3456/eval?targetID\ -ddocument.title # 截取当前页面 curl-shttp://localhost:3456/screenshot?targetIDfile/tmp/shot.png # 导航到新 URL curl-shttp://localhost:3456/navigate?targetIDurlhttps://new-url.com # 后退 curl-shttp://localhost:3456/back?targetID # 关闭 tab curl-shttp://localhost:3456/close?targetID交互操作# JS 点击(适合大部分常规按钮) curl-s-X POST http://localhost:3456/click?targetID\ -dbutton.submit # 真实鼠标点击(适合对点击方式有严格校验的网站) curl-s-X POST http://localhost:3456/clickAt?targetID\ -d.upload-btn # 文件上传(直接设置文件路径,绕过文件对话框) curl-s-X POST http://localhost:3456/setFiles?targetID\ -d{selector:input[typefile],files:[/path/to/file.png]} # 滚动页面(触发懒加载) curl-shttp://localhost:3456/scroll?targetIDy3000 # 滚动到底部 curl-shttp://localhost:3456/scroll?targetIDdirectionbottom管理操作# 列出所有打开的 tab curl-shttp://localhost:3456/targets实战话术模板为了让 web-access 发挥最大威力,这里整理了一些常用的 Prompt 模板:单平台调研帮我去小红书搜索[关键词],提取前 20 条热门笔记, 分析它们的共同特点、用户关注点、热门标签, 最后给出一份总结报告多平台并行调研帮我用 web-access 开 N 个子 Agent,分别调研: 1. 小红书 → 搜索[关键词],找 X 条内容 2. 知乎 → 搜索[关键词],找 X 条内容 3. GitHub → 搜索[关键词],找 X 个项目 ... 最后汇总成对比分析报告,说明各平台的差异和关注重点内容采集帮我去[网站],找到[目标内容],提取其: - 标题 - 正文 - 发布时间 - 作者信息 - 图片 URL 整理成结构化数据返回给我网站自动化测试帮我测试[网站]的用户注册流程: 1. 打开注册页面 2. 填写测试数据 3. 提交表单 4. 检查是否跳转到成功页面 5. 如果有错误,截图并记录 每一步都要截图保存常见问题解决Q1: 为什么 CDP 模式启动失败?可能原因:Chrome 没有启用远程调试端口 3456 被占用Node.js 版本低于 22解决方法:# 检查 Chrome 远程调试是否启用 chrome://inspect/#remote-debugging # 检查端口占用 lsof-i :3456 # macOS/Linux netstat-ano| findstr :3456 # Windows # 检查 Node.js 版本 node-vQ2: 为什么某些网站还是打不开?可能原因:网站有严格的人机验证网站检测到自动化工具需要特定的 Cookie 或 Token解决方法:在你自己的 Chrome 中先手动登录一次等待 web-access 暂停并提示你手动操作检查网站是否有反爬策略Q3: 如何提高任务执行速度?优化建议:合理使用子 Agent 分治(适合多平台、多目标任务)优先使用 Jina 提取内容(比 WebFetch 节省 token)避免不必要的截图(只在需要视觉验证时截图)充分利用站点经验积累(常用网站会越来越快)性能对比:web-access vs 其他方案基于我的实测,这里给一个客观的对比:表格维度web-accessBrowser-usePlaywright MCPChrome DevTools MCPToken 消耗低极低较高中等登录态处理共享 Chrome支持 Profile需手动处理共享 Chrome并行能力高中低中资源占用低中高中上手难度低中高中适用场景通用联网纯浏览器操作自动化测试调试开发我的建议:日常信息调研: web-access(全能型)纯浏览器自动化: Browser-use(省 token)开发调试: Chrome DevTools MCP(调试能力强)自动化测试: Playwright MCP(稳定性高)设计哲学:为什么 web-access 如此不同?web-access 的作者一泽 Eze 在项目文档中提到了一个核心理念:Skill 哲学 技术事实,不是操作手册这个理念的核心是:不要替 AI 推理,而是讲清楚 tradeoff 让 AI 自己选择。传统方案往往给 AI 一本操作手册:第一步:打开浏览器第二步:输入网址第三步:点击搜索按钮...web-access 给 AI 的是一套工具和原则:工具:WebSearch、Jina、CDP Proxy、各自的能力和限制原则:什么场景用什么工具,如何组合工具这种差异看似微小,但影响巨大:表格方案AI 的角色能力上限操作手册式执行者受限于预定义步骤工具原则式决策者几乎无上限这就是为什么 web-access 能够处理那么多没见过的场景——它不是为特定场景设计的,而是为所有联网和浏览器操作场景设计的。GitHub 地址:https://github.com/eze-is/web-access免费体验大模型https://cloud.siliconflow.cn/i/OmyFKL4n机器学习算法AI大数据技术搜索公众号添加datanlp长按图片识别二维码阅读过本文的人还看了以下文章最顶尖的OCR算法有哪些最强一键抠图19Kstar 的 Rembg 开源神器实时语义分割ENet算法提取书本/票据边缘整理开源的中文大语言模型以规模较小、可私有化部署、训练成本较低的模型为主《大语言模型》PDF下载动手学深度学习-李沐PyTorch版本YOLOv9电动车头盔佩戴检测详细讲解模型训练TensorFlow 2.0深度学习案例实战基于40万表格数据集TableBank用MaskRCNN做表格检测《基于深度学习的自然语言处理》中/英PDFDeep Learning 中文版初版-周志华团队【全套视频课】最全的目标检测算法系列讲解通俗易懂《美团机器学习实践》_美团算法团队.pdf《深度学习入门基于Python的理论与实现》高清中文PDF源码《深度学习基于Keras的Python实践》PDF和代码特征提取与图像处理(第二版).pdfpython就业班学习视频从入门到实战项目2019最新《PyTorch自然语言处理》英、中文版PDF源码《21个项目玩转深度学习基于TensorFlow的实践详解》完整版PDF附书代码《深度学习之pytorch》pdf附书源码PyTorch深度学习快速实战入门《pytorch-handbook》【下载】豆瓣评分8.1,《机器学习实战:基于Scikit-Learn和TensorFlow》《Python数据分析与挖掘实战》PDF完整源码汽车行业完整知识图谱项目实战视频(全23课)李沐大神开源《动手学深度学习》加州伯克利深度学习2019春教材笔记、代码清晰易懂李航《统计学习方法》最新资源全套《神经网络与深度学习》最新2018版中英PDF源码将机器学习模型部署为REST APIFashionAI服装属性标签图像识别Top1-5方案分享重要开源CNN-RNN-CTC 实现手写汉字识别yolo3 检测出图像中的不规则汉字同样是机器学习算法工程师你的面试为什么过不了前海征信大数据算法风险概率预测【Keras】完整实现‘交通标志’分类、‘票据’分类两个项目让你掌握深度学习图像分类VGG16迁移学习实现医学图像识别分类工程项目特征工程(一)特征工程(二) :文本数据的展开、过滤和分块特征工程(三):特征缩放,从词袋到 TF-IDF特征工程(四): 类别特征特征工程(五): PCA 降维特征工程(六): 非线性特征提取和模型堆叠特征工程(七)图像特征提取和深度学习如何利用全新的决策树集成级联结构gcForest做特征工程并打分Machine Learning Yearning 中文翻译稿不断更新资源深度学习、机器学习、数据分析、python搜索公众号添加datayx

更多文章