首页/新闻资讯/正文详情

BrowserSkill截图指南:视口、元素、整页3种模式与参数速查表

发布时间:2026/9/21 1:39:40 来源:云帆数科 栏目:资讯中心
BrowserSkill截图指南:视口、元素、整页3种模式与参数速查表
BrowserSkill截图指南视口、元素、整页3种模式与参数速查表【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkillBrowserSkill是一个让 AI 智能体直接操控你已登录真实浏览器的浏览器自动化工具由命令行 CLIbsk 浏览器扩展组成。其中的BrowserSkill 截图能力bsk screenshot命令支持视口、元素、整页 3 种模式一条命令即可导出 PNG。本文给出这 3 种模式的完整用法与参数速查表帮助你 5 分钟上手。一、开始之前确认浏览器已连接使用截图功能前需要安装 CLI 并让浏览器扩展连上本地 daemon。连接成功后扩展 popup 会显示已连接 / READY状态如官方商店页面所示快速检查三步bsk doctor # 诊断环境按提示修复 bsk status # 查看 daemon 状态 bsk session list # 查看可用会话截图命令需要 --session 所有截图命令都需要一个处于活跃状态的 session ID这是最常用的参数。二、3 种截图模式快速上手模式命令要点适用场景️ 视口截图不带额外参数截取当前可见区域最简单、速度最快 元素截图--ref eN裁剪截取指定 DOM 元素或 Canvas 区域 整页截图--full-page自动从顶部滚动到底部拼接完整长图三种模式的典型命令bsk screenshot --session id --out viewport.png bsk screenshot --session id --ref e3 --out element.png --json bsk screenshot --session id --full-page --out page.png视口模式省略--out时文件自动保存到临时目录$TMPDIR/bsk-screenshot-时间戳.png。元素模式--ref的值如e3来自最近一次bsk observe或bsk snapshot分配的引用号--json会额外输出图片宽、高、字节数。整页模式命令会滚动页面并自动恢复原来的滚动位置和样式不会打乱你正在看的页面。三、参数速查表以下对照 screenshot.rs 中的 CLI 定义整理参数模式默认值说明--session全部必填会话 ID必须处于活跃状态--tab-id全部Agent Window 当前活动标签页指定目标标签页不改变当前选中状态--ref元素无eN引用裁剪到对应 DOM 元素或 Canvas 区域--full-page整页关闭滚动整页并拼接长图与--ref互斥--scope整页followfollow跟随追加内容current只截初始文档高度--timeout整页2m抓取与编码超时支持30s、5m等写法--out全部临时目录输出 PNG 路径已存在则覆盖全局参数同样适用--json输出机器可读 JSON、--quiet、-v详细日志。--scope怎么选follow默认页面持续追加内容如信息流、聊天窗口时会一直滚动到没有新内容为止。current在初始文档高度处停下。即使底部还显示加载指示器也只截已加载部分——此时应如实说明只截取了当前已加载范围而不是宣称截全了整个列表。四、整页截图的注意事项整页模式功能强大但有几条限制值得提前知道详见 SKILL.md 的 Screenshots 章节需要活动标签页整页截图要求目标标签页处于活动状态普通视口截图则支持后台标签页配合--tab-id。不支持的页面类型浏览器内部页面、应用商店页面、嵌套滚动面板、虚拟滚动列表。失败不产生残缺文件捕获采用分块传输 原子写入write_full_page 实现中断后不会留下半截 PNG。loading_stalled报错表示页面底部 30 秒没有新增高度但一直显示加载中此时加大--timeout也没用。保持标签页可见page_hidden属于环境中断user_cancelled表示用户手动停止了捕获。五、进阶用截图里的坐标点击 Canvas 图形普通视口截图只出图而元素截图--ref指向 Canvas还会返回一个一次性capture_id。AI 智能体可以基于截图中的原始 PNG 坐标回点图形上的任意位置bsk click e3 --capture capture-id --image-x 42 --image-y 18 \ --session id注意capture 仅限一次使用、2 分钟内有效重新observe/snapshot或对同一元素再次截图都会使其失效。协议细节见 tool_screenshot_result.json。六、常见问题排查现象处理方式--full-page和--ref同时传了两者互斥二选一--timeout/--scope单独使用报错这两个参数只在整页模式生效需搭配--full-pageextension did not acknowledge --scope current扩展版本过旧需同步更新 CLI 与扩展图片拿到了但不能做 Canvas 点选capture_unavailable表示图片仅可查看需重新 observe 截图后再点击总结BrowserSkill 截图功能覆盖了三档常见需求视口最快、元素最精准、整页最完整。记住核心速查——--session必填、--ref配元素、--full-page配--scope/--timeout、--out控制输出路径基本就能覆盖日常所有场景。配合bsk observe/bsk snapshot获取的eN引用号还能进一步实现看图点图的 Canvas 交互是 AI 浏览器自动化工作流里视觉取证的基础能力。【免费下载链接】BrowserSkillLet AI agents use your real, logged-in browser without interrupting your work. CLI extension for browser automation across any shell-capable AI agent.项目地址: https://gitcode.com/GitHub_Trending/br/BrowserSkill创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

相关推荐

quick_actions_ios 插件演进与 Swift 迁移:Flutter 快捷操作 iOS 端实现深度解析
quick_actions_ios 插件演进与 Swift 迁移:Flutter 快捷操作 iOS 端实现深度解析

移动开发跨平台 【免费下载链接】plugins Plugins for Flutter maintained by the Flutter team 项目地址: https://gitcode.com/gh_mirrors/pl/plugins 点击查看 免费下载 本文基于仓库中 quick_actions_ios 的 CHANGELOG,系统梳理 Flutter 官方 quick… · 2026/9/21 1:39:40

@react-native-vector-icons/lucide:Lucide 图标字体在 React Native 中的集成方案与版本演进指南
@react-native-vector-icons/lucide:Lucide 图标字体在 React Native 中的集成方案与版本演进指南

react-native-vector-icons/lucide:Lucide 图标字体在 React Native 中的集成方案与版本演进指南 【免费下载链接】react-native-vector-icons Customizable Icons for React Native with support for image source and full styling. 项目地址: https://gitcode.… · 2026/9/21 1:38:40

Snowpack 中实现 React 组件按需加载(React.lazy + Suspense):零配置动态 import 实战指南
Snowpack 中实现 React 组件按需加载(React.lazy + Suspense):零配置动态 import 实战指南

Snowpack 中实现 React 组件按需加载(React.lazy Suspense):零配置动态 import 实战指南 【免费下载链接】snowpack ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️ 项目地址: https://gitcode.com… · 2026/9/21 1:38:40

16页月度薪酬分析报告:从数据到决策的完整方法论
16页月度薪酬分析报告:从数据到决策的完整方法论

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/21 2:27:48

ArchiMate企业架构建模实战:从业务层到技术层
ArchiMate企业架构建模实战:从业务层到技术层

简介:面向企业架构师、信息化规划人员及TOGAF学习者,这是一份ArchiMate语言专业课件,适用于企业架构评审、系统规划与架构建模入门培训等场景。课件共26页,系统讲解企业架构建模的核心知识体系,涵盖架构层次划分、架构… · 2026/9/21 2:27:48

TanStack Table React 中 SubscribePropsWithSource 类型解析:细粒度订阅 Atom 与 Store 的强类型方案
TanStack Table React 中 SubscribePropsWithSource 类型解析:细粒度订阅 Atom 与 Store 的强类型方案

TanStack Table React 中 SubscribePropsWithSource 类型解析:细粒度订阅 Atom 与 Store 的强类型方案 【免费下载链接】table 🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-… · 2026/9/21 2:27:48

Shopee af-ac-enc-dat 参数剖析:从动态签名到合规采集的避坑指南
Shopee af-ac-enc-dat 参数剖析:从动态签名到合规采集的避坑指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/21 2:27:48

CodeIgniter 3.0.3 升级至 3.0.4 完整指南:文件替换流程、核心变更与源码解读
CodeIgniter 3.0.3 升级至 3.0.4 完整指南:文件替换流程、核心变更与源码解读

CodeIgniter 3.0.3 升级至 3.0.4 完整指南:文件替换流程、核心变更与源码解读 【免费下载链接】CodeIgniter Open Source PHP Framework (originally from EllisLab) 项目地址: https://gitcode.com/gh_mirrors/co/CodeIgniter 本指南对应 CodeIgniter 官方升… · 2026/9/21 2:27:48

Android Studio记单词App实战:Room+RecyclerView+Material3
Android Studio记单词App实战:Room+RecyclerView+Material3

简介:本资源是一份面向计算机及相关专业本科生的安卓开发实战项目,专为课程设计与期末大作业打造,适用于正在完成Android移动应用开发实践任务的学习者。项目基于Android Studio开发,实现功能完整的记单词App,含单词记… · 2026/9/21 2:26:48

Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化
Flutter for OpenHarmony游戏卡片渐变背景实战:从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事:用Flutter给OpenHarmony做一款游戏集合类的App,说白了就是把若干小游戏塞进一个壳里,用统一入口分发。这个方向本身不算新鲜,真正让我花了不少心思的,是首页那堆游戏卡… · 2026/9/21 0:02:39

Word表格编号全攻略:从列表编号到题注交叉引用
Word表格编号全攻略:从列表编号到题注交叉引用

写Word文档,最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事:今天在表后面多加了两个空白行,明天给客户交稿前发现整个章节的编号全部错位,光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技… · 2026/9/21 0:02:39

从第一个站到第二个站:独立开发者的静态网站选型与落地实践
从第一个站到第二个站:独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年,说实话,第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年,流量惨淡、功能臃肿、代码自己都懒得看第二遍之后,我才慢慢琢磨明白一个道理:第一个网站是练手&… · 2026/9/20 0:00:41

Claude Code 按智谱AI指南装完,ANTHROPIC_BASE_URL 改走 TaoToken 兼容通道行不行
Claude Code 按智谱AI指南装完,ANTHROPIC_BASE_URL 改走 TaoToken 兼容通道行不行

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/21 0:00:18

agents-generator 决策矩阵全解析:从项目检测到 AGENTS.md 规则生成的 16 步判定流程
agents-generator 决策矩阵全解析:从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析:从项目检测到 AGENTS.md 规则生成的 16 步判定流程 【免费下载链接】agentic-awesome-skills AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and … · 2026/9/21 0:00:18

gin-vue-admin 前端工具函数全景指南:src/utils 复用规范与源码级解析
gin-vue-admin 前端工具函数全景指南:src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南:src/utils 复用规范与源码级解析 【免费下载链接】gin-vue-admin 🚀ViteVue3Gin拥有AI辅助的基础开发平台,企业级业务AI开发解决方案,内置mcp辅助服务,内置skills管理,… · 2026/9/21 0:00:18

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码