当前位置：首页 > news >正文

使用 MCP 自动化 JxBrowser

news 2026/3/26 20:53:20

大语言模型（LLM）是先进的代码生成与数据推理工具，但本身缺乏与浏览器等外部应用交互的原生能力。若要将 LLM 应用于实际浏览器自动化场景，需使其具备类人类的应用控制能力与结果观测能力。

模型上下文协议（Model Context Protocol，MCP）恰好提供了这一核心能力。作为一项开放标准，它定义了 LLM 与外部工具的简易通信方式，使 LLM 能够接入浏览器执行测试、UI 调整、无障碍检测及数据爬取等任务。

JxBrowser 是一款适用于 Java 应用的嵌入式浏览器组件，广泛应用于自动化测试与数据爬取场景。与 Google Chrome 类似，您可通过 MCP 实现 LLM 对 JxBrowser 的控制。本文将详细演示如何将 JxBrowser 与 MCP 服务器集成，实现基于 LLM 的自动化流程。

理解 MCP 工作流程

当通过 MCP 实现 LLM 控制浏览器时，其工作流程如下：

基于 MCP 的浏览器自动化流程

MCP 主机通常为您的 AI 助手应用，如 Claude Desktop 或 Cursor，其运行 LLM 并包含一个或多个 MCP 客户端，每个客户端均与单个 MCP 服务器建立连接。MCP 服务器是提供 “工具” 的外部应用，供模型调用以执行实际操作。

当您输入类似“点击登录按钮”的提示时，LLM 会解析您的请求并决定使用哪个 MCP 工具。MCP 客户端将此请求发送到 MCP 服务器，服务器运行该工具并在浏览器中执行点击操作。

MCP 服务器与 JxBrowser 的连接方式

MCP 服务器通过多种方式与浏览器建立连接。对于基于 Chromium 的浏览器，主要有两种方案：Chrome 开发者工具协议（CDP）和Chrome 扩展程序。让我们快速了解一下这两种方法。

CDP提供远程调试接口，支持外部工具向浏览器发送指令并接收浏览器事件。

功能特性：

可以控制页面导航、DOM 操作、网络流量和控制台日志。
支持无头模式（无 UI）自动化。

限制：

需要在启动时启用远程调试。

以下 MCP 服务器使用此方法：Playwright MCP，Chrome DevTools MCP。

Chrome 扩展程序在浏览器内部运行，并直接与页面的 DOM 交互。

功能特性：

可在浏览器内部与页面交互并执行脚本。
即使 CDP 被禁用或不可用仍可正常工作。

限制：

需在浏览器配置文件中安装并管理扩展程序。
仅支持扩展程序 API，不支持底层网络控制、性能监控或无头模式。

以下 MCP 服务器使用此方法：Browser MCP, Chrome MCP Server。

使用开发者工具协议

通过 Chrome 开发者工具协议实现 JxBrowser 自动化，需完成以下步骤：

启动 Chromium 时启用远程调试。
在 AI 助手中配置 MCP 服务器。
在 Swing 窗口中显示浏览器，实时观测自动化过程。

本示例使用 Playwright MCP 服务器，其他支持远程调试协议的 MCP 服务器同样适用。

首先配置远程调试：

varport=9222;varoptions=EngineOptions.newBuilder(HARDWARE_ACCELERATED).addSwitch("--remote-allow-origins=http://localhost:"+port).remoteDebuggingPort(port).build();varengine=Engine.newInstance(options);varbrowser=engine.newBrowser();

上述代码启动 Chromium 引擎并在9222端口开启远程调试。任何支持 CDP 的工具均可通过该端口连接并控制浏览器。

大多数 MCP 服务器支持自动检测并连接浏览器。如需与 JxBrowser 配合使用，需在 MCP 配置中指定 CDP 端点。在 AI 助手的 MCP 配置中添加以下内容，以连接 Playwright MCP 服务器：

{"mcpServers":{"playwright":{"command":"npx","args":["@playwright/mcp@latest","--cdp-endpoint","http://localhost:9222"]}}}

为了实时查看自动化流程，我们将添加一个BrowserView组件，该组件在 Java SwingJFrame中渲染 Web 内容：

SwingUtilities.invokeLater(()->{varframe=newJFrame("JxBrowser DevTools MCP");frame.setDefaultCloseOperation(DISPOSE_ON_CLOSE);frame.setSize(1280,900);frame.setLocationRelativeTo(null);// 添加用于渲染 Web 内容的组件。frame.add(BrowserView.newInstance(browser),BorderLayout.CENTER);frame.setVisible(true);});// 加载所需的网页。browser.navigation().loadUrl("http://localhost:3000/register");

配置完成后，AI 助手即可通过 MCP 服务器控制 JxBrowser。您可在聊天窗口中发送 “打开页面”、“点击按钮” 或 “提取数据” 等指令，实时观察自动化操作在应用中执行。

使用 MCP 自动化 JxBrowser

完整示例代码可在 GitHub 仓库中获取。

使用 Chrome 扩展程序

通过 Chrome 扩展程序实现 JxBrowser 自动化，需完成以下步骤：

在 JxBrowser 中安装 MCP 服务器扩展程序。
从扩展程序连接 MCP 服务器。
在 AI 助手中配置 MCP 服务器。
在 Swing 窗口中显示浏览器，实时观测自动化过程。

本示例使用 Browser MCP 服务器，需安装 Browser MCP Chrome 扩展程序并连接至 MCP 服务器。

JxBrowser 支持从 CRX 文件或 Chrome 网上应用店安装扩展程序。以下是从 CRX 文件安装的示例：

varextension=profile.extensions().install(Paths.get("browser-mcp.crx"));

您可通过 JxBrowser 下载扩展程序的 CRX 文件，详见扩展程序指南。

点击 Chrome 工具栏中的 Browser MCP 扩展程序图标，将显示带有“连接”按钮的弹窗。需点击该按钮以建立当前标签页与 MCP 服务器的连接。

Browser MCP 扩展程序弹窗

在 JxBrowser 中，我们可以通过代码打开此弹出窗口，并使用 JavaScript 自动点击按钮：

// 注册一个处理程序，用于在弹出窗口打开时点击按钮。browser.set(OpenExtensionActionPopupCallback.class,(params,tell)->{varpopupBrowser=params.popupBrowser();popupBrowser.navigation().on(FrameDocumentLoadFinished.class,event->{// 自动点击“连接”按钮。event.frame().executeJavaScript("document.querySelector('button.w-full')?.click()");});tell.proceed();});// 打开扩展程序弹出窗口。extension.action(browser).ifPresent(ExtensionAction::click);

上述代码将在扩展程序加载完成后自动连接 MCP 服务器。

接下来，将以下配置添加到您的 AI 助手以设置浏览器 MCP 服务器：

{"mcpServers":{"browsermcp":{"command":"npx","args":["@browsermcp/mcp"]}}}

与 CDP 示例一样，将BrowserView嵌入到 Swing 窗口中以观察自动化过程：

SwingUtilities.invokeLater(()->{varframe=newJFrame("JxBrowser Extension MCP");frame.setDefaultCloseOperation(DISPOSE_ON_CLOSE);frame.setSize(1280,900);frame.setLocationRelativeTo(null);// 添加用于渲染 Web 内容的组件。frame.add(BrowserView.newInstance(browser),BorderLayout.CENTER);frame.setVisible(true);});// 加载所需的网页。browser.navigation().loadUrl("http://localhost:3000/register");

完整示例代码可在此处获取。

上下文窗口限制问题

在测试基于 MCP 的浏览器自动化时，我们遇到了一个关键限制：LLM 的上下文窗口会快速耗尽。

上下文窗口相当于模型的短期内存，存储了完整的对话内容，包括您的指令、模型的回复及 MCP 服务器返回的数据。一旦窗口填满，模型将无法接收新信息或正常进行推理。

使用 MCP 时，这一限制会比预期更早出现。即使在内容丰富的页面上执行简单操作，也可能耗尽可用上下文。不同 AI 助手对此的表现不同，例如 Claude Desktop 会显示以下错误：

Claude 已达到本次对话的最大长度限制。请开启新对话以继续与 Claude 交互。

问题原因

当 LLM 调用浏览器自动化工具时，服务器通常会在响应中附加一个网页快照。此快照并非原始 HTML，而是页面的结构化解析视图——一个包含标识符、属性和文本内容的元素树。模型需要这样的快照来“了解”自身所在位置并决定下一步操作。较大的页面会生成较大的快照，这可能会迅速填满上下文窗口。

此外，MCP 服务器连接时会自动将其所有功能描述添加至 LLM 上下文。工具数量越多、描述越详细，在执行实际操作前占用的内存就越多。

实际场景中，网页的大小对上下文的使用有很大影响。即使是拥有 20 万个令牌上下文窗口的模型，在几次工具调用后也可能达到限制。

可能的解决方案

使用更大上下文窗口的模型。模型的记忆容量越大，可执行的自动化步骤越多。但此类模型的使用成本通常更高。
使用优化页面快照的 MCP 服务器。部分 MCP 服务器会生成更小、结构更简洁的页面快照，从而减少令牌占用。例如，Chrome DevTools MCP 服务器通常比其他服务器更高效。
使用截图替代文本快照。图像不会占用文本令牌，因此让模型通过视觉识别元素可能更高效。部分 MCP 服务器支持关闭文本快照并使用截图。大多数 AI 助手可在 MCP 工具设置中配置此功能。例如，在 Claude Desktop 中，可通过对话框的 “工具” 下拉菜单切换启用的 MCP 工具，进而让模型捕获并分析页面截图，而非处理大型文本快照。