网络的新语言:Google 的 Web MCP 如何让每个网站都为智能体做好准备

多年来,网络是为人类的眼睛而构建的。点击这里,滚动那里,填写这个表单。每一个设计决策——颜色、布局、交互元素——都是为坐在屏幕前的人优化的。

但有些事情正在发生变化。智能体正在进入网络,而大多数网站还没有为它们做好准备。


问题:智能体在“盲目浏览”

想象一下,你拥有一个电商网站,并希望 AI 智能体能够使用它——搜索商品、添加到购物车、完成购买。在一个数百万智能体代表用户浏览网页并执行操作的未来,你的网站是否对这些智能体友好,可能决定你的业务成败。

今天,你有两个选择,但都不理想。

第一个是构建你自己的 MCP 服务器,并希望所有智能体都恰好安装了它。这几乎不可能发生。没有任何一个网站重要到可以被预加载进每个智能体的工具集中,成为永久组件。

第二个选择是依赖智能体的浏览器操作能力——让它截图、解析原始 HTML,然后自己判断该点击什么。这种方式正在变好,但从根本上说它是“非确定性的”。智能体需要在为人类设计的大量 HTML 代码中摸索:导航栏、广告位、Cookie 提示、动态内容。信息噪声大、速度慢,而且容易失败。智能体可能错过按钮、误读字段,或者直接放弃。

在 AI 智能体成为网页内容主要使用者的时代,一个难以被智能体导航的网站,终将被抛在后面。


解决方案:嵌入页面内部的 MCP

Google 的答案是 Web MCP —— 一种将 MCP 工具直接嵌入网站的方法,使得任何使用兼容浏览器的智能体在浏览页面时,都能自动发现当前页面可用的操作。

核心理念非常优雅。与其让智能体反向解析页面 HTML 来猜测能做什么,不如让页面主动告诉它。当智能体访问你的电商首页时,它会看到:search_productsget_categoriesapply_filters。当它进入商品详情页时,会看到:add_to_cartget_similar_products。不需要翻译层。不需要猜测。只有干净、结构化、确定性的操作——根据页面上下文逐页加载。

这正是 Web MCP 真正令人兴奋的关键点:工具不会预加载到智能体的全局上下文中,而是在智能体浏览时“当场发现”。正确的工具出现在正确的页面,当不再相关时自动消失。


两种构建方式

Web MCP 支持两种实现方式,取决于你的网站构建方式。

声明式:适用于静态 HTML

对于简单的静态页面,方法非常直接。你只需要在现有的表单元素上添加一些 HTML 属性——tool-nametool-description,以及每个输入字段的 tool-param-description。仅此而已。

当使用支持 Web MCP 的浏览器的智能体访问页面时,它会自动看到一个完整的 MCP 工具,包括名称、描述和输入结构——全部来自你添加的属性。不需要服务器,不需要 API,不需要额外基础设施。

你甚至可以监听智能体的操作。当智能体填写表单时,会触发一个特殊的 agent.invoked 事件,你可以返回结构化反馈——确认成功、返回错误,或者触发自定义 UI 元素,例如在提交前显示“请确认”的提示框。智能体获得标准的工具响应;人类用户也可以在最终提交前进行确认。

命令式:适用于动态应用

对于 React 或 Next.js 应用,命令式方式提供完全的编程控制。新版 Chrome 浏览器暴露了两个新的 navigator 函数——navigator.registerToolnavigator.unregisterTool,允许你将 MCP 工具绑定到特定组件。

模式很清晰:定义工具结构(名称、描述、输入结构、输出结构、处理函数),在组件挂载时注册工具,在组件卸载时取消注册。结果是一个实时、具备上下文感知能力的工具注册表,会随着用户或智能体的导航自动更新。

在一个演示的看板应用中,效果立刻显现。让智能体“为三个人准备晚餐制定所有任务计划,并将每一列作为一个类别”,它会实时创建列并填充卡片,自主完成,零错误。每个操作都通过类型化的 MCP 工具调用完成。没有猜测。没有幻觉。


一种新的上下文智能模式

Web MCP 不只是浏览器功能。它代表了一种新的架构模式,介于两种各有明显限制的方法之间。

传统 MCP 功能强大,但成本高:所有工具结构一开始就加载到智能体的上下文窗口中,无论是否需要。对于拥有数十个工具的智能体来说,这种开销非常大。

“技能”方法更轻量——初始只加载标题和描述,需要时再获取完整细节——但它牺牲了 MCP 在工具调用中提供的严格类型安全性。

Web MCP 在两者之间找到了平衡。工具根据上下文加载,由智能体所在位置触发,而不是预先配置。智能体在需要时拥有完整的结构保证,不需要时则不占用上下文成本。

这种“上下文驱动”的 MCP 模式——在正确时刻呈现正确工具,由任务和上下文驱动而非静态配置——很可能是更广泛智能体生态系统的发展方向。


开始使用

今天想要试验 Web MCP,你需要:

  1. Chrome Beta(需要最新版本)
  2. chrome://flags 中启用 Web MCP flag
  3. 安装 Model Context Protocol Tool Inspector Chrome 扩展

之后,无论是为静态页面添加声明式 HTML 属性,还是在动态应用中调用 navigator.registerTool,都可以轻松设置并在本地测试。

网络最初是为人类而建。Web MCP 正在开始让它也能被智能体理解。

Read more

前端真的能防录屏?EME(加密媒体扩展) DRM 反录屏原理 + 实战代码

前端真的能防录屏?EME(加密媒体扩展) DRM 反录屏原理 + 实战代码

🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战 🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程,从基础知识到项目实战 🌸《设计模式》专栏以实际的生活场景为案例进行讲解,让大家对设计模式有一个更清晰的理解 🌛《开源项目》本专栏主要介绍目前热门的开源项目,带大家快速了解并轻松上手使用 🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧,均附有完整的代码示例 ✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项,并分享一些日常开发的功能小技巧 💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程,让你快速掌握项目CI/CD,是2024年最新的实战教程 🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧,代码样例完整 👍《Spring Security》专栏中我们将逐步深入Spring Security的各个

By Ne0inhk

GHCTF2025-WEB题解:如何用SSTI绕过WAF黑名单(附实战payload)

从GHCTF2025实战出发:深度拆解SSTI黑名单绕过策略与高阶Payload构造 最近在GHCTF2025的WEB赛道上,一道看似简单的文件上传题目,却让不少选手陷入了“知道有洞,但payload总被拦截”的困境。这道题表面上是文件上传,实际上却是一场针对SSTI(服务器端模板注入)绕过能力的深度考验。我在实际测试中发现,很多选手能够快速识别出SSTI漏洞的存在,但在面对严格的黑名单过滤时,却往往束手无策,反复尝试的payload都被WAF无情拦截。 这种情况在真实的渗透测试和CTF比赛中并不少见。WAF(Web应用防火墙)的过滤规则越来越智能,传统的{ {7*7}}测试虽然能确认漏洞,但真正要执行命令、读取文件时,那些包含os、flag、__builtins__等关键词的payload几乎都会被第一时间拦截。这道题的精妙之处在于,它模拟了一个相对真实的防御环境——不仅过滤常见敏感词,还对下划线这种在Python反射中至关重要的字符进行了拦截。 本文将从实战角度出发,不局限于GHCTF2025这一道题目,而是系统性地探讨SSTI黑名单绕过的核心思路、技术原理和进阶技巧。我会结

By Ne0inhk

BERT文本分割-中文-通用领域部署教程:Docker镜像拉取与WebUI快速启动

BERT文本分割-中文-通用领域部署教程:Docker镜像拉取与WebUI快速启动 你是不是经常遇到这样的烦恼?拿到一份长长的会议记录、讲座文稿或者采访稿,从头到尾密密麻麻全是字,没有段落,没有结构,读起来特别费劲,想快速找到关键信息更是难上加难。 这背后的问题,就是文本分割。简单说,就是让机器像人一样,能看懂一篇长文章,知道哪里该分段,哪里是新的主题。这对于提升阅读体验和后续的自动化处理都至关重要。 今天,我就带你快速上手一个专门解决这个问题的工具:BERT文本分割-中文-通用领域模型。我们不用关心复杂的模型训练和算法细节,直接通过一个封装好的Docker镜像,几分钟内就能搭建一个带图形界面的Web应用,让你轻松体验AI给长文本“自动分段”的神奇能力。 1. 环境准备与快速部署 我们的目标很简单:拉取一个现成的Docker镜像,然后一键启动一个Web界面。你只需要有一台能运行Docker的电脑(Windows/macOS/Linux均可),不需要安装Python环境,更不需要配置复杂的深度学习框架。 1.1 第一步:确保Docker已安装 首先,打开你的终端(Wind

By Ne0inhk
35道常见的前端vue面试题,零基础入门到精通,收藏这篇就够了

35道常见的前端vue面试题,零基础入门到精通,收藏这篇就够了

来源 | https://segmentfault.com/a/1190000021936876 今天这篇文章给大家分享一些常见的前端vue面试题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 对于前端来说,尽管css、html、js是主要的基础知识,但是随着技术的不断发展,出现了很多优秀的mv*框架以及小程序框架。因此,对于前端开发者而言,需要对一些前端框架进行熟练掌握。这篇文章我们一起来聊一聊VUE及全家桶的常见面试问题。 1、请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发,而不需要考虑页面的表现,具体说来如下: Model代表数据模型:主要用于定义数据和操作的业务逻辑。 View代表页面展示组件(即dom展现形式):负责将数据模型转化成UI 展现出来。 ViewModel为model和view之间的桥梁:监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来,而View

By Ne0inhk