尧图网页设计 
可视化点击选元素pi-skills的browser-pick.js交互式选择器实现原理剖析【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skillspi-skills 是一款为 pi coding agent兼容 Claude Code、Codex CLI 等打造的技能集合仓库其中的 browser-pick.js 提供了可视化点击选元素能力一个交互式选择器让你在真实浏览器里用鼠标点选页面元素把结构化的元素信息直接交给 AI。当 AI 分不清你说的那个按钮到底是哪一个时这个工具就是最佳答案。 它解决什么问题用 AI 操作网页时最常见的卡点是元素定位页面 DOM 复杂、选择器含糊AI 只能靠猜。传统的做法是 AI 反复执行 JavaScript 探查页面效率低、易出错。browser-pick.js 换了一个思路把选择权交还给用户。它在你肉眼可见的浏览器页面上叠加一层高亮框和提示横幅你点哪里AI 就拿哪里的信息。一次点击胜过十次猜测。⚙️ 快速上手三步跑通元素选择前置要求已安装 Chrome 和 Node.js并在技能目录执行过依赖安装依赖声明见 package.json。步骤操作说明1️⃣ 启动浏览器运行 browser-start.js以远程调试模式启动 Chrome监听localhost:92222️⃣ 打开目标页面运行 browser-nav.js 网址导航到你要选元素的页面3️⃣ 发起选择运行browser-pick.js Click the submit button页面出现蓝色高亮框鼠标点选即可⚠️ 小提醒browser-pick.js 连接浏览器有5 秒超时如果提示Could not connect to browser先执行第 1 步即可对应 browser-pick.js。 实现原理拆解无代码也能看懂整个脚本只有不到 160 行却五脏俱全。它的工作可以分为四个阶段阶段一通过 CDP 连接正在运行的 Chrome脚本基于 Chrome DevTools ProtocolCDP使用 puppeteer-core 连接localhost:9222端口上已启动的浏览器并自动锁定最后一个标签页作为操作对象browser-pick.js。这意味着它是接管你正在看的页面而不是另开一个无头窗口——这正是可视化的关键。阶段二向页面注入一个悬浮工具层脚本通过 browser-pick.js 向当前页面注入一个pick()函数它会在页面上创建两个关键 DOM 元素全屏透明遮罩层overlayz-index设为最大整数 2147483647但pointer-events:none——看得见却不挡手所有鼠标事件仍能穿透到下面的真实元素底部提示横幅banner深色圆角提示条实时显示你传入的提示语、已选数量和快捷键说明Enter 完成 / ESC 取消 / Cmd/Ctrl点击追加选择。同时还有一个highlight 高亮框鼠标划过时如影随形用蓝色边框实时标出你悬停的元素。阶段三用两个 API 精准捕获元素这是整个选择器的灵魂只有两步document.elementFromPoint(x, y)鼠标移动/点击的坐标反查出坐标下最顶层的真实 DOM 元素el.getBoundingClientRect()拿到该元素相对视口的精确位置和尺寸据此把蓝色高亮框贴上去。注意脚本在捕获时会主动排除 overlay 和 banner 自身确保你永远选不到工具层只会选到页面元素。阶段四三种交互覆盖所有选择场景操作行为普通单击立即结束选择返回该元素信息Cmd/Ctrl 单击追加选中绿色 3px 描边标记支持多选Enter批量提交所有已选元素ESC取消选择清理现场无论哪种方式结束脚本都会执行 清理逻辑移除遮罩层和横幅、还原被描边的元素样式页面恢复原样。 AI 最终拿到什么选择完成后脚本对每个元素调用 buildElementInfo输出一份面向 AI 的结构化档案字段内容对 AI 的价值tag标签名如button知道元素类型id/classID 与类名直接构造 CSS 选择器text元素文本截断至 200 字符理解元素语义html外层 HTML截断至 500 字符复现精确结构parents从元素到 body 的完整父级路径消除同名元素歧义这些信息经标准输出回传给 Agent结果格式化逻辑AI 无需再反复探查页面一步到位。 它在 pi-skills 生态中的位置browser-tools/SKILL.md 明确规定了 Agent 何时应调用它用户说我想点那个按钮 → 让用户用选择器指出来用户说提取这几条数据 → 让用户圈出目标元素页面结构复杂、选择器有歧义 → 视觉选择最可靠。它与同目录的 browser-eval.js执行任意 JS、browser-screenshot.js截图、browser-cookies.js查看 Cookie等工具组合构成一套完整的人机协作式浏览器自动化工具箱。❓ 常见问题Q为什么提示无法连接浏览器A先运行 browser-start.js 启动带调试端口的 Chrome。Q为什么我选不到某些元素A检查该元素是否被pointer-events:none或更高层级的遮罩覆盖elementFromPoint只能命中视觉最顶层的元素。Q多选是怎么去重的A脚本内部用 Set 记录已选元素重复点击同一元素不会重复计入点击处理逻辑。 相关文件导航文件作用browser-pick.js交互式元素选择器本文主角browser-start.js启动远程调试模式的 Chromebrowser-nav.js页面导航browser-eval.js页面内执行 JavaScriptSKILL.md技能说明书Agent 何时、如何使用各工具README.mdpi-skills 全部技能一览【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 可视化点击选元素：pi-skills的browser-pick.js交互式选择器实现原理剖析
可视化点击选元素pi-skills的browser-pick.js交互式选择器实现原理剖析【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skillspi-skills 是一款为 pi coding agent兼容 Claude Code、Codex CLI 等打造的技能集合仓库其中的 browser-pick.js 提供了可视化点击选元素能力一个交互式选择器让你在真实浏览器里用鼠标点选页面元素把结构化的元素信息直接交给 AI。当 AI 分不清你说的那个按钮到底是哪一个时这个工具就是最佳答案。 它解决什么问题用 AI 操作网页时最常见的卡点是元素定位页面 DOM 复杂、选择器含糊AI 只能靠猜。传统的做法是 AI 反复执行 JavaScript 探查页面效率低、易出错。browser-pick.js 换了一个思路把选择权交还给用户。它在你肉眼可见的浏览器页面上叠加一层高亮框和提示横幅你点哪里AI 就拿哪里的信息。一次点击胜过十次猜测。⚙️ 快速上手三步跑通元素选择前置要求已安装 Chrome 和 Node.js并在技能目录执行过依赖安装依赖声明见 package.json。步骤操作说明1️⃣ 启动浏览器运行 browser-start.js以远程调试模式启动 Chrome监听localhost:92222️⃣ 打开目标页面运行 browser-nav.js 网址导航到你要选元素的页面3️⃣ 发起选择运行browser-pick.js Click the submit button页面出现蓝色高亮框鼠标点选即可⚠️ 小提醒browser-pick.js 连接浏览器有5 秒超时如果提示Could not connect to browser先执行第 1 步即可对应 browser-pick.js。 实现原理拆解无代码也能看懂整个脚本只有不到 160 行却五脏俱全。它的工作可以分为四个阶段阶段一通过 CDP 连接正在运行的 Chrome脚本基于 Chrome DevTools ProtocolCDP使用 puppeteer-core 连接localhost:9222端口上已启动的浏览器并自动锁定最后一个标签页作为操作对象browser-pick.js。这意味着它是接管你正在看的页面而不是另开一个无头窗口——这正是可视化的关键。阶段二向页面注入一个悬浮工具层脚本通过 browser-pick.js 向当前页面注入一个pick()函数它会在页面上创建两个关键 DOM 元素全屏透明遮罩层overlayz-index设为最大整数 2147483647但pointer-events:none——看得见却不挡手所有鼠标事件仍能穿透到下面的真实元素底部提示横幅banner深色圆角提示条实时显示你传入的提示语、已选数量和快捷键说明Enter 完成 / ESC 取消 / Cmd/Ctrl点击追加选择。同时还有一个highlight 高亮框鼠标划过时如影随形用蓝色边框实时标出你悬停的元素。阶段三用两个 API 精准捕获元素这是整个选择器的灵魂只有两步document.elementFromPoint(x, y)鼠标移动/点击的坐标反查出坐标下最顶层的真实 DOM 元素el.getBoundingClientRect()拿到该元素相对视口的精确位置和尺寸据此把蓝色高亮框贴上去。注意脚本在捕获时会主动排除 overlay 和 banner 自身确保你永远选不到工具层只会选到页面元素。阶段四三种交互覆盖所有选择场景操作行为普通单击立即结束选择返回该元素信息Cmd/Ctrl 单击追加选中绿色 3px 描边标记支持多选Enter批量提交所有已选元素ESC取消选择清理现场无论哪种方式结束脚本都会执行 清理逻辑移除遮罩层和横幅、还原被描边的元素样式页面恢复原样。 AI 最终拿到什么选择完成后脚本对每个元素调用 buildElementInfo输出一份面向 AI 的结构化档案字段内容对 AI 的价值tag标签名如button知道元素类型id/classID 与类名直接构造 CSS 选择器text元素文本截断至 200 字符理解元素语义html外层 HTML截断至 500 字符复现精确结构parents从元素到 body 的完整父级路径消除同名元素歧义这些信息经标准输出回传给 Agent结果格式化逻辑AI 无需再反复探查页面一步到位。 它在 pi-skills 生态中的位置browser-tools/SKILL.md 明确规定了 Agent 何时应调用它用户说我想点那个按钮 → 让用户用选择器指出来用户说提取这几条数据 → 让用户圈出目标元素页面结构复杂、选择器有歧义 → 视觉选择最可靠。它与同目录的 browser-eval.js执行任意 JS、browser-screenshot.js截图、browser-cookies.js查看 Cookie等工具组合构成一套完整的人机协作式浏览器自动化工具箱。❓ 常见问题Q为什么提示无法连接浏览器A先运行 browser-start.js 启动带调试端口的 Chrome。Q为什么我选不到某些元素A检查该元素是否被pointer-events:none或更高层级的遮罩覆盖elementFromPoint只能命中视觉最顶层的元素。Q多选是怎么去重的A脚本内部用 Set 记录已选元素重复点击同一元素不会重复计入点击处理逻辑。 相关文件导航文件作用browser-pick.js交互式元素选择器本文主角browser-start.js启动远程调试模式的 Chromebrowser-nav.js页面导航browser-eval.js页面内执行 JavaScriptSKILL.md技能说明书Agent 何时、如何使用各工具README.mdpi-skills 全部技能一览【免费下载链接】pi-skillsSkills for pi coding agent (compatible with Claude Code and Codex CLI)项目地址: https://gitcode.com/gh_mirrors/pi/pi-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考