mcpField

browser

github.com/iamzhihuix开发394 次安装
代码仓库

关于 browser

browser 是用于协作探索和抓取网站的轻量浏览器技能，通过 Chrome 远程调试接口工作。其脚本支持页面导航、执行 JavaScript、截图和交互式选择元素。

主要功能

  1. 01使用全新或复制的配置启动 Chrome
  2. 02导航当前标签页或新标签页
  3. 03在活动页面执行 JavaScript
  4. 04截取视口截图
  5. 05交互式选择页面元素

适用场景

  1. 01检查网站 DOM 和页面数据
  2. 02保留登录状态探索网站
  3. 03截取页面或选择元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/iamzhihuix/happy-claude-skills --skill browser

安装后在 Claude Code 中输入/browser确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

package.json
scripts/
eval.js
nav.js
pick.js
screenshot.js
start.js

详细介绍

浏览器工具

用于协作式网站探索和抓取的精简 CDP 工具。

致谢：基于 Mario Zechner 的文章 What if you don't need MCP?，并根据 Factory.ai 改编。

设置

首次使用前，请安装依赖项：

npm install --prefix skills/browser

启动 Chrome

./skills/browser/scripts/start.js              # Fresh profile
./skills/browser/scripts/start.js --profile    # Copy your profile (cookies, logins)

在 :9222 上启动 Chrome，并启用远程调试。

导航

./skills/browser/scripts/nav.js https://example.com
./skills/browser/scripts/nav.js https://example.com --new

导航当前标签页或打开新标签页。

执行 JavaScript

./skills/browser/scripts/eval.js 'document.title'
./skills/browser/scripts/eval.js 'document.querySelectorAll("a").length'

在活动标签页中执行 JavaScript（异步上下文）。

重要：代码必须是单个表达式，或使用 IIFE 执行多条语句：

  • 单个表达式：'document.title'
  • 多条语句：'(() => { const x = 1; return x + 1; })()'
  • 避免在代码字符串中换行——保持为一行

截图

./skills/browser/scripts/screenshot.js

截取当前视口的屏幕截图，并返回临时文件路径。

选择元素

./skills/browser/scripts/pick.js "Click the submit button"

交互式元素选择器。单击以选择，按住 Cmd/Ctrl 并单击可多选，按 Enter 完成。

工作流

  1. 使用 start.js --profile 启动 Chrome，以复用已认证的状态。
  2. 通过 nav.js https://target.app 驱动导航，或使用 --new 打开次要标签页。
  3. 使用 eval.js 检查 DOM，快速统计数量、检查属性或提取 JSON 负载。
  4. 使用 screenshot.js 捕获产物作为视觉证明，或在需要精确选择器或文本快照时使用 pick.js。

使用说明

  • 使用其他工具前，请先启动 Chrome
  • --profile 标志会同步你实际的 Chrome 配置文件，让你在所有位置都处于登录状态
  • JavaScript 求值会在页面的异步上下文中运行
  • Pick 工具支持通过单击来直观选择 DOM 元素

评论

支持 Markdown