browser

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser Tools

浏览器工具

Minimal CDP tools for collaborative site exploration and scraping.

Credits: Based on Mario Zechner's article What if you don't need MCP?, adapted from Factory.ai.

用于协作式网站探索与爬取的轻量型CDP工具。

致谢：基于Mario Zechner的文章《What if you don't need MCP?》（原文链接：https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/），改编自[Factory.ai](https://docs.factory.ai/guides/skills/browser)的指南。

Setup

安装配置

Before first use, install dependencies:

bash

npm install --prefix skills/browser

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

bash

npm install --prefix skills/browser

Start Chrome

启动Chrome

bash

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

Start Chrome on

:9222

with remote debugging.

bash

./skills/browser/scripts/start.js              # 全新配置文件
./skills/browser/scripts/start.js --profile    # 复制你的现有配置文件（包含Cookie、登录状态）

在

:9222

端口启动Chrome并开启远程调试。

Navigate

页面导航

bash

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

Navigate current tab or open new tab.

bash

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

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

Evaluate JavaScript

执行JavaScript

bash

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

Execute JavaScript in active tab (async context).

IMPORTANT: The code must be a single expression or use IIFE for multiple statements:

Single expression:
```
'document.title'
```

Multiple statements:

'(() => { const x = 1; return x + 1; })()'

Avoid newlines in the code string - keep it on one line

bash

./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; })()'

代码字符串中请勿换行，请保持单行格式

Screenshot

截图

bash

./skills/browser/scripts/screenshot.js

Screenshot current viewport, returns temp file path.

bash

./skills/browser/scripts/screenshot.js

对当前视口截图，并返回临时文件路径。

Pick Elements

选择DOM元素

bash

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

Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.

bash

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

交互式元素选择器。点击选择元素，Cmd/Ctrl+Click进行多选，按Enter完成选择。

Workflow

工作流程

Start Chrome with
```
start.js --profile
```
to mirror your authenticated state.
Drive navigation via
```
nav.js https://target.app
```
or open secondary tabs with
```
--new
```
.
Inspect the DOM using
```
eval.js
```
for quick counts, attribute checks, or extracting JSON payloads.
Capture artifacts with
```
screenshot.js
```
for visual proof or
```
pick.js
```
when you need precise selectors or text snapshots.

启动Chrome：使用
```
start.js --profile
```
命令，同步你的已认证登录状态。
导航控制：通过
```
nav.js https://target.app
```
命令导航目标站点，或使用
```
--new
```
参数打开次级标签页。
DOM检查：使用
```
eval.js
```
快速统计元素数量、检查属性或提取JSON数据。
捕获资源：使用
```
screenshot.js
```
获取可视化证据，或使用
```
pick.js
```
获取精确选择器或文本快照。

Usage Notes

使用注意事项

Start Chrome first before using other tools
The
```
--profile
```
flag syncs your actual Chrome profile so you're logged in everywhere
JavaScript evaluation runs in an async context in the page
Pick tool allows you to visually select DOM elements by clicking on them

使用其他工具前请先启动Chrome
```
--profile
```
参数会同步你实际的Chrome配置文件，让你在所有站点保持登录状态
JavaScript代码在页面的异步上下文中执行
选择工具允许你通过点击操作可视化选择DOM元素