browser-console-mcp 1.0.0

package/dist/server/index.js

@@ -0,0 +1,154 @@
+/**
+ * Browser Console MCP Server
+ *
+ * This server runs in Cursor and handles commands from the browser console
+ */
+import { exec } from "node:child_process";
+import * as http from "node:http";
+import "node:process";
+import { WebSocketServer } from "ws";
+import { StaticFileServer } from "./static-server.js";
+class BrowserConsoleMCPServer {
+    constructor(port = 3000, staticPort = 3001) {
+        this.clients = new Map();
+        this.port = port;
+        // Create HTTP server
+        this.httpServer = http.createServer((req, res) => {
+            // Redirect to static server
+            res.writeHead(302, {
+                Location: `http://localhost:${staticPort}${req.url}`,
+            });
+            res.end();
+        });
+        // Attach WebSocket server to HTTP server
+        this.wss = new WebSocketServer({
+            server: this.httpServer,
+            path: "/ws", // Specify WebSocket path
+        });
+        this.staticServer = new StaticFileServer(staticPort);
+    }
+    /**
+     * Start server
+     */
+    start() {
+        this.setupWebSocketServer();
+        this.staticServer.start();
+        // Start HTTP server
+        this.httpServer.listen(this.port, () => {
+            console.info(`[MCP Server] HTTP server started on port ${this.port}`);
+            console.info(`[MCP Server] WebSocket server path: ws://localhost:${this.port}/ws`);
+            console.info(`[MCP Server] Static files will be redirected to port ${this.staticServer.getPort()}`);
+        });
+    }
+    /**
+     * Setup WebSocket server
+     */
+    setupWebSocketServer() {
+        this.wss.on("connection", (ws) => {
+            const clientId = this.generateClientId();
+            this.clients.set(clientId, { id: clientId, ws });
+            console.info(`[MCP Server] Client ${clientId} connected`);
+            ws.on("message", (data) => {
+                try {
+                    const message = JSON.parse(data.toString());
+                    this.handleClientMessage(clientId, message);
+                }
+                catch (error) {
+                    console.error("[MCP Server] Message parsing error:", error);
+                }
+            });
+            ws.on("close", () => {
+                this.clients.delete(clientId);
+                console.info(`[MCP Server] Client ${clientId} disconnected`);
+            });
+            ws.on("error", (error) => {
+                console.error(`[MCP Server] WebSocket error (client ${clientId}):`, error);
+            });
+        });
+        this.wss.on("error", (error) => {
+            console.error("[MCP Server] WebSocket server error:", error);
+        });
+    }
+    /**
+     * Handle client messages
+     */
+    handleClientMessage(clientId, message) {
+        const client = this.clients.get(clientId);
+        if (!client) {
+            console.error(`[MCP Server] Client not found: ${clientId}`);
+            return;
+        }
+        // Only log message type, not the full message content
+        console.info(`[MCP Server] Received message type ${message.type} from client ${clientId}`);
+        switch (message.type) {
+            case "command":
+                this.executeCommand(client, message.payload?.command);
+                break;
+            default:
+                this.sendErrorToClient(client, `Unknown message type: ${message.type}`);
+        }
+    }
+    /**
+     * Execute command
+     */
+    executeCommand(client, command) {
+        if (!command) {
+            this.sendErrorToClient(client, "Command is empty");
+            return;
+        }
+        console.info(`[MCP Server] Executing command: ${command}`);
+        exec(command, (error, stdout, stderr) => {
+            if (error) {
+                this.sendErrorToClient(client, `Command execution error: ${error.message}`);
+                return;
+            }
+            const result = stdout || stderr;
+            this.sendResultToClient(client, result);
+        });
+    }
+    /**
+     * Send result to client
+     */
+    sendResultToClient(client, result) {
+        const message = {
+            type: "command_result",
+            payload: { result },
+        };
+        client.ws.send(JSON.stringify(message));
+    }
+    /**
+     * Send error to client
+     */
+    sendErrorToClient(client, error) {
+        const message = {
+            type: "error",
+            payload: { error },
+        };
+        client.ws.send(JSON.stringify(message));
+    }
+    /**
+     * Generate client ID
+     */
+    generateClientId() {
+        return `client_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
+    }
+    /**
+     * Stop server
+     */
+    stop() {
+        this.httpServer.close();
+        this.wss.close();
+        this.staticServer.stop();
+        console.info("[MCP Server] Server closed");
+    }
+}
+// Create and start server instance
+const server = new BrowserConsoleMCPServer();
+server.start();
+// Handle process exit
+process.on("SIGINT", () => {
+    console.info("[MCP Server] Shutting down server...");
+    server.stop();
+    process.exit(0);
+});
+export default server;

package/dist/server/static-server.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Static File Server
+ *
+ * Used to serve client JS files
+ */
+export declare class StaticFileServer {
+    private server;
+    private port;
+    private clientJsPath;
+    constructor(port?: number, clientJsPath?: string);
+    /**
+     * Get server port
+     */
+    getPort(): number;
+    /**
+     * Handle HTTP requests
+     */
+    private handleRequest;
+    /**
+     * Serve client JS file
+     */
+    private serveClientJs;
+    /**
+     * Serve index page
+     */
+    private serveIndexPage;
+    /**
+     * Serve html2canvas file
+     */
+    private serveStaticFile;
+    /**
+     * Start server
+     */
+    start(): void;
+    /**
+     * Stop server
+     */
+    stop(): void;
+    /**
+     * Get content type based on file extension
+     */
+    private getContentType;
+}
+export default StaticFileServer;

package/dist/server/static-server.js

@@ -0,0 +1,205 @@
+/**
+ * Static File Server
+ *
+ * Used to serve client JS files
+ */
+import * as fs from "node:fs";
+import * as http from "node:http";
+import * as path from "node:path";
+export class StaticFileServer {
+    constructor(port = 3001, clientJsPath = path.join(process.cwd(), "dist", "client", "browser-console-mcp.js")) {
+        this.port = port;
+        this.clientJsPath = clientJsPath;
+        this.server = http.createServer(this.handleRequest.bind(this));
+    }
+    /**
+     * Get server port
+     */
+    getPort() {
+        return this.port;
+    }
+    /**
+     * Handle HTTP requests
+     */
+    handleRequest(req, res) {
+        // Set CORS headers, allow access from any origin
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+        res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+        // Handle preflight requests
+        if (req.method === "OPTIONS") {
+            res.writeHead(204);
+            res.end();
+            return;
+        }
+        // Only handle GET requests
+        if (req.method !== "GET") {
+            res.writeHead(405, { "Content-Type": "text/plain" });
+            res.end("Method Not Allowed");
+            return;
+        }
+        // Get request path
+        const requestPath = req.url || "/";
+        // Serve client JS file
+        if (requestPath === "/browser-console-mcp.js") {
+            this.serveClientJs(res);
+        }
+        // Serve html2canvas file
+        else if (requestPath === "/html2canvas.min.js") {
+            this.serveStaticFile(path.join(process.cwd(), "dist", "static", "html2canvas.min.js"), "application/javascript", res);
+        }
+        // Try to serve files from static directory
+        else if (requestPath.startsWith("/static/")) {
+            const filePath = path.join(process.cwd(), "dist", requestPath);
+            const contentType = this.getContentType(filePath);
+            this.serveStaticFile(filePath, contentType, res);
+        }
+        else {
+            // Return a simple HTML page explaining how to use
+            this.serveIndexPage(res);
+        }
+    }
+    /**
+     * Serve client JS file
+     */
+    serveClientJs(res) {
+        this.serveStaticFile(this.clientJsPath, "application/javascript", res);
+    }
+    /**
+     * Serve index page
+     */
+    serveIndexPage(res) {
+        const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Browser Console MCP</title>
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          line-height: 1.6;
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 20px;
+        }
+        pre {
+          background-color: #f5f5f5;
+          padding: 10px;
+          border-radius: 5px;
+          overflow-x: auto;
+        }
+        code {
+          font-family: monospace;
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Browser Console MCP</h1>
+      <p>This is the Browser Console MCP static file server.</p>
+      <p>Client JS file is available at the following URL:</p>
+      <pre><code>http://localhost:${this.port}/browser-console-mcp.js</code></pre>
+      
+      <h2>Usage</h2>
+      <p>Paste the following code in your browser console:</p>
+      <pre><code>// Load client script
+const script = document.createElement('script');
+script.src = 'http://localhost:${this.port}/browser-console-mcp.js';
+document.head.appendChild(script);</code></pre>
+      
+      <p>Then interact with the server using these commands:</p>
+      <pre><code>// Execute command
+mcp.exec('ls -la');
+
+// View help
+mcp.help();
+
+// Disconnect
+mcp.disconnect();
+
+// Reconnect
+mcp.reconnect();</code></pre>
+    </body>
+    </html>
+    `;
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(html);
+    }
+    /**
+     * Serve html2canvas file
+     */
+    serveStaticFile(filePath, contentType, res) {
+        try {
+            if (fs.existsSync(filePath)) {
+                const fileContent = fs.readFileSync(filePath);
+                // Set correct content type and cache control headers
+                res.writeHead(200, {
+                    "Content-Type": contentType,
+                    "Cache-Control": "no-cache, no-store, must-revalidate",
+                    Pragma: "no-cache",
+                    Expires: "0",
+                });
+                res.end(fileContent);
+                console.info(`[Static Server] Successfully served static file: ${filePath}`);
+            }
+            else {
+                console.error(`[Static Server] Static file not found: ${filePath}`);
+                res.writeHead(404, { "Content-Type": "text/plain" });
+                res.end("File not found");
+            }
+        }
+        catch (error) {
+            console.error("[Static Server] Error serving static file:", error);
+            res.writeHead(500, { "Content-Type": "text/plain" });
+            res.end("Internal Server Error");
+        }
+    }
+    /**
+     * Start server
+     */
+    start() {
+        this.server.listen(this.port, () => {
+            console.info(`[Static Server] Server started, listening on port ${this.port}`);
+            console.info(`[Static Server] Client JS file URL: http://localhost:${this.port}/browser-console-mcp.js`);
+        });
+    }
+    /**
+     * Stop server
+     */
+    stop() {
+        this.server.close(() => {
+            console.info("[Static Server] Server closed");
+        });
+    }
+    /**
+     * Get content type based on file extension
+     */
+    getContentType(filePath) {
+        const ext = path.extname(filePath).toLowerCase();
+        switch (ext) {
+            case ".html":
+                return "text/html";
+            case ".js":
+                return "application/javascript";
+            case ".css":
+                return "text/css";
+            case ".json":
+                return "application/json";
+            case ".png":
+                return "image/png";
+            case ".jpg":
+            case ".jpeg":
+                return "image/jpeg";
+            case ".gif":
+                return "image/gif";
+            case ".svg":
+                return "image/svg+xml";
+            case ".ico":
+                return "image/x-icon";
+            default:
+                return "application/octet-stream";
+        }
+    }
+}
+export default StaticFileServer;