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 startMCP传输是 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。
典型流程
- 启动服务器。
- 呼叫
bridge_browser_snippet. - 复制返回的
snippet值完全按原样。 - 将其粘贴到嵌入式应用程序iframe浏览器控制台中。
- 呼叫
bridge_list_sessions. - 可选呼叫
bridge_select_session. - 呼叫
bridge_eval.
示例 bridge_eval 有效载荷：
{
"code": "return { title: document.title, url: location.href };",
"timeoutMs": 5000
}健康终点
该网桥还在以下位置公开了一个本地HTTP健康端点：
http://127.0.0.1:/health它返回解析的网桥主机、解析的网桥端口、请求的网桥端口和当前会话状态。
安全模型
- 浏览器桥只监听
127.0.0.1. - 浏览器连接必须提供桥接令牌。
bridge_browser_snippet自动包含正确的令牌和解析的端口。- 任何有权访问该代码段的人都可以在服务器进程的生命周期内连接到本地网桥。
bridge_eval在连接的页面上下文中执行任意JavaScript。
备注
- 这是一个仅用于开发的工具。
- 该网桥仅是本地的，不会绕过连接页面上下文之外的浏览器同源限制。