Getir WebMCP
WebMCP（Web模型上下文协议）是W3C提出的一项标准，它允许网站直接通过浏览器向AI代理公开结构化、可调用的工具。这个项目演示了如何 将WebMCP工具注入任何现有网站 --即使是那些本身不支持它的。
它的作用
脚本注册 10工具 上 navigator.modelContext 让AI代理：
- 搜索产品
- 浏览结果
- 将商品添加到购物车
- 管理购物篮
- 进行结账和付款
所有交互都通过DOM操作进行，不需要API令牌或身份验证。
工具
搜索和浏览
| 工具 | 参数 | 说明 |
|---|---|---|
getir_search | keyword （string） | 在搜索栏中键入关键字并返回匹配的产品 |
getir_list_results | -- | 返回当前可见的搜索结果，无需重新搜索 |
getir_view_product | index （number） | 打开产品的详细视图 |
getir_clear_search | -- | 清除搜索栏 |
购物车
| 工具 | 参数 | 说明 |
|---|---|---|
getir_add_to_cart | index （数字）， quantity？（数字） | 将产品从搜索结果中添加到购物车 |
getir_open_basket | -- | 打开购物篮面板并列出所有项目 |
getir_list_basket | -- | 返回已打开的购物篮面板中的商品 |
getir_basket_update | index （数字）， action （“增加”/“减少”）， times？（数字） | 更改篮子物品的数量 |
结账
| 工具 | 参数 | 说明 |
|---|---|---|
getir_go_to_checkout | -- | 单击“分隔数字”导航到 /sepet/ |
getir_proceed_to_payment | -- | 点击购物篮页面上的“Odemeye Gec” |
先决条件
- Chrome 146+ （Canary或Dev频道）
- 实验Web平台功能 标志已启用：
1. 打开 chrome://flags 1. 搜索“实验性Web平台功能” 1. 设置为 启用 1. 重新启动Chrome
用法
- 首选 获取.com 并登录您的帐户
- 打开Chrome工具(
Cmd+Option+I/F12) - 去 控制台 标签
- 复制以下内容
getir-webmcp-inject.js并将其粘贴到控制台中 - 按 Enter
您应该看到：
[WebMCP] Injecting Getir tools...
[WebMCP] Registered 10 Getir tools: getir_search, getir_list_results, ...这些工具现在可用于支持WebMCP的任何AI代理。
使用检查器扩展进行验证
安装 模型上下文工具检查器 Chrome扩展程序，用于直观检查和测试您注册的WebMCP工具。注入脚本后，打开扩展以查看列出的所有10个工具及其模式——您可以在连接AI代理之前直接从检查器面板调用它们以验证它们是否正常工作。
代理流示例
Agent: getir_search({ keyword: "su" })
→ Found 20 products: [0] Erikli Su 1.5L — 24,50 TL ...
Agent: getir_add_to_cart({ index: 0, quantity: 2 })
→ Added 2x "Erikli Su 1.5L" (24,50 TL) to cart.
Agent: getir_open_basket()
→ Basket opened (1 item, total: 49,00 TL): [0] Erikli Su — 2 — 49,00 TL
Agent: getir_go_to_checkout()
→ Navigated to basket page (/sepet/). Total: 49,00 TL.
Agent: getir_proceed_to_payment()
→ Clicked "Odemeye Gec". Navigated to payment page.运作原理
基于DOM的方法
脚本完全通过DOM进行交互，而不是拦截API调用（这需要管理auth令牌），这与用户的交互方式相同。它
- 使用React兼容设置输入值
setNativeValue()绕过React的合成事件系统 - 使用本机单击按钮
.click()电话 - 通过解析渲染的DOM元素读取产品数据
SPA导航处理
Getir是一个React单页应用程序。页面“导航”是客户端路由更改，意思是：
- JS上下文（和注册工具） 生存 跨页面转换
- 但是DOM在路由更改后异步更新
脚本使用两种策略来处理此问题：
waitForElement(selector)--用途MutationObserver等待DOM中出现特定元素waitForNavigation()--观察DOM突变，并在页面稳定800ms后解析，表示React已完成渲染
这比固定更可靠 sleep() 延迟是因为它适应了实际的网络和渲染条件。
WebMCP规范说明
根据 WebMCP提案:
- 通过注册的工具
registerTool()在页面的生命周期内持续存在 - 对于SPA，
provideContext()可以多次调用——“对于经常更改UI状态的单页web应用程序很有用” - A.
.well-known/webmcp正在讨论未来规范版本的预导航工具发现清单
在本地尝试WebMCP（演示页面）
回购包括 index.html -一个独立的演示页面，包含7个预先注册的WebMCP工具（计数器、待办事项列表、问候语表单、注释创建者），您可以使用这些工具学习API，而无需注入任何内容。
快速开始
- 打开
index.html在Chrome 146+中（启用了实验性Web平台功能） - 安装 模型上下文工具检查器 扩展
- 输入你的 Gemini API密钥 在扩展设置中
- 打开扩展程序，您将看到列出的所有已注册工具
- 让AI与页面交互（例如“将计数器设置为42”或“添加购买杂货的待办事项”）
这是在尝试Getir注入之前查看WebMCP运行情况的最简单方法。
项目结构
getir-webmcp-inject.js # The injectable script (paste into DevTools console on getir.com)
index.html # Standalone WebMCP demo page with built-in tools局限性
- 类选择器可能会损坏 --Getir在JS（样式化组件）中使用CSS，并使用哈希类名，如
.sc-47015d0-6。这些可能会因部署而异。如果工具停止查找元素，则选择器需要更新。 - 仅限单个选项卡 --工具在一个选项卡的页面上下文中注册。打开新选项卡需要重新注入。
- 无整页导航 --如果Getir执行硬页面重新加载（不是SPA导航），则注入的工具将丢失，必须重新注入。
- 需要Getir帐户 --您必须登录才能使用购物车和结账功能。
免责声明
这是一个 概念的实验证明 用于测试WebMCP功能。它不隶属于Getir或得到Getir的认可。按照Getir的服务条款负责任地使用。
参考文献
许可证
麻省理工学院