全体起立！AI 版 Chrome 正式推出！前端开发进入新时代！-AI Express News

作为天天跟DOM、交互、浏览器打交道的前端人，谷歌这波WebMCP的发布，绝对不是一次普通更新，而是直接掀翻了AI与Web交互的底层逻辑。

Chrome团队正式推出 WebMCP（Web模型上下文协议），简单说：AI智能体终于不用再伪装成人，去点按钮、看页面了。

目前在Chrome 146预览版中，开启对应flag就能直接体验。它只靠一个API：navigator.modelContext，就让AI绕过整个前端UI，直接跟Web应用内核对话。

以前AI订机票，要截图标注、识别按钮、模拟点击，跟人一样一步步操作。现在有了WebMCP，Agent直接调用底层协议，一句话完成预订。用开发者的话说：WebMCP就是UI里的API。

这标志着，AI与网页的交互，正式从视觉模拟，跃迁到逻辑直连。

以前的Agent有多蠢？前端看了都头疼

现在主流AI Agent操作网页的方式，在前端眼里又笨又脆弱：

截屏识图，消耗大量token
抓取DOM，靠选择器定位元素
模拟点击，页面一改直接失效
反复确认状态，效率极低

网站稍微改个样式、换个结构，AI直接“瘫痪”。这种基于视觉的交互，本质上是强行让AI去适应人类的界面，而不是让网页适配AI。

WebMCP的出现，直接把这套方案彻底淘汰。

前端狂喜：不用写后端，JS直接给AI开“绿色通道”

更让前端关注的是，WebMCP根本不是谷歌单打独斗。早在2025年8月，谷歌+微软就联手共建这个标准，现在已开源在GitHub。

过去想让AI调用网站功能，前端还得去写Node、Python后端服务，跨语言、跨栈麻烦不断。 WebMCP直接把能力放在浏览器端，用我们最熟悉的前端JS就能实现：

不用额外部署服务
直接复用现有前端代码
统一用户与AI的界面与状态
权限、登录、状态全部同步

Chrome官方提供了两套接入方式，前端一看就懂：

声明式API：在HTML里直接定义标准操作，简单快捷

<form
  data-tool-name="search_products"
  data-tool-description="搜索商品">
  <input name="query" required>
  <button type="submit">搜索</button>
</form>

search_products("iphone")

命令式API：用JS实现复杂动态交互

if ('modelContext'in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "搜索商品",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" }
      },
      required: ["query"]
    },
    execute: async (params) => {
      returnawait api.search(params);
    }
  });
}