browser-console-mcp 1.0.0

package/dist/browser/browser-mcp-server.js

@@ -0,0 +1,718 @@
+/**
+ * Browser MCP Server
+ *
+ * 在浏览器中运行的MCP服务器，提供页面内容访问和JavaScript执行能力给Cursor
+ */
+
+(() => {
+	// MCP服务器版本
+	const VERSION = "1.0.0";
+
+	// MCP协议常量
+	const MCP_VERSION = "2025-03-26";
+	const RPC_VERSION = "2.0";
+
+	// 工具定义
+	const TOOLS = {
+		// 执行JavaScript代码
+		executeJS: {
+			name: "executeJS",
+			description: "在当前页面上下文执行JavaScript代码",
+			inputSchema: {
+				type: "object",
+				properties: {
+					code: {
+						type: "string",
+						description: "要执行的JavaScript代码",
+					},
+				},
+				required: ["code"],
+			},
+			annotations: {
+				title: "执行JavaScript",
+				readOnlyHint: false,
+				destructiveHint: true,
+				idempotentHint: false,
+				openWorldHint: true,
+			},
+			handler: async (params) => {
+				try {
+					// 使用Function构造函数创建函数，然后执行
+					// 这允许代码访问window对象和DOM
+					const result = new Function(params.code || "return null;")();
+					return {
+						content: [
+							{
+								type: "text",
+								text: `操作成功: ${JSON.stringify(result)}`,
+							},
+						],
+					};
+				} catch (error) {
+					return {
+						isError: true,
+						content: [
+							{
+								type: "text",
+								text: `错误: ${error.message}`,
+							},
+						],
+					};
+				}
+			},
+		},
+
+		// 获取页面HTML
+		getPageHTML: {
+			name: "getPageHTML",
+			description: "获取当前页面的HTML内容",
+			inputSchema: {
+				type: "object",
+				properties: {},
+				required: [],
+			},
+			annotations: {
+				title: "获取页面HTML",
+				readOnlyHint: true,
+				openWorldHint: false,
+			},
+			handler: async (params) => {
+				try {
+					return {
+						html: document.documentElement.outerHTML,
+					};
+				} catch (error) {
+					throw new Error(`获取HTML出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 获取页面标题
+		getPageTitle: {
+			name: "getPageTitle",
+			description: "获取当前页面的标题",
+			inputSchema: {
+				type: "object",
+				properties: {},
+				required: [],
+			},
+			annotations: {
+				title: "获取页面标题",
+				readOnlyHint: true,
+				openWorldHint: false,
+			},
+			handler: async () => {
+				try {
+					return {
+						title: document.title,
+					};
+				} catch (error) {
+					throw new Error(`获取标题出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 获取元素
+		getElements: {
+			name: "getElements",
+			description: "使用CSS选择器获取页面上的元素",
+			inputSchema: {
+				type: "object",
+				properties: {
+					selector: {
+						type: "string",
+						description: "CSS选择器",
+					},
+				},
+				required: ["selector"],
+			},
+			annotations: {
+				title: "获取元素",
+				readOnlyHint: true,
+				openWorldHint: false,
+			},
+			handler: async (params) => {
+				try {
+					const elements = [...document.querySelectorAll(params.selector)];
+					return {
+						elements: elements.map((el) => ({
+							tagName: el.tagName,
+							id: el.id,
+							className: el.className,
+							textContent: el.textContent.trim().substring(0, 500),
+							attributes: [...el.attributes].reduce((attrs, attr) => {
+								attrs[attr.name] = attr.value;
+								return attrs;
+							}, {}),
+						})),
+					};
+				} catch (error) {
+					throw new Error(`获取元素出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 截取页面截图
+		captureScreenshot: {
+			name: "captureScreenshot",
+			description: "捕获当前页面的截图（使用html2canvas）",
+			inputSchema: {
+				type: "object",
+				properties: {
+					selector: {
+						type: "string",
+						description: "可选的CSS选择器，用于捕获特定元素",
+						default: "body",
+					},
+				},
+				required: [],
+			},
+			annotations: {
+				title: "截取页面截图",
+				readOnlyHint: true,
+				openWorldHint: false,
+			},
+			handler: async (params) => {
+				try {
+					// 检查html2canvas是否可用
+					if (typeof html2canvas === "undefined") {
+						throw new Error("html2canvas未加载，无法截图");
+					}
+
+					const selector = params.selector || "body";
+					const element = document.querySelector(selector);
+
+					if (!element) {
+						throw new Error(`找不到元素: ${selector}`);
+					}
+
+					const canvas = await html2canvas(element);
+					const dataUrl = canvas.toDataURL("image/png");
+
+					return {
+						imageDataUrl: dataUrl,
+					};
+				} catch (error) {
+					throw new Error(`截图出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 获取页面URL
+		getPageURL: {
+			name: "getPageURL",
+			description: "获取当前页面的URL",
+			inputSchema: {
+				type: "object",
+				properties: {},
+				required: [],
+			},
+			annotations: {
+				title: "获取页面URL",
+				readOnlyHint: true,
+				openWorldHint: false,
+			},
+			handler: async () => {
+				try {
+					return {
+						url: window.location.href,
+					};
+				} catch (error) {
+					throw new Error(`获取URL出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 点击元素
+		clickElement: {
+			name: "clickElement",
+			description: "点击页面上的元素",
+			inputSchema: {
+				type: "object",
+				properties: {
+					selector: {
+						type: "string",
+						description: "要点击元素的CSS选择器",
+					},
+				},
+				required: ["selector"],
+			},
+			annotations: {
+				title: "点击元素",
+				readOnlyHint: false,
+				destructiveHint: true,
+				idempotentHint: false,
+				openWorldHint: false,
+			},
+			handler: async (params) => {
+				try {
+					const element = document.querySelector(params.selector);
+
+					if (!element) {
+						throw new Error(`找不到元素: ${params.selector}`);
+					}
+
+					element.click();
+
+					return {
+						success: true,
+						message: `成功点击元素: ${params.selector}`,
+					};
+				} catch (error) {
+					throw new Error(`点击元素出错: ${error.message}`);
+				}
+			},
+		},
+
+		// 输入文本
+		inputText: {
+			name: "inputText",
+			description: "向输入框填入文本",
+			inputSchema: {
+				type: "object",
+				properties: {
+					selector: {
+						type: "string",
+						description: "输入框的CSS选择器",
+					},
+					text: {
+						type: "string",
+						description: "要输入的文本",
+					},
+				},
+				required: ["selector", "text"],
+			},
+			annotations: {
+				title: "输入文本",
+				readOnlyHint: false,
+				destructiveHint: true,
+				idempotentHint: false,
+				openWorldHint: false,
+			},
+			handler: async (params) => {
+				try {
+					const input = document.querySelector(params.selector);
+
+					if (!input) {
+						throw new Error(`找不到输入框: ${params.selector}`);
+					}
+
+					if (input.tagName !== "INPUT" && input.tagName !== "TEXTAREA") {
+						throw new Error(`选择的元素不是输入框: ${input.tagName}`);
+					}
+
+					input.value = params.text;
+
+					// 触发input事件以通知表单变化
+					input.dispatchEvent(new Event("input", { bubbles: true }));
+
+					return {
+						success: true,
+						message: `成功输入文本到: ${params.selector}`,
+					};
+				} catch (error) {
+					throw new Error(`输入文本出错: ${error.message}`);
+				}
+			},
+		},
+	};
+
+	// MCP服务器类
+	class BrowserMCPServer {
+		constructor() {
+			this.socket = null;
+			this.connected = false;
+			this.nextId = 1;
+			this.pendingRequests = new Map();
+
+			// 初始化并绑定方法
+			this.initSocket = this.initSocket.bind(this);
+			this.handleMessage = this.handleMessage.bind(this);
+			this.sendResponse = this.sendResponse.bind(this);
+			this.handleRequest = this.handleRequest.bind(this);
+		}
+
+		/**
+		 * 初始化WebSocket连接
+		 * @param {string} url WebSocket服务器URL
+		 */
+		initSocket(url) {
+			try {
+				// 关闭现有连接
+				if (this.socket) {
+					this.socket.close();
+				}
+
+				this.socket = new WebSocket(url);
+
+				this.socket.onopen = () => {
+					console.log("[Browser MCP] 已连接到Cursor");
+					this.connected = true;
+
+					// 发送初始化和capability协商消息
+					this.sendInitialization();
+				};
+
+				this.socket.onmessage = (event) => {
+					try {
+						const message = JSON.parse(event.data);
+						this.handleMessage(message);
+					} catch (error) {
+						console.error("[Browser MCP] 消息解析错误:", error);
+					}
+				};
+
+				this.socket.onclose = () => {
+					console.log("[Browser MCP] 连接已关闭");
+					this.connected = false;
+				};
+
+				this.socket.onerror = (error) => {
+					console.error("[Browser MCP] WebSocket错误:", error);
+				};
+
+				return true;
+			} catch (error) {
+				console.error("[Browser MCP] 初始化WebSocket出错:", error);
+				return false;
+			}
+		}
+
+		/**
+		 * 发送MCP初始化和能力协商消息
+		 */
+		sendInitialization() {
+			// 发送初始化消息
+			const message = {
+				jsonrpc: RPC_VERSION,
+				method: "initialize",
+				id: this.nextId++,
+				params: {
+					protocol_version: MCP_VERSION,
+					name: "Browser MCP Server",
+					version: VERSION,
+					vendor: "Browser Console MCP",
+					offerings: {
+						tools: Object.keys(TOOLS).map((key) => {
+							const tool = TOOLS[key];
+							return {
+								name: tool.name,
+								description: tool.description,
+								inputSchema: tool.inputSchema,
+								annotations: tool.annotations,
+							};
+						}),
+					},
+				},
+			};
+
+			// 发送消息
+			this.socket.send(JSON.stringify(message));
+
+			// 记录日志（避免直接发送中文日志）
+			console.log("Initialization message sent");
+		}
+
+		/**
+		 * 处理传入的MCP消息
+		 * @param {Object} message 消息对象
+		 */
+		handleMessage(message) {
+			try {
+				// 如果消息是字符串，则解析为JSON
+				const jsonMessage =
+					typeof message === "string" ? JSON.parse(message) : message;
+
+				// 处理特定类型的请求
+				if (jsonMessage.type === "execute_js" && jsonMessage.code) {
+					// 执行JavaScript代码
+					try {
+						const result = new Function(jsonMessage.code || "return null;")();
+						this.sendResponse(jsonMessage.requestId, { result });
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "get_page_html") {
+					// 获取页面HTML
+					try {
+						const html = document.documentElement.outerHTML;
+						this.sendResponse(jsonMessage.requestId, { html });
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "get_page_title") {
+					// 获取页面标题
+					try {
+						const title = document.title;
+						this.sendResponse(jsonMessage.requestId, { title });
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "get_elements" && jsonMessage.selector) {
+					// 获取元素
+					try {
+						const elements = [
+							...document.querySelectorAll(jsonMessage.selector),
+						];
+						const result = elements.map((el) => ({
+							tagName: el.tagName,
+							id: el.id,
+							className: el.className,
+							textContent: el.textContent.trim().substring(0, 500),
+							attributes: [...el.attributes].reduce((attrs, attr) => {
+								attrs[attr.name] = attr.value;
+								return attrs;
+							}, {}),
+						}));
+						this.sendResponse(jsonMessage.requestId, { elements: result });
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "capture_screenshot") {
+					// 截取页面截图
+					try {
+						if (typeof html2canvas === "undefined") {
+							throw new Error("html2canvas未加载，无法截图");
+						}
+
+						const selector = jsonMessage.selector || "body";
+						const element = document.querySelector(selector);
+
+						if (!element) {
+							throw new Error(`找不到元素: ${selector}`);
+						}
+
+						html2canvas(element)
+							.then((canvas) => {
+								const dataUrl = canvas.toDataURL("image/png");
+								this.sendResponse(jsonMessage.requestId, {
+									imageDataUrl: dataUrl,
+								});
+							})
+							.catch((error) => {
+								this.sendResponse(jsonMessage.requestId, {
+									error: error.message,
+								});
+							});
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "get_page_url") {
+					// 获取页面URL
+					try {
+						const url = window.location.href;
+						this.sendResponse(jsonMessage.requestId, { url });
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (jsonMessage.type === "click_element" && jsonMessage.selector) {
+					// 点击元素
+					try {
+						const element = document.querySelector(jsonMessage.selector);
+
+						if (!element) {
+							throw new Error(`找不到元素: ${jsonMessage.selector}`);
+						}
+
+						element.click();
+						this.sendResponse(jsonMessage.requestId, {
+							success: true,
+							message: `成功点击元素: ${jsonMessage.selector}`,
+						});
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				if (
+					jsonMessage.type === "input_text" &&
+					jsonMessage.selector &&
+					jsonMessage.text !== undefined
+				) {
+					// 输入文本
+					try {
+						const input = document.querySelector(jsonMessage.selector);
+
+						if (!input) {
+							throw new Error(`找不到输入框: ${jsonMessage.selector}`);
+						}
+
+						if (input.tagName !== "INPUT" && input.tagName !== "TEXTAREA") {
+							throw new Error(`选择的元素不是输入框: ${input.tagName}`);
+						}
+
+						input.value = jsonMessage.text;
+						input.dispatchEvent(new Event("input", { bubbles: true }));
+						this.sendResponse(jsonMessage.requestId, {
+							success: true,
+							message: `成功输入文本到: ${jsonMessage.selector}`,
+						});
+					} catch (error) {
+						this.sendResponse(jsonMessage.requestId, { error: error.message });
+					}
+					return;
+				}
+
+				// 处理RPC请求
+				if (jsonMessage.jsonrpc === RPC_VERSION) {
+					if (jsonMessage.method) {
+						// 这是一个请求
+						this.handleRequest(jsonMessage);
+					} else if (
+						jsonMessage.result !== undefined ||
+						jsonMessage.error !== undefined
+					) {
+						// 这是一个响应，目前不处理
+						console.log("收到响应:", jsonMessage);
+					}
+				}
+			} catch (error) {
+				console.error("消息解析错误:", error.message);
+			}
+		}
+
+		/**
+		 * 处理RPC请求
+		 * @param {Object} request 请求对象
+		 */
+		async handleRequest(request) {
+			const { id, method, params } = request;
+
+			// 处理初始化响应
+			if (method === "initialize/result") {
+				console.log("[Browser MCP] 初始化成功");
+				this.sendResponse(id, { success: true });
+				return;
+			}
+
+			// 处理工具调用
+			if (method === "executeToolCall") {
+				const { toolCall } = params;
+
+				if (!toolCall || !toolCall.name) {
+					this.sendErrorResponse(id, -32602, "无效的工具调用参数");
+					return;
+				}
+
+				const tool = Object.values(TOOLS).find((t) => t.name === toolCall.name);
+
+				if (!tool) {
+					this.sendErrorResponse(id, -32601, `找不到工具: ${toolCall.name}`);
+					return;
+				}
+
+				try {
+					const result = await tool.handler(toolCall.parameters || {});
+					this.sendResponse(id, { result });
+				} catch (error) {
+					this.sendErrorResponse(id, -32603, error.message);
+				}
+
+				return;
+			}
+
+			// 处理未知方法
+			this.sendErrorResponse(id, -32601, `方法不存在: ${method}`);
+		}
+
+		/**
+		 * 发送响应
+		 * @param {number} id 请求ID
+		 * @param {Object} result 响应结果
+		 */
+		sendResponse(id, result) {
+			if (!this.connected || !this.socket) {
+				console.error("[Browser MCP] 未连接，无法发送响应");
+				return;
+			}
+
+			const response = {
+				jsonrpc: RPC_VERSION,
+				id,
+				result,
+			};
+
+			this.socket.send(JSON.stringify(response));
+		}
+
+		/**
+		 * 发送错误响应
+		 * @param {number} id 请求ID
+		 * @param {number} code 错误代码
+		 * @param {string} message 错误消息
+		 */
+		sendErrorResponse(id, code, message) {
+			if (!this.connected || !this.socket) {
+				console.error("[Browser MCP] 未连接，无法发送错误响应");
+				return;
+			}
+
+			const response = {
+				jsonrpc: RPC_VERSION,
+				id,
+				error: {
+					code,
+					message,
+				},
+			};
+
+			this.socket.send(JSON.stringify(response));
+		}
+
+		/**
+		 * 发送请求
+		 * @param {string} method 方法名
+		 * @param {Object} params 参数
+		 * @returns {Promise} 响应承诺
+		 */
+		sendRequest(method, params) {
+			return new Promise((resolve, reject) => {
+				if (!this.connected || !this.socket) {
+					reject(new Error("未连接"));
+					return;
+				}
+
+				const id = this.nextId++;
+				const request = {
+					jsonrpc: RPC_VERSION,
+					id,
+					method,
+					params,
+				};
+
+				this.pendingRequests.set(id, { resolve, reject });
+			});
+		}
+	}
+
+	// 创建全局实例
+	window.browserMCP = new BrowserMCPServer();
+
+	// 暴露全局辅助函数，用于从控制台连接
+	window.connectMCP = (url = "ws://localhost:9000") => {
+		return window.browserMCP.initSocket(url);
+	};
+
+	console.log(
+		"[Browser MCP] MCP服务器已初始化，使用window.connectMCP(url)连接到Cursor",
+	);
+})();

package/dist/browser/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Browser MCP Relay Server
+ *
+ * This server is responsible for:
+ * 1. Providing static file service, including browser-mcp-server.js and browser-inject.js
+ * 2. Establishing WebSocket server to receive connections from browsers
+ * 3. Establishing communication with the MCP server in the browser
+ * 4. Communicating with Cursor via stdio (MCP protocol)
+ */
+export {};