tabnab (Clduab11)

🍪 标签Nab

*向您的AI提供Cookie，而不提供密码*

本地MCP服务器，将AI代理与经过身份验证的浏览器会话连接起来

  ](https://nodejs.org/)  

🚀 快速开始 • 📦 安装 • 🛠️ 工具 • 📖 文档

______________________________________________________________________

✨ TabNab是什么？

TabNab弥合了人工智能代理（Claude、Cursor、Windsurf）与您之间的差距 真实浏览器会话。TabNab不要求您共享密码或API密钥，而是让AI代理使用您现有的已验证浏览器会话：

• 🌐 使用您的登录凭据浏览网站
• 📄 从复杂的网页中提取干净的内容
• ⚡ 自动填写表单和点击按钮
• 📸 捕获屏幕截图以进行视觉验证
• 🔒 访问身份验证和Cloudflare背后的站点

魔术： AI代理使用您的Cookie和会话查看您在Chrome中看到的内容，而不知道您的密码。

______________________________________________________________________

🎯 主要特点

🔐 认证访问

通过Playwright（CDP）连接到您的真实Chrome浏览器，并保持所有Cookie和会话的完整性。不需要密码共享。

📝 清洁提取

使用Readability.js+Turndown将杂乱的HTML转换为原始的Markdown，以供AI使用。

🎨 扩展的MCP工具

通过MCP协议完成浏览器自动化：选项卡、导航、提取、查询、键盘、屏幕截图和确认。

______________________________________________________________________

🚀 快速开始

1.️⃣ 先决条件

• Node.js 22+ (下载)
• pnpm 包管理器(npm install -g pnpm)
• 铬/铬 浏览器

2.️⃣ 使用远程调试启动Chrome

建议： 使用专用的Chrome配置文件进行TabNab自动化，以隔离Cookie和会话数据。

macOS

./scripts/start-chrome.sh
# or manually (dedicated profile recommended):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir="$HOME/Library/Application Support/TabNab-Chrome"

Linux

./scripts/start-chrome.sh
# or manually (dedicated profile recommended):
google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/tabnab-chrome"

Windows

.\scripts\start-chrome.ps1
# or manually (dedicated profile recommended):
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%LOCALAPPDATA%\TabNabChrome"

3.️⃣ 安装和构建选项卡

git clone https://github.com/clduab11/tabnab.git
cd tabnab
pnpm install
pnpm run build

TabNab使用Playwright通过CDP连接到您现有的Chrome。无需额外下载浏览器。

4.️⃣ 测试连接

pnpm run test:milestone1

✅ 您应该看到活动选项卡的URL和标题！

______________________________________________________________________

📦 安装

作为MCP服务器（推荐）

在AI代理客户端中将TabNab配置为MCP服务器。

Claude Desktop Configuration

文件位置：

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

配置：

{
  "mcpServers": {
    "tabnab": {
      "command": "node",
      "args": ["/absolute/path/to/tabnab/dist/mcp/index.js"],
      "env": {
        "CHROME_DEBUG_PORT": "9222",
        "TABNAB_ALLOWED_DOMAINS": "example.com,app.example.com",
        "TABNAB_CONFIRMATION_MODE": "confirm-on-sensitive",
        "TABNAB_AUDIT_LOG_PATH": "/tmp/tabnab-audit.log"
      }
    }
  }
}

Cursor / Windsurf Configuration

遵循其他MCP兼容客户端的类似配置模式。看 mcp-config.example.json 以供参考。

作为独立的电子应用程序

pnpm run dev

将TabNab作为菜单栏应用程序启动。

______________________________________________________________________

🛠️ 可用工具

TabNab提供了一组专注的MCP工具，用于浏览器自动化和策略执行：

响应合同和版本控制

所有工具响应均遵循共享合同：

{
  "ok": true,
  "success": true,
  "protocolVersion": 2,
  "warnings": [],
  "data": {}
}

错误使用相同的信封 ok: false一 error 对象，以及 success: false 为了向后兼容性。

标签定位

使用 list_tabs 以获得稳定 tabId 价值观。每个页面/操作工具都接受一个可选 tabId如果省略，TabNab会选择活动选项卡，首选聚焦选项卡（如果可检测到），回退到最后一个聚焦选项卡，然后是第一个非扩展/非开发工具选项卡。

确认流程

当政策决定需要确认时，工具会返回：

{
  "ok": false,
  "success": false,
  "protocolVersion": 2,
  "warnings": [],
  "error": { "code": "NEEDS_CONFIRMATION", "message": "..." },
  "data": { "confirmationId": "...", "actionSummary": "..." }
}

呼叫 confirm_action 随着 confirmationId，然后使用重试原始操作 confirmationId 继续。使用 deny_action 拒绝未决诉讼。

🔍 Tool Details: get_active_tab

返回当前活动浏览器选项卡的URL和标题。

输出示例：

{
  "ok": true,
  "data": {
    "url": "https://github.com/clduab11/tabnab",
    "title": "TabNab - GitHub"
  },
  "warnings": []
}

🧭 Tool Details: navigate_and_extract

导航到一个URL，并使用Readability.js（或经过净化的DOM）提取干净的Markdown内容。

输入示例：

{
  "url": "https://example.com/article",
  "extractionMode": "readability_markdown"
}

输出示例：

{
  "ok": true,
  "data": {
    "url": "https://example.com/article",
    "title": "Article Title",
    "markdown": "# Article Title\n\nClean extracted content..."
  },
  "warnings": []
}

🖱️ Tool Details: click_element

使用CSS选择器单击当前页面上的元素。

输入示例：

{
  "selector": "button.submit-btn"
}

输出示例：

{
  "ok": true,
  "data": {
    "message": "Clicked element: button.submit-btn"
  },
  "warnings": []
}

✏️ Tool Details: fill_input

用指定值填充输入字段。首先清除现有内容。

输入示例：

{
  "selector": "input[name='email']",
  "value": "user@example.com"
}

输出示例：

{
  "ok": true,
  "data": {
    "message": "Filled input: input[name='email']"
  },
  "warnings": []
}

📸 Tool Details: screenshot_tab

截取当前选项卡的屏幕截图。如果没有指定路径，则返回base64编码的数据。

输入示例：

{
  "fullPage": false,
  "path": "/path/to/screenshot.png"
}

输出示例：

{
  "ok": true,
  "data": {
    "path": "/path/to/screenshot.png",
    "message": "Screenshot saved to: /path/to/screenshot.png"
  },
  "warnings": []
}

______________________________________________________________________

🛡️ 政策和安全默认值

TabNab强制执行 域满列表 和 确认门 默认情况下。被阻止的操作返回 ok: false 随着 reasonCodes.

环境变量：

• TABNAB_ALLOWED_DOMAINS="example.com,app.example.com" （导航/点击/填写所需）
• TABNAB_ALLOWED_PATH_PREFIXES="example.com:/billing;example.com:/settings"
• TABNAB_CONFIRMATION_MODE="auto|confirm-on-navigation|confirm-on-sensitive|always-confirm"
• TABNAB_AUDIT_LOG_PATH="/tmp/tabnab-audit.log"
• TABNAB_AUDIT_LOG_SELECTOR_MODE="truncate|hash|plaintext"
• TABNAB_MAX_STEPS="30"

确认流程：

1. 工具可能会返回 status: "needs_confirmation" 带着一个 confirmation_token.
2. 呼叫 confirm_action 继续或取消。

注射提示警告： 提取工具扫描提取的内容，查找类似指令的短语，并在检测到时返回警告。

______________________________________________________________________

🏗️ 建筑

graph TB
    A[AI Agent
Claude/Cursor/Windsurf] -->|MCP Protocol| B[TabNab MCP Server]
    B -->|Chrome DevTools Protocol| C[Chrome Browser
Port 9222]
    C -->|Authenticated Sessions| D[Web Pages
With Your Cookies]
    
    style A fill:#e1f5ff,stroke:#01579b,stroke-width:2px
    style B fill:#fff9c4,stroke:#f57f17,stroke-width:2px
    style C fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    style D fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px

架构概述：

/src
  /main       - Electron menu bar application entry point
  /mcp        - MCP server implementation (stdio transport)
  /browser    - Chrome DevTools Protocol connection manager (Playwright CDP)
  /extraction - HTML to Markdown conversion (Readability + Turndown)

______________________________________________________________________

💡 用例

🤖 人工智能驱动的网络自动化

让Claude或Cursor使用现有会话自动执行繁琐的浏览器任务：

• 在经过身份验证的网站上填写表格
• 导航多步骤工作流
• 从登录后的页面中提取数据

📊 经过身份验证的数据收集

从您已登录的网站收集信息：

• 社交媒体分析
• 仪表板数据提取
• 付费墙背后的研究

🧪 测试与质量保证

通过真实身份验证自动化浏览器测试：

• 用户流中记录的测试
• 验证表单提交
• 捕捉视觉回归

🔍 研究与分析

在人工智能的帮助下浏览和分析内容：

• 总结订阅网站上的文章
• 从复杂页面中提取结构化数据
• 导航和记录web应用程序

______________________________________________________________________

📖 文档

• CLAUDE.md -AI代理开发指南
• 实施.md -技术架构细节
• 贡献.md -贡献指南
• 安全.md -安全注意事项和报告

______________________________________________________________________

🤝 贡献

我们欢迎捐款！看 贡献.md 用于：

• 开发环境设置
• 代码风格指南
• 拉取请求流程
• 测试要求

在投稿之前，请查看我们的：

• 行为准则 （尊重和专业精神）
• 许可协议 （CLA术语）

______________________________________________________________________

🔧 发展

先决条件

• Node.js 22 LTS或更高版本
• pnpm 9.15.4+
• Chrome/Chromium，支持远程调试

命令

# Install dependencies
pnpm install

# Build project
pnpm run build

# Run type checking
pnpm run type-check

# Lint code
pnpm run lint

# Auto-fix linting issues
pnpm run lint:fix

# Format code
pnpm run format

# Run Electron app
pnpm run dev

______________________________________________________________________

💻 技术栈

______________________________________________________________________

📄 许可证

TabNab可在 双重许可模式:

🆓 个人和非商业用途

自由 在...之下 PolyForm Shield许可证1.0.0

✅ 允许：

• 个人项目和学习
• 学术和教育用途
• 非营利组织（501（c）（3）或同等组织）
• 开源项目（非商业）
• 评估和测试

💼 商业用途

需要商业许可证 对于任何盈利活动：

❗ 需要许可证：

• 使用TabNab的SaaS产品
• 内部业务自动化
• 使用TabNab的咨询服务
• 任何商业产品或服务
• 营利性组织使用

📄 查看商业许可条款→

❓ 不确定您需要哪种许可证？

查看我们的 商业许可常见问题 以获取详细的示例和指导。

商业许可联系人：

• 电子邮件：licensing@tabnab.dev *（占位符）*
• github： 打开问题

______________________________________________________________________

⚠️ 安全注意事项

TabNab为AI代理提供了对经过身份验证的浏览器会话的强大访问。请理解其含义：

• 🔒 仅限本地：仅连接到 localhost Chrome实例
• 🍪 Cookie访问：AI代理可以读取您的Cookie和会话令牌
• ⚡ 实时行动：AI代理在您的实际浏览器上执行操作
• 🔐 需要信任：仅与您完全信任的AI代理一起使用

最佳实践：

• 使用专用的Chrome配置文件进行自动化
• 实时监控AI代理的操作
• 不要与高度敏感的帐户一起使用
• 审查 安全.md 获取详细指导

报告安全问题： security@tabnab.dev *（占位符）*

______________________________________________________________________

🙏 致谢

内置：

• Chrome 开发者工具协议 用于浏览器控制
• 可读性.js Mozilla用于内容提取
• 关闭 用于HTML到Markdown的转换
• 模型上下文协议 通过Anthropic

______________________________________________________________________

⬆ 返回页首

由...制作❤️ 面向人工智能自动化社区

标签Nab ©2025 TabNab贡献者