Crawlio Browser MCP

此存储库已移动。 积极发展继续 Crawlio-app/crawlio-browser-agent. 安装最新版本： npx -y crawlio-browser

克劳利奥特工

MCP服务器，通过CDP让AI完全控制实时Chrome浏览器。96个工具（92个浏览器+3个会话记录+1个编译器）具有框架感知智能，可以捕获静态爬虫无法看到的内容。

](https://www.npmjs.com/package/crawlio-browser) 

何时使用Crawlio代理

当您的AI需要与…交互时，请使用Crawlio Agent 真实浏览器 --SPA、经过身份验证的页面、动态内容、JS渲染框架。与无头浏览器工具不同，Crawlio Agent连接到 您的实际Chrome 通过轻量级扩展，让人工智能访问您的登录会话、Cookie和完整浏览器状态。

克劳利奥特工vs剧作家MCP： 剧作家MCP推出无头浏览器。Crawlio Agent连接到您现有的Chrome浏览器——没有单独的浏览器进程，没有登录流，可以完全访问您的标签和会话。

快速开始

1. 安装 Chrome 扩展
2. 运行init向导：

   npx crawlio-browser init

就是这样。自动检测和配置Claude Code、Cursor、VS Code、Codex、Claude Desktop、ChatGPT Desktop和另外8个MCP客户端。

初始化向导选项

npx crawlio-browser init              # Default: code mode, stdio transport
npx crawlio-browser init --full       # Full mode (96 individual tools)
npx crawlio-browser init --portal     # Portal mode (persistent HTTP server)
npx crawlio-browser init --cloudflare # Add Cloudflare MCP (89 tools, no wrangler)
npx crawlio-browser init --dry-run    # Show what would happen
npx crawlio-browser init --yes        # Skip prompts (CI / scripted installs)
npx crawlio-browser init -a claude    # Target specific MCP client

手动设置（任何客户端）

Per-client manual config

克劳德桌面版 --添加到 claude_desktop_config.json:

{ "mcpServers": { "crawlio-browser": { "command": "npx", "args": ["-y", "crawlio-browser"] } } }

克劳德代码（门户模式） --开始 npx crawlio-browser --portal，然后添加到 .mcp.json:

{ "mcpServers": { "crawlio-browser": { "type": "http", "url": "http://127.0.0.1:3001/mcp" } } }

克劳德代码（stdio）：

claude mcp add crawlio-browser -- npx -y crawlio-browser

光标 --添加到 .cursor/mcp.json:

{ "mcpServers": { "crawlio-browser": { "command": "npx", "args": ["-y", "crawlio-browser"] } } }

帆板运动 --添加到Windsurf设置>MCP：

{ "mcpServers": { "crawlio-browser": { "command": "npx", "args": ["-y", "crawlio-browser"] } } }

Cline（VS代码） --添加到 settings.json:

{ "cline.mcpServers": { "crawlio-browser": { "command": "npx", "args": ["-y", "crawlio-browser"] } } }

ChatGPT桌面 --设置>集成>MCP： 网址： http://127.0.0.1:3001/mcp |类型：流式HTTP

运作原理

AI Client (stdio)  -->  MCP Server (Node.js)  -->  Chrome Extension (MV3)
                        crawlio-browser               WebSocket -> CDP

MCP服务器通过WebSocket与Chrome扩展程序通信。该扩展程序通过Chrome DevTools协议控制浏览器，该协议与Chrome DevTools和Playwright使用的协议相同。

体系结构：JIT上下文运行时

执行运行时建立在四个支柱之上，将其与无状态云沙盒分开：

• 注意稀释治疗 --3工具(search, execute, connect_tab)而不是96。代理通过以下方式按需发现功能 search，保持上下文窗口干净，工具选择准确。
• 多态语境 --在代码执行之前，运行时会探测浏览器中的框架签名，并注入变形 smart 带有框架原生访问器（React、Vue、Next.js、Shopify等）的对象。--跨4层的17个命名空间）。
• 确定执行 --每一个 smart.click() 运行具有渐进退避的可操作性检查（可见性、维度、启用状态、覆盖检测），然后强制执行操作后解决延迟（500ms/300ms/1000ms）。
• 代理REPL --运行时保持与浏览器的持久连接。当脚本失败时，浏览器状态将被保留——代理读取结构化错误并对同一实时会话进行迭代。

execute call lifecycle:
  search -> discover capabilities
  detect -> probe DOM for active frameworks
  inject -> build polymorphic smart object
  run    -> execute with actionability checks + settle delays
  return -> result or structured error (browser state preserved)

阅读完整的架构指南→

两种模式

代码模式（3个工具）--默认

将96个工具拆分为3个高级工具，模式标记减少约95%：

// Navigate and screenshot
await bridge.send({ type: 'browser_navigate', url: 'https://example.com' }, 30000);
await sleep(2000);
const screenshot = await bridge.send({ type: 'take_screenshot' }, 10000);
return screenshot;

全模式（96工具）

所有直接接触LLM的工具。启用 --full:

npx crawlio-browser init --full

智能对象

在代码模式下 smart 对象为框架感知助手提供了自动等待和可操作性检查。

核心方法

高阶方法

类型化证据

结构化分析结果的方法：

研究结果支持置信度传播——数据收集中的差距会自动限制置信度并增加 confidenceCapped / cappedBy 领域。

框架命名空间

当检测到框架时，智能对象会公开特定于框架的助手：

React — smart.react

Vue.js — smart.vue

Angular — smart.angular

Svelte — smart.svelte

Redux — smart.redux

Alpine.js — smart.alpine

Next.js — smart.nextjs

Nuxt — smart.nuxt

Remix — smart.remix

Shopify — smart.shopify

WordPress — smart.wordpress

More frameworks — Gatsby, WooCommerce, Laravel, Django, Drupal, jQuery

会话录制

将浏览器会话记录为结构化数据，然后将其编译为可重用的自动化技能。

录制过程中会自动拦截12个交互工具（点击、键入、导航、滚动等）。每次交互都会捕获参数、结果、时间和页面URL。

// In code mode: record, interact, compile
await bridge.send({ type: 'start_recording' }, 10000);
// ... interact with the page ...
const session = await bridge.send({ type: 'stop_recording' }, 10000);
const skill = compileRecording(session.session, 'my-automation');
return skill;

自动设置

可变工具(browser_click, browser_type, browser_navigate, browser_select_option)使用剧作家启发的可操作性检查：

1. 飞行前：在操作之前轮询元素可见性、稳定性和启用状态
2. 行动：分派CDP命令
3. 后结算：等待DOM突变随着逐步回退而停止 [0, 20, 100, 100, 500]ms

这意味着AI不需要手动添加 sleep() 或 waitFor() 操作之间的调用——这些工具会自动处理SPA渲染延迟。

框架检测

检测 64项技术 使用全局变量、DOM标记、元标记、HTTP标头和脚本URL跨4层：

多框架检测返回 主要的，重要的 框架（元框架优先）加上 subFrameworks 整个堆栈的数组。

工具参考

连接和状态

页面捕获

导航与交互

网络

框架和标签

Cookie和存储

对话

仿真

安全

服务人员

DOM操作

CSS和JS覆盖率

性能和内存

PDF和辅助功能

目标和背景

可视化调试

会话录制

Crawlio应用程序集成

可选--必需 Crawlio.app 在本地运行。

需求

• Node.js >= 18
• 铬 （或铬）与 Crawlio代理扩展 安装
• Crawlio.app （可选）--用于网站爬行和丰富

许可证

麻省理工学院