用Browserbase实现Chrome自动化

有没有想过你的AI可以代表你浏览网页？有了Browserbase MCP 服务器，这个愿景现在成为现实。这项创新工具使AI模型——如Claude、GPT和Gemini——能够与Chrome浏览器交互，自动化从导航到数据提取的各个方面。

无论你是开发者、数据爱好者还是只是探索AI的潜力，本指南将帮助你利用Browserbase MCP 服务器进行浏览器自动化。让我们开始吧！

1、Browserbase MCP 服务器

Browserbase MCP 服务器 利用模型上下文协议（MCP）来连接AI模型和网络浏览器。这意味着你的AI可以：

访问任何网站
点击元素并完成表单
从网页中抓取数据
捕获屏幕截图
执行自定义JavaScript
同时管理多个浏览器会话

这就像给你的AI一个虚拟的网络操作手。此外，它还兼容领先的AI模型，包括OpenAI的GPT、Anthropic的Claude和Google的Gemini。

2、为什么选择 Browserbase MCP 服务器？

以下是这个工具在AI驱动的浏览器自动化中脱颖而出的原因：

云优先自动化：远程运行浏览器任务——无需本地设置。
支持多个AI模型：与你偏好的LLM集成。
并发会话：同时自动化多个浏览器任务。
视觉智能：拍摄并分析截图。
轻松集成：与Claude桌面和Cursor等客户端无缝配合。

无论你是自动化工作流程还是构建AI驱动的应用程序，Browserbase MCP 服务器都能开启新的可能性。

3、开始使用：安装与设置

你可以通过托管服务、npm或本地安装来使用Browserbase MCP 服务器。以下是每种方法的入门指南。

3.1 先决条件

在开始之前，请确保你有：

一个MCP兼容的AI客户端（例如Claude Desktop或Cursor）
来自Browserbase的Browserbase API密钥

3.2 本地安装（可选）

如果你想在本地运行服务器，还需要：

Git 用于克隆仓库
pnpm 从 pnpm.io
Node.js 从 nodejs.org
你所选AI模型的API密钥（例如[Gemini](https://ai.google.dev/gemini-api））

4、方案1：使用托管的Browserbase MCP 服务器

跳过设置，直接使用托管服务：

1. 获取你的API密钥和MCP URL：访问 smithery.ai 获取你的凭证。

2. 配置你的AI客户端：将提供的MCP URL添加到客户端的设置中。对于Claude Desktop，更新 claude_desktop_config.json:

 { "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

或者，对于 mcp-remote CLI:

 { "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

3. 重启你的客户端：重新启动你的AI客户端以激活新设置。

你现在可以通过Browserbase MCP 服务器自动控制Chrome了！

5、方案2：用NPM运行Browserbase MCP 服务器

为了获得最大的兼容性，使用npm：

更新你的MCP配置：将以下内容添加到你的配置文件中：

 { "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

2. 插入你的API密钥：填写你的实际凭证。

6、方案3：本地安装以获得完全控制

如果你喜欢亲自操作，以下是运行服务器的步骤：

1. 克隆仓库：

git clone https://github.com/browserbase/mcp-server-browserbase.git  

cd mcp-server-browserbase

2. 安装和构建：

pnpm install && pnpm build

3. 启动服务器：

对于STDIO（本地进程），配置你的MCP客户端：

{ "mcpServers": {  

"browserbase": {  
      "command": "node",  
      "args": ["path/to/mcp-server-browserbase/cli.js"],  
      "env": {  
        "BROWSERBASE_API_KEY": "your_api_key",  
        "BROWSERBASE_PROJECT_ID": "your_project_id",  
        "GEMINI_API_KEY": "your_gemini_key"  
      }  
    }  
  }  
}

对于HTTP传输，启动服务器：

node cli.js --port 3000

然后将你的客户端指向 http://localhost:3000。

4. 添加你的API密钥：将占位符替换为真实的密钥。

5. 重启你的客户端：重新启动以连接到本地服务器。

7、服务器自定义

Browserbase MCP 服务器支持几个高级用法的标志：

--proxies: 启用隐私代理
--advancedStealth: 激活隐身模式（需要Scale计划）
--browserWidth 和 --browserHeight: 设置窗口大小
--modelName: 指定不同的AI模型

将这些添加到你的配置中的 args 数组中，例如：

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

8、使用 Browserbase MCP 服务器自动化 Chrome

设置完成后，以下是控制Chrome的方法：

8.1 连接你的AI客户端

确保你的客户端（如Claude Desktop或Cursor）通过上述方法之一链接到Browserbase MCP 服务器。

8.2 发送命令

在你的AI客户端中发出自然语言指令，例如：

“前往 https://example.com”
“点击‘注册’按钮”
“在电子邮件字段中填写‘user@example.com’并提交”
“截取主页的屏幕截图”
“从该页面中提取所有产品标题”

AI将通过Browserbase MCP 服务器将你的请求转换为浏览器操作。

8.3 查看结果

根据你的命令，你会收到：

操作确认（例如，“已导航到 https://example.com”）
提取的数据（如产品列表）
屏幕截图（显示或保存）

例如，在请求截图后，你可能会看到：

“截图已捕获并保存为‘homepage.png’”

9、示例：自动化Google搜索

让我们走一遍实际测试：

打开你的AI客户端（例如Claude Desktop）
命令示例：

“前往 https://google.com，搜索‘Browserbase MCP Server’，然后点击第一个结果”

3. 观看自动化过程：如果本地运行HTTP，你将看到Chrome执行这些操作。

4. 检查输出：你的AI客户端应该确认步骤并可能提取页面内容。

10、故障排除

服务器无法启动？ 再次检查你的API密钥，并确保 pnpm build 成功。
客户端无法连接？ 检查你的MCP配置并重启客户端。
操作失败？ 一些网站可能需要高级隐身或代理。
模型问题？ 确认你的模型API密钥和功能。

11、结束语

你现在可以使用Browserbase MCP 服务器通过AI自动化Chrome了！无论你选择托管、npm还是本地方法，这个工具都会为你的AI项目带来强大的网络自动化能力。准备好进一步提升你的自动化能力了吗？开始将Browserbase MCP 服务器集成到你的日常工作中或下一个大创意中吧。

原文链接：Mastering Chrome Automation with Browserbase MCP Server: A Fresh Guide

汇智网翻译整理，转载请标明出处