AI导哈

Shopify嵌入式应用调试工具

一个用于检查和调试Shopify嵌入式应用的单文件MCP服务器，通过本地WebSocket桥接与浏览器页面通信。

  • by alexanderhupfer
  • JavaScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 alexanderhupfer/shopify-iframe-dev-mcp

使用说明

shopify iframe开发mcp

shopify-iframe-dev-mcp.js 是一个单文件MCP服务器，用于从MCP客户端检查和调试Shopify嵌入式应用程序。它跑过去了 stdio 并公开了一个浏览器页面可以连接到的localhost WebSocket桥。

浏览器桥客户端嵌入在 shopify-iframe-dev-mcp.js 作为可读的JavaScript源代码，因此注入的代码段仍然是可检查的。

它做什么

  • 维护通过localhost网桥连接的浏览器会话
  • 允许MCP客户端选择活动浏览器会话
  • 在连接的iframe页面内执行任意JavaScript
  • 返回已嵌入正确网桥端口的复制粘贴浏览器控制台代码段
  • 如果首选网桥端口已被占用，则前进到下一个空闲的localhost端口

需求

  • Node.js 18或更新版本
  • @modelcontextprotocol/sdk 通过安装 npm install
  • 浏览器选项卡或iframe，您可以在其中粘贴桥接代码段

安装

npm install

运行服务器

从存储库根目录：

npm start

MCP传输是 stdio。浏览器桥绑定到 127.0.0.1.

环境变量：

  • BRIDGE_PORT 违约： 17373 浏览器网桥的首选启动端口。
  • BRIDGE_EVAL_TIMEOUT_MS 违约： 10000 超时时间（毫秒） bridge_eval.
  • BRIDGE_TOKEN 可选。 覆盖用于验证浏览器连接的默认随机生成的网桥令牌。

如果 BRIDGE_PORT 如果已在使用中，服务器将向上递增，直到找到空闲端口。

MCP客户端配置

配置您的MCP客户端以启动服务器：

node shopify-iframe-dev-mcp.js

如果您的客户端需要结构化命令配置，则等效形状为：

{
  "command": "node",
  "args": ["shopify-iframe-dev-mcp.js"]
}

如果MCP客户端支持包执行，您还可以将其指向已安装的CLI二进制名称，而不是脚本路径。

外露工具

  • bridge_status 返回网桥主机、解析端口、请求端口、身份验证模式、会话计数和当前活动会话。
  • bridge_browser_snippet 退货 wsUrl 加上缩小版 snippet 值直接粘贴到浏览器控制台。
  • bridge_list_sessions 列出连接的浏览器会话及其元数据。
  • bridge_select_session 将一个连接的会话标记为撤离的活动目标。
  • bridge_eval 在所选浏览器会话中运行任意JavaScript。

典型流程

  1. 启动服务器。
  2. 呼叫 bridge_browser_snippet.
  3. 复制返回的 snippet 值完全按原样。
  4. 将其粘贴到嵌入式应用程序iframe浏览器控制台中。
  5. 呼叫 bridge_list_sessions.
  6. 可选呼叫 bridge_select_session.
  7. 呼叫 bridge_eval.

示例 bridge_eval 有效载荷：

{
  "code": "return { title: document.title, url: location.href };",
  "timeoutMs": 5000
}

健康终点

该网桥还在以下位置公开了一个本地HTTP健康端点：

http://127.0.0.1:<resolved-port>/health

它返回解析的网桥主机、解析的网桥端口、请求的网桥端口和当前会话状态。

安全模型

  • 浏览器桥只监听 127.0.0.1.
  • 浏览器连接必须提供桥接令牌。
  • bridge_browser_snippet 自动包含正确的令牌和解析的端口。
  • 任何有权访问该代码段的人都可以在服务器进程的生命周期内连接到本地网桥。
  • bridge_eval 在连接的页面上下文中执行任意JavaScript。

备注

  • 这是一个仅用于开发的工具。
  • 该网桥仅是本地的，不会绕过连接页面上下文之外的浏览器同源限制。

相关 MCP