AI导哈

WebMCP购物脚本

一个可注入的JavaScript脚本，使AI代理能够通过WebMCP浏览器API在Getir上进行购物。

  • by hanifisenturk
  • JavaScript
  • 本地部署
  • 9 星标
  • 更新于
在 GitHub 查看 hanifisenturk/getir-web-mcp-test

使用说明

Getir WebMCP

一个可注入的JavaScript脚本，使AI代理能够在其上购物 盖蒂尔 使用 WebMCP 浏览器API。

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
    2. 搜索“实验性Web平台功能”
    3. 设置为 启用
    4. 重新启动Chrome

用法

  1. 首选 获取.com 并登录您的帐户
  2. 打开Chrome工具(Cmd+Option+I / F12)
  3. 去 控制台 标签
  4. 复制以下内容 getir-webmcp-inject.js 并将其粘贴到控制台中
  5. 按 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，而无需注入任何内容。

快速开始

  1. 打开 index.html 在Chrome 146+中（启用了实验性Web平台功能）
  2. 安装 模型上下文工具检查器 扩展
  3. 输入你的 Gemini API密钥 在扩展设置中
  4. 打开扩展程序，您将看到列出的所有已注册工具
  5. 让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的服务条款负责任地使用。

参考文献

许可证

麻省理工学院

相关 MCP