Chrome WebMCP：网页与 AI 通信指南

是什么？

WebMCP（Web Model Context Protocol）是 Chrome 浏览器内置的一套新 API，允许网页向浏览器注册工具（Tools），然后外部 AI 智能体（如 Claude、ChatGPT、本地 Agent 等）可以通过 Chrome DevTools Protocol 远程调用这些工具，实现 网页与 AI 的双向通信。

核心 API 挂载在 navigator.modelContext 上。

核心 API

1. 注册工具：registerTool()

navigator.modelContext.registerTool({
  name: "my_tool",                    // 工具名（唯一标识）
  description: "工具描述（给 AI 看）",  // AI 根据描述决定何时调用
  inputSchema: {                      // JSON Schema 定义输入参数
    type: "object",
    properties: {
      query: { type: "string", description: "搜索关键词" }
    },
    required: ["query"]
  },
  execute: async (args) => {          // AI 调用时执行的函数
    // args 是 JSON 字符串，需手动 parse
    const { query } = JSON.parse(args)
    return { result: `你搜的是: ${query}` }
  }
})

2. 获取已注册工具：getTools()

const tools = await navigator.modelContext.getTools()
// [{ name: "my_tool", description: "...", inputSchema: "...", ... }]

3. 执行工具：executeTool()

const tools = await navigator.modelContext.getTools()
const tool = tools[0]
// ⚠️ 第二个参数必须是 JSON 字符串，不能直接传 JS 对象
const result = await navigator.modelContext.executeTool(tool, '{"query":"hello"}')

实战：在 VitePress 中嵌入 WebMCP 工具

以下是一个完整的 Vue 3 组件示例，直接在 Markdown 中嵌入：

<script setup>
import { ref, onMounted } from 'vue'

const statusMessage = ref('等待 AI 连接...')

onMounted(() => {
  if (navigator.modelContext) {
    navigator.modelContext.registerTool({
      name: "fetch_vitepress_info",
      description: "抓取当前 VitePress 文章的作者、环境和状态",
      inputSchema: {
        type: "object",
        properties: {}
      },
      execute: async () => {
        statusMessage.value = 'AI 正在读取页面数据！'
        return {
          framework: "VitePress (Vue 3 Inside)",
          author: "极客站长",
          page_url: window.location.href,
          timestamp: new Date().toLocaleString()
        }
      }
    })
  }
})
</script>

<template>
  <div>
    <p>{{ statusMessage }}</p>
  </div>
</template>

踩坑记录

坑 1：executeTool 参数必须是 JSON 字符串

// ❌ 错误：直接传 JS 对象会报 "Failed to parse input arguments"
await mc.executeTool(tool, {})
await mc.executeTool(tool, { query: "hello" })

// ✅ 正确：传 JSON 字符串
await mc.executeTool(tool, '{}')
await mc.executeTool(tool, '{"query":"hello"}')

坑 2：getTools() 返回的 inputSchema 是字符串

const tools = await navigator.modelContext.getTools()
typeof tools[0].inputSchema  // "string"，不是 object

坑 3：需要 Chrome 新版并开启相应 Flag

目前 WebMCP 可能还需要在 chrome://flags 中开启相关实验性功能（如 #model-context-api 或类似 flag）。

工作流程全貌

┌──────────────┐    registerTool()    ┌──────────────────┐
│  网页 (JS)    │ ───────────────────▶ │  Chrome 浏览器    │
│  VitePress   │                      │  navigator.      │
│  Vue 3       │                      │  modelContext    │
└──────────────┘                      └────────┬─────────┘
                                                │ CDP / DevTools
                                                ▼
                                         ┌──────────────────┐
                                         │  外部 AI 智能体    │
                                         │  (Claude/GPT/    │
                                         │  本地 Agent)      │
                                         └──────────────────┘

1. 网页通过 registerTool() 注册工具到 Chrome
2. Chrome 在 DevTools 的 Application → WebMCP 面板展示已注册的工具
3. 外部 AI 通过 CDP (Chrome DevTools Protocol) 发现并调用这些工具
4. 工具执行结果返回给 AI，同时可更新网页 UI 状态

为什么重要？

传统上，AI 和网页的交互是单向的——AI 只能"看"网页内容。WebMCP 让网页可以主动向 AI 暴露可调用的能力，实现：

• AI 读取页面实时数据
• AI 操控页面行为（提交表单、切换状态等）
• 构建 "Agent-Native" 的 Web 应用
• Web 应用成为 AI Agent 的工具集

这是 Web 从"给人看"走向"给 AI 用"的关键一步。