如何使用 WebMCP：让 AI Agent 更可靠地操作网页

本文详细介绍 WebMCP 的概念、与传统 MCP 及浏览器自动化的区别，指导如何在 Chrome 本地启用测试，设计适合搜索、筛选、收藏、反馈等功能的 WebMCP 工具，并提供上线前的安全权限检查清单，助力中文 AI 工具站和 WordPress 内容站提升 AI Agent 操作网页的可靠性和安全性。

摘要

随着 AI Agent 在网页自动化操作中的应用日益广泛，如何让它们更可靠、更安全地与网页交互成为关键。本文围绕aistacknav.com的中文 AI 工具站需求，深入解析了由 Chrome 官方提出的 WebMCP（Web Model Context Provider）标准。文章从 WebMCP 的定义、与传统 MCP 及浏览器自动化的区别入手，详细讲解了如何在 Chrome 浏览器中启用本地测试功能，结合实际案例指导如何设计搜索、筛选、收藏、提交反馈等页面能力的 WebMCP 工具，最后附上上线前的安全与权限检查清单，帮助开发者打造更高效、安全的 AI Agent 网页操作方案。

什么是 WebMCP？

WebMCP 是 Chrome 文档中描述的一个拟议 Web 标准和浏览器 API，旨在通过 JavaScript 或 HTML 表单标注，向 AI Agent 暴露结构化工具和上下文信息。它是 MCP（Model Context Provider）的进化版本，专注于让网页主动提供可供 AI Agent 调用的功能接口，而非被动等待传统自动化脚本的执行。

传统 MCP 通常由浏览器或操作系统层面提供，功能有限且不够灵活；而 WebMCP 允许网页开发者自主定义工具集，提升 AI Agent 对网页内容的理解和操作精准度。

WebMCP 与 MCP 及传统浏览器自动化的区别

传统浏览器自动化多依赖 DOM 操作、XPath、CSS 选择器等技术，易受页面结构变化影响，且难以表达复杂的业务逻辑。MCP 作为模型上下文提供者，能为 AI Agent 提供语义层面的信息，但传统 MCP 受限于浏览器实现和权限，难以灵活扩展。

WebMCP 则通过标准化的 JavaScript API 和 HTML 表单标注，允许网页主动定义“工具”（tools），这些工具可以是搜索、筛选、收藏、提交反馈等具体操作接口。AI Agent 通过调用这些工具，能更准确地理解页面功能和数据，减少误操作，提升交互效率。

如何在 Chrome 本地启用 WebMCP 测试

目前 WebMCP 仍处于实验和预览阶段，Chrome 从版本 149 开始支持 origin trial。开发者可以通过以下步骤在本地测试 WebMCP：

打开 Chrome 浏览器，访问 chrome://flags/#enable-webmcp-testing。
启用“Enable WebMCP Testing”选项。
重启浏览器以生效。
在开发者工具中，可通过 navigator.modelContextTesting.listTools() 查看当前网页支持的 WebMCP 工具列表。
使用 navigator.modelContextTesting.executeTool(toolName, params) 调用指定工具，测试其功能。

这种本地测试方式方便开发者调试和验证工具接口，确保 AI Agent 调用时的稳定性和正确性。

图2：Chrome 浏览器启用 WebMCP 测试功能示意图

设计 WebMCP Tools 的实战指南

针对搜索、筛选、收藏、提交反馈等常见页面能力，设计 WebMCP 工具时应遵循以下原则：

1. 明确工具功能与参数

每个工具应有清晰的功能定义和输入输出参数。例如，搜索工具需要支持关键词输入和结果数量限制，筛选工具应支持多维度条件，收藏工具需指定收藏项标识，反馈工具应包含反馈内容和类型。

2. 使用结构化数据标注

利用 JSON Schema 或自定义数据结构标注工具接口，方便 AI Agent 理解和调用。例如，使用 HTML 表单元素的 data-webmcp-tool 属性标明工具类型和参数。

3. 提供调用示例和错误反馈

工具应返回标准化的调用结果，包括成功状态、错误码和详细信息，便于 AI Agent 处理异常情况。

4. 兼容传统交互逻辑

设计时应兼顾传统用户交互，确保工具接口不会影响普通用户的使用体验。

5. 安全与权限控制

工具调用应限制权限范围，防止恶意利用。详见下文安全检查清单。

以下是一个搜索工具的简化示例：

const searchTool = {
  name: 'search',
  description: '在页面内执行关键词搜索',
  parameters: {
    keyword: 'string',
    maxResults: 'number'
  },
  execute: (params) => {
    // 实现搜索逻辑，返回结果
  }
};

通过这种方式，AI Agent 可调用 navigator.modelContextTesting.executeTool('search', {keyword: 'AI', maxResults: 10}) 实现精准搜索。

上线前的安全与权限检查清单

为了保障 WebMCP 工具的安全性和稳定性，建议上线前进行以下检查：

权限范围限定：确保工具调用权限最小化，避免暴露敏感接口。
输入参数校验：严格验证工具输入参数，防止注入攻击和异常操作。
调用频率限制：防止恶意刷接口导致资源耗尽。
错误处理机制：完善错误码和异常反馈，避免调用崩溃。
日志与监控：记录工具调用日志，及时发现异常行为。
用户隐私保护：确保工具调用符合隐私政策，不泄露用户敏感信息。
兼容性测试：在不同浏览器版本和设备上测试工具稳定性。

图3：WebMCP 工具安全与权限检查清单示意图

常见问题解答（FAQ）

1. WebMCP 与传统浏览器自动化技术有何不同？

传统自动化依赖 DOM 操作和脚本执行，易受页面结构变化影响；WebMCP 通过标准化工具接口，提供结构化调用方式，增强 AI Agent 的语义理解和操作稳定性。

2. 目前哪些浏览器支持 WebMCP？

WebMCP 目前处于实验/预览阶段，主要在 Chrome 149 及以上版本通过 origin trial 支持，本地测试需启用 chrome://flags/#enable-webmcp-testing，其他浏览器支持情况尚不明确，建议关注官方最新动态。

3. 如何设计适合 AI Agent 调用的 WebMCP 工具？

设计时需明确工具功能、参数和返回结果，使用结构化标注，兼顾安全权限控制，并提供详细调用示例和错误反馈。

4. WebMCP 是否会影响普通用户的网页体验？

合理设计的 WebMCP 工具不会影响普通用户交互，且通常以非侵入式方式存在，确保兼容性和用户体验。

5. 如何保障 WebMCP 工具的安全性？

应限制调用权限、校验输入参数、设置调用频率限制、完善错误处理、记录调用日志并遵守隐私政策，防止恶意利用和数据泄露。

参考来源

工具评测文章

工具选型与提示词资料

适合阅读工具评测、工具推荐、对比测评类文章后继续转化。

工具选型表 按场景、价格、上手难度和核心能力筛选合适的 AI 工具。 查看资料包 提示词模板包 提供写作、运营、编程、图片和视频生成常用提示词模板。 查看资料包

AI Stack Nav

登录

账户

注册

退出