Featured image of post Browser use 本地使用案例
AI

Browser use 本地使用案例

本期主角

[ Chrome MCP Server ]

  • 让AI接管你的浏览器，将您的浏览器转变为强大的 AI 控制自动化工具。

话不多说，直接开干！

准备工作

Windows 下需要提前准备以下内容：

名称 描述 链接
nodejs 和 npm nodejs 和 包管理工具 https://nodejs.org/dist/v24.12.0/node-v24.12.0-x64.msi
chrome 浏览器 google chrome 浏览器 Google Chrome – download
python python 程序和运行时 貌似 在安装nodejs 的相关工具时，会自动更新 python 环境，等待安装完成就好

注意：

安装 nodejs 时，要勾选自动安装必要环境组件的选项。否则安装完nodejs 和 npm 后还是会缺少 vs tools 等工具。

image-20260107100114509

勾选后，会自动进行下载安装相关工具，例如：python、 Microsoft Visual C++、chocolatey 等。

准备工作完成：

image-20260107095433634

项目代码：

Chrome MCP Server

chrome-mcp-server-1.0.0.zip

执行安装步骤：

  1. 打开chrome，语言设置为【中文】
  2. 在chrome 扩展中心，开启开发者模式
  3. 选择“加载未打包的扩展程序”，安装上面下载好的 chrome-mcp-server 插件包（需先解压）

image-20260107100825620

  1. 安装 依赖包

    1

    npm install -g mcp-chrome-bridge

  2. 启动 chrome-mcp-server。

    启动成功的话，会提示“服务运行中”

    image-20260107101223399

    1. 复制 上述MCP server 配置文件

      1
2
3
4
5
6
7
8

      {
  "mcpServers": {
    "streamable-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

在chatbox 中使用Browser use 工具

当然也可以在，支持MCP client 的Trace Cursor等工具上使用。

  1. 在chatbox 的mcp 设置中，配置工具：

    image-20260107101559805

  2. 在chatbox 中，新建对话。关联刚新建的工具： streamable-mcp-server ，模型使用deepseek-chat。

    通过文本方式，告诉需要操作的任务——

    image-20260107101810905

  3. 然后将看到 LLM 调用mcp 工具，完成chrome 操作 反思 执行任务的每一步：

    image-20260107101951715

    image-20260107102008813

    image-20260107102038089