使用说明

网络法律

A. WebMCP原生 在真实Chrome中运行的浏览器代理——从Claude、Cursor和任何MCP客户端控制它。

为什么选择网络法律？

	网络法律	浏览器使用	剧作家MCP
在真正的Chrome中运行	是（扩展）	否（CDP）	否
用户的登录会话	是	否	否
机器人检测	抵抗的	易受攻击	易受攻击
WebMCP原生工具	是	否	否
页面理解	`@ref` a11y树	截图	DOM/截图

WebLaw作为一个 Chrome扩展程序，所以它可以看到你看到的内容——Cookie、登录、扩展等。没有无头浏览器，没有CDP注入，没有机器人标志。

快速开始

1.配置您的MCP客户端

Claude Desktop

增添 claude_desktop_config.json:

{
  "mcpServers": {
    "webclaw": {
      "command": "npx",
      "args": ["-y", "webclaw-mcp"]
    }
  }
}

配置文件位置：

macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
Linux： ~/.config/Claude/claude_desktop_config.json
窗户： %APPDATA%\Claude\claude_desktop_config.json

Claude Code

claude mcp add webclaw -- npx -y webclaw-mcp

Cursor

增添 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "webclaw": {
      "command": "npx",
      "args": ["-y", "webclaw-mcp"]
    }
  }
}

VS Code (Copilot)

增添 .vscode/mcp.json 在项目根目录中：

{
  "servers": {
    "webclaw": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "webclaw-mcp"]
    }
  }
}

Windsurf

增添 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "webclaw": {
      "command": "npx",
      "args": ["-y", "webclaw-mcp"]
    }
  }
}

2.加载Chrome扩展程序

下载最新 webclaw-extension.zip 从“发布”页面解压缩
打开 chrome://extensions/ → 启用 开发者模式
点击 加载未打包的 → 选择 dist/ 文件夹

Or build from source

git clone https://github.com/kuroko1t/webclaw.git && cd webclaw && pnpm install && pnpm build

然后加载 packages/extension/dist/ 如上所述。

3.试试看

重新启动MCP客户端并询问：

“转到wikipedia.org并搜索模型上下文协议”

Chrome会在第一次工具调用时自动启动。侧面板实时显示所有活动。

运作原理

flowchart LR
    LLM["AI Assistant"]
    MCP["MCP Server"]
    EXT["Chrome Extension"]
    CS["Content Script"]

    LLM -- "stdio" --> MCP -- "WebSocket" --> EXT --> CS

    style LLM fill:#7b2d8b,stroke:#333,color:#fff
    style MCP fill:#1a5276,stroke:#333,color:#fff
    style EXT fill:#1e8449,stroke:#333,color:#fff
    style CS fill:#b7950b,stroke:#333,color:#fff

人工智能称之为MCP工具(navigate_to, page_snapshot, click, ...)
MCP服务器通过WebSocket将请求转发到Chrome扩展程序
内容脚本将页面读取为 紧凑可达性树 随着 @ref 标签
AI选择正确的 @ref 和动作——没有像素坐标，没有CSS选择器

`page_snapshot` 输出

[page "Wikipedia, the free encyclopedia"]
  [search]
    [form]
      [@e3 searchbox "Search Wikipedia"]    ← AI targets this
      [@e4 button "Search"]                 ← and clicks this
  [main]
    [heading[1] "Welcome to Wikipedia"]
    [group]
      [heading[2] "From today's featured article"]
      ...

每个交互元素都得到了稳定的 @ref 标签。AI读取树，选择正确的 @ref，和电话 click / type_text / select_option.

MCP工具（21）

Page Interaction — navigate, snapshot, click, hover, type, select, drop files, screenshot, dialog, evaluate

工具	参数	说明
`navigate_to`	`url`, `tabId?`	导航到URL
`page_snapshot`	`focusRegion?`, `interactiveOnly?`, `tabId?`	通过以下方式获得紧凑的可访问性树 `@ref` 标签
`click`	`ref`, `snapshotId`, `tabId?`	按元素单击元素 `@ref` 标签
`hover`	`ref`, `snapshotId`, `tabId?`	将鼠标悬停在元素上以显示隐藏的UI（下拉菜单、工具提示）
`type_text`	`ref`, `text`, `snapshotId`, `clearFirst?`, `tabId?`	在输入/文本区域中键入文本 `@ref`
`select_option`	`ref`, `value`, `snapshotId`, `tabId?`	通过以下方式选择下拉选项 `@ref`
`drop_files`	`ref`, `snapshotId`, `files`, `tabId?`	将文件拖放到元素上（例如，将图像上传到GitHub issues）
`screenshot`	`tabId?`	捕捉活动选项卡的可见区域
`handle_dialog`	`action`, `promptText?`, `tabId?`	处理本机浏览器对话框（警报/确认/提示）
`evaluate`	`expression`, `tabId?`	在页面上下文中评估JavaScript（例如，本地存储、Cookie、计算样式）

Tab Management — new, list, switch, close

工具	参数	说明
`new_tab`	`url?`	打开一个新标签页（可选择带有URL）
`list_tabs`		列出所有打开的选项卡，包括tabId、URL、标题和活动状态
`switch_tab`	`tabId`	切换到特定选项卡
`close_tab`	`tabId`	关闭特定选项卡

Navigation — back, forward, reload, wait, scroll

工具	参数	说明
`go_back`	`tabId?`	返回上一页
`go_forward`	`tabId?`	转到下一页
`reload`	`tabId?`, `bypassCache?`	重新加载当前页面
`wait_for_navigation`	`tabId?`, `timeoutMs?`	等待页面加载完成
`scroll_page`	`direction?`, `amount?`, `ref?`, `snapshotId?`, `tabId?`	滚动页面或滚动到特定元素

WebMCP — discover and invoke page-declared tools

工具	参数	说明
`list_webmcp_tools`	`tabId?`	在页面上发现工具（本机WebMCP+从按钮/表单自动合成）
`invoke_webmcp_tool`	`toolName`, `args?`, `tabId?`	调用已发现的工具（原生或合成）

发展

git clone https://github.com/kuroko1t/webclaw.git
cd webclaw
pnpm install
pnpm build        # Build all packages
pnpm test         # Run all tests
pnpm dev          # Watch mode

项目结构

packages/
  shared/          Type definitions, Zod schemas, utilities
  mcp-server/      MCP server with 21 tools, WebSocket bridge
  extension/       Chrome MV3 extension (service worker, content scripts, side panel)
examples/
  webmcp-demo-site/  WebMCP-enabled Todo app for testing native tool discovery

多会话支持

WebLaw会自动扫描端口18080–18089，因此您最多可以运行 10个MCP服务器实例 同时（例如多个克劳德代码会话）。每个实例都绑定到第一个可用端口，Chrome扩展程序连接到所有这些端口。

环境变量

变量	默认值	描述
`WEBCLAW_PORT`	`18080`	MCP服务器的WebSocket端口↔ 扩展通信。设置后，禁用自动扫描并仅使用此端口

Troubleshooting

Chrome扩展程序未连接

当调用工具时，Chrome会自动启动。如果失败，请在加载扩展程序的情况下手动启动Chrome
检查Service Worker控制台(chrome://extensions/ → 详情→ 服务人员） Connected to MCP server
验证MCP服务器是否正在运行（查找 WebSocket server listening on 127.0.0.1:<port> 在标准错误中）

MCP客户端无法连接

确保 npx webclaw-mcp 从您的终端成功运行
检查端口冲突：WebLaw自动扫描18080–18089。如果所有都在使用中，请设置 WEBCLAW_PORT 前往海关港口
更新配置后重新启动MCP客户端

内容脚本未注入

内容脚本仅注入 http:// 和 https:// 页面（不是 chrome://, file://等等）
加载扩展后尝试刷新页面

未发现WebMCP工具

原生WebMCP需要Chrome 146+ navigator.modelContext API
通过以下方式验证页面声明的工具 navigator.modelContext.addTool() 或 <link rel="webmcp-manifest">

贡献

欢迎投稿！在提交pull请求之前，请打开一个问题来讨论您的想法。

免责声明

WebLaw是一个浏览器自动化工具，用于个人生产力、开发、测试和可访问性等合法用例。用户有责任遵守他们与之互动的任何网站的服务条款。作者不对任何滥用此工具的行为负责。

许可证

麻省理工学院

使用说明

网络法律

为什么选择网络法律？

快速开始

1.配置您的MCP客户端

2.加载Chrome扩展程序

3.试试看

运作原理

page_snapshot 输出

MCP工具（21）

发展

项目结构

多会话支持

环境变量

贡献

免责声明

许可证

相关 MCP

浏览器自动化MCP服务

浏览器自动化MCP服务器

网页内容抓取服务

实时文档检索服务

Playwright浏览器自动化服务器

代码智能体IDE

`page_snapshot` 输出