> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# 用Browserbase实现Chrome自动化
- URL: https://www.hubwiz.com/blog/chrome-automation-with-browserbase-mcp/
- Published: 2025-07-28T01:32:11.000Z
- Updated: 2025-07-28T01:32:11.000Z
- Description: 无论你是开发者、数据爱好者还是只是探索AI的潜力，本指南将帮助你利用Browserbase MCP 服务器进行浏览器自动化。让我们开始吧！
- Author: admin
- Tags: APPLICATION, MCP SERVER, BROWSERBASE, #Import 2026-10-14 14:41

有没有想过你的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。

![](https://www.hubwiz.com/blog/content/images/2025/07/image-229.png)

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

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

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

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

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

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

### 3.1 先决条件

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

- **一个MCP兼容的AI客户端**（例如[Claude Desktop](https://www.anthropic.com/claude?ref=hubwiz.com)或[Cursor](https://cursor.sh/?ref=hubwiz.com)）
- **来自**[**Browserbase**](https://www.browserbase.com/?ref=hubwiz.com)**的Browserbase API密钥**

![](https://www.hubwiz.com/blog/content/images/2025/07/image-230.png)

### 3.2 本地安装（可选）

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

- **Git** 用于克隆仓库
- **pnpm** 从 [pnpm.io](https://pnpm.io/?ref=hubwiz.com)
- **Node.js** 从 [nodejs.org](https://nodejs.org/?ref=hubwiz.com)
- **你所选AI模型的API密钥**（例如\[Gemini\]([https://ai.google.dev/gemini-api））](https://ai.google.dev/gemini-api%EF%BC%89%EF%BC%89?ref=hubwiz.com)

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

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

**1\. 获取你的API密钥和MCP URL**：访问 [smithery.ai](https://smithery.ai/?ref=hubwiz.com) 获取你的凭证。

![](https://www.hubwiz.com/blog/content/images/2025/07/image-231.png)

**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：

1. **更新你的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](https://example.com/?ref=hubwiz.com)”
- “点击‘注册’按钮”
- “在电子邮件字段中填写‘[user@example.com](mailto:user@example.com)’并提交”
- “截取主页的屏幕截图”
- “从该页面中提取所有产品标题”

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

### 8.3 查看结果

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

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

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

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

## 9、示例：自动化Google搜索

让我们走一遍实际测试：

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

> *“前往* [*https://google.com*](https://google.com/?ref=hubwiz.com)*，搜索‘Browserbase MCP Server’，然后点击第一个结果”*

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

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

![](https://www.hubwiz.com/blog/content/images/2025/07/image-232.png)

## 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](https://garysvenson09.medium.com/mastering-chrome-automation-with-browserbase-mcp-server-a-fresh-guide-821988a41925?ref=hubwiz.com)

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