browser-console-mcp 1.0.1 → 1.0.4

package/dist/client/browser-console-mcp.js

@@ -1,2 +1,2 @@
-var BrowserConsoleMCP=function(){"use strict";const e=new class{constructor(e="ws://localhost:7898/browser"){this.ws=null,this.connected=!1,this.commandHistory=[],this.historyIndex=-1,this.serverUrl=e}connect(){try{this.loadHtml2Canvas().then((()=>{this.ws=new WebSocket(this.serverUrl),this.ws.onopen=()=>{this.connected=!0,console.info("%c[MCP Client] Connected to server","color: green"),this.registerConsoleCommands()},this.ws.onmessage=e=>{try{const t=JSON.parse(e.data);this.handleServerMessage(t)}catch(e){console.error("[MCP Client] Message parsing error:",e)}},this.ws.onclose=()=>{this.connected=!1,console.info("%c[MCP Client] Disconnected from server","color: orange")},this.ws.onerror=e=>{console.error("[MCP Client] WebSocket error:",e)}})).catch((e=>{console.error("[MCP Client] Failed to load html2canvas:",e)}))}catch(e){console.error("[MCP Client] Connection error:",e)}}loadHtml2Canvas(){return new Promise(((e,t)=>{if(void 0!==window.html2canvas)return console.info("[MCP Client] html2canvas already loaded"),void e(!0);console.info("[MCP Client] Loading html2canvas...");const n=document.createElement("script");n.src="https://html2canvas.hertzen.com/dist/html2canvas.min.js",n.onload=()=>{console.info("[MCP Client] html2canvas loaded from CDN"),e(!0)},n.onerror=()=>{console.info("[MCP Client] Trying local path for html2canvas...");const n=document.createElement("script");n.src="/html2canvas.min.js",n.onload=()=>{console.info("[MCP Client] html2canvas loaded from local path"),e(!0)},n.onerror=n=>{console.info("[MCP Client] Trying unpkg CDN for html2canvas...");const o=document.createElement("script");o.src="https://unpkg.com/html2canvas/dist/html2canvas.min.js",o.onload=()=>{console.info("[MCP Client] html2canvas loaded from unpkg CDN"),e(!0)},o.onerror=e=>{console.error("[MCP Client] Failed to load html2canvas:",e),t(new Error("Unable to load html2canvas library, please ensure your network connection is working"))},document.head.appendChild(o)},document.head.appendChild(n)},document.head.appendChild(n)}))}handleServerMessage(e){if("get_page_html"!==e.type)if("execute_js"!==e.type)if("get_page_title"!==e.type)if("get_elements"!==e.type)if("capture_screenshot"!==e.type)if("get_page_url"!==e.type)if("click_element"!==e.type)if("input_text"!==e.type)switch(e.type){case"command_result":console.info(`%c[MCP Server] ${e.payload?.result}`,"color: blue");break;case"error":console.error(`[MCP Server] Error: ${e.payload?.error}`);break;case"connection_status":console.info(`%c[MCP Server] ${e.message}`,"color: green");break;default:console.info(`[MCP Server] Received message type: ${e.type}`)}else{const t=e.requestId,n=e.selector,o=e.text;try{const e=document.querySelector(n);if(!e)return void this.sendError(t,`Input field not found: ${n}`);if("INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName)return void this.sendError(t,`Selected element is not an input field: ${e.tagName}`);e.value=o,e.dispatchEvent(new Event("input",{bubbles:!0})),this.sendResponse(t,{success:!0,message:`Successfully input text to: ${n}`})}catch(e){this.sendError(t,`Error inputting text: ${e.message}`)}}else{const t=e.requestId,n=e.selector;try{const e=document.querySelector(n);if(!e)return void this.sendError(t,`Element not found: ${n}`);e.click(),this.sendResponse(t,{success:!0,message:`Successfully clicked element: ${n}`})}catch(e){this.sendError(t,`Error clicking element: ${e.message}`)}}else{const t=e.requestId;try{const e=window.location.href;this.sendResponse(t,{url:e})}catch(e){this.sendError(t,`Error getting URL: ${e.message}`)}}else{const t=e.requestId,n=e.selector||"body";(async()=>{try{await this.loadHtml2Canvas();const e=document.querySelector(n);if(!e)return void this.sendError(t,`Element not found: ${n}`);const o={allowTaint:!0,useCORS:!0,logging:!1,scale:window.devicePixelRatio||1,backgroundColor:null,removeContainer:!0,x:0,y:0,scrollX:0,scrollY:0,width:e.offsetWidth,height:e.offsetHeight},s=window.html2canvas;if(!s)return void this.sendError(t,"html2canvas library not properly loaded");let r=await s(e,o);if(!r)return void this.sendError(t,"Screenshot failed: unable to create canvas");const c=r.getContext("2d");if(c){const e=c.getImageData(0,0,r.width,r.height),t=this.getContentBounds(e);if(t){const e=document.createElement("canvas");e.width=t.width,e.height=t.height;const n=e.getContext("2d");n&&(n.drawImage(r,t.left,t.top,t.width,t.height,0,0,t.width,t.height),r=e)}}const i=r.toDataURL("image/png");this.sendResponse(t,{imageDataUrl:i})}catch(e){console.error("[MCP Client] Screenshot error:",e),this.sendError(t,`Screenshot error: ${e.message}`)}})()}else{const t=e.requestId,n=e.selector;try{const e=[...document.querySelectorAll(n)].map((e=>({tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent?.trim().substring(0,500)||"",attributes:[...e.attributes].reduce(((e,t)=>(e[t.name]=t.value,e)),{})})));this.sendResponse(t,{elements:e})}catch(e){this.sendError(t,`Error getting elements: ${e.message}`)}}else{const t=e.requestId;try{const e=document.title;this.sendResponse(t,{title:e})}catch(e){this.sendError(t,`Error getting title: ${e.message}`)}}else{const t=e.requestId,n=e.code;try{const e=new Function(n)();let o;try{o=JSON.stringify(e)}catch(t){o=String(e)}const s={requestId:t,result:o};this.ws?.send(JSON.stringify(s))}catch(e){console.error("[MCP Client] Error executing JavaScript:",e),this.sendError(t,`Error executing JavaScript: ${e.message}`)}}else{const t=e.requestId;try{const e=document.documentElement.outerHTML;this.sendResponse(t,{html:e})}catch(e){this.sendError(t,`Error getting HTML: ${e.message}`)}}}sendResponse(e,t){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server, cannot send response");const n={requestId:e,...t};this.ws.send(JSON.stringify(n))}sendError(e,t){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server, cannot send error response");const n={requestId:e,error:t};this.ws.send(JSON.stringify(n))}sendCommand(e){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server");const t={type:"command",payload:{command:e}};this.ws.send(JSON.stringify(t)),this.commandHistory.push(e),this.historyIndex=this.commandHistory.length}registerConsoleCommands(){window.mcp={exec:e=>(this.sendCommand(e),"Command sent"),disconnect:()=>(this.ws&&(this.ws.close(),this.ws=null),"Disconnected"),reconnect:()=>(this.connect(),"Reconnecting..."),help:()=>"\nMCP Client Commands:\n  mcp.exec(command) - Execute a command\n  mcp.disconnect() - Disconnect from server\n  mcp.reconnect() - Reconnect to server\n  mcp.help() - Show help information\n        "},console.info("%c[MCP Client] Console commands registered, use mcp.help() to see available commands","color: green")}getContentBounds(e){const{width:t,height:n,data:o}=e;let s=t,r=n,c=0,i=0,a=!1;for(let e=0;e<n;e++)for(let n=0;n<t;n++){o[4*(e*t+n)+3]>10&&(a=!0,s=Math.min(s,n),r=Math.min(r,e),c=Math.max(c,n),i=Math.max(i,e))}if(!a)return null;return s=Math.max(0,s-10),r=Math.max(0,r-10),c=Math.min(t-1,c+10),i=Math.min(n-1,i+10),{left:s,top:r,width:c-s+1,height:i-r+1}}};return e.connect(),e}();
+var BrowserConsoleMCP=function(){"use strict";const e=new class{constructor(e="ws://localhost:7898/browser"){this.ws=null,this.connected=!1,this.commandHistory=[],this.historyIndex=-1,this.serverUrl=e}connect(){try{this.loadHtml2Canvas().then((()=>{this.ws=new WebSocket(this.serverUrl),this.ws.onopen=()=>{this.connected=!0,console.log("%c[MCP Client] Connected to server","color: green"),this.registerConsoleCommands()},this.ws.onmessage=e=>{try{const t=JSON.parse(e.data);this.handleServerMessage(t)}catch(e){console.error("[MCP Client] Message parsing error:",e)}},this.ws.onclose=()=>{this.connected=!1,console.log("%c[MCP Client] Disconnected from server","color: orange")},this.ws.onerror=e=>{console.error("[MCP Client] WebSocket error:",e)}})).catch((e=>{console.error("[MCP Client] Failed to load html2canvas:",e)}))}catch(e){console.error("[MCP Client] Connection error:",e)}}loadHtml2Canvas(){return new Promise(((e,t)=>{if(void 0!==window.html2canvas)return console.log("[MCP Client] html2canvas already loaded"),void e(!0);console.log("[MCP Client] Loading html2canvas...");const n=document.createElement("script");n.src="https://html2canvas.hertzen.com/dist/html2canvas.min.js",n.onload=()=>{console.log("[MCP Client] html2canvas loaded from CDN"),e(!0)},n.onerror=()=>{console.log("[MCP Client] Trying local path for html2canvas...");const n=document.createElement("script");n.src="/html2canvas.min.js",n.onload=()=>{console.log("[MCP Client] html2canvas loaded from local path"),e(!0)},n.onerror=n=>{console.log("[MCP Client] Trying unpkg CDN for html2canvas...");const o=document.createElement("script");o.src="https://unpkg.com/html2canvas/dist/html2canvas.min.js",o.onload=()=>{console.log("[MCP Client] html2canvas loaded from unpkg CDN"),e(!0)},o.onerror=e=>{console.error("[MCP Client] Failed to load html2canvas:",e),t(new Error("Unable to load html2canvas library, please ensure your network connection is working"))},document.head.appendChild(o)},document.head.appendChild(n)},document.head.appendChild(n)}))}handleServerMessage(e){if("get_page_html"!==e.type)if("execute_js"!==e.type)if("get_page_title"!==e.type)if("get_elements"!==e.type)if("capture_screenshot"!==e.type)if("get_page_url"!==e.type)if("click_element"!==e.type)if("input_text"!==e.type)switch(e.type){case"command_result":console.log(`%c[MCP Server] ${e.payload?.result}`,"color: blue");break;case"error":console.error(`[MCP Server] Error: ${e.payload?.error}`);break;case"connection_status":console.log(`%c[MCP Server] ${e.message}`,"color: green");break;default:console.log(`[MCP Server] Received message type: ${e.type}`)}else{const t=e.requestId,n=e.selector,o=e.text;try{const e=document.querySelector(n);if(!e)return void this.sendError(t,`Input field not found: ${n}`);if("INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName)return void this.sendError(t,`Selected element is not an input field: ${e.tagName}`);e.value=o,e.dispatchEvent(new Event("input",{bubbles:!0})),this.sendResponse(t,{success:!0,message:`Successfully input text to: ${n}`})}catch(e){this.sendError(t,`Error inputting text: ${e.message}`)}}else{const t=e.requestId,n=e.selector;try{const e=document.querySelector(n);if(!e)return void this.sendError(t,`Element not found: ${n}`);e.click(),this.sendResponse(t,{success:!0,message:`Successfully clicked element: ${n}`})}catch(e){this.sendError(t,`Error clicking element: ${e.message}`)}}else{const t=e.requestId;try{const e=window.location.href;this.sendResponse(t,{url:e})}catch(e){this.sendError(t,`Error getting URL: ${e.message}`)}}else{const t=e.requestId,n=e.selector||"body";(async()=>{try{await this.loadHtml2Canvas();const e=document.querySelector(n);if(!e)return void this.sendError(t,`Element not found: ${n}`);const o={allowTaint:!0,useCORS:!0,logging:!1,scale:window.devicePixelRatio||1,backgroundColor:null,removeContainer:!0,x:0,y:0,scrollX:0,scrollY:0,width:e.offsetWidth,height:e.offsetHeight},s=window.html2canvas;if(!s)return void this.sendError(t,"html2canvas library not properly loaded");let r=await s(e,o);if(!r)return void this.sendError(t,"Screenshot failed: unable to create canvas");const c=r.getContext("2d");if(c){const e=c.getImageData(0,0,r.width,r.height),t=this.getContentBounds(e);if(t){const e=document.createElement("canvas");e.width=t.width,e.height=t.height;const n=e.getContext("2d");n&&(n.drawImage(r,t.left,t.top,t.width,t.height,0,0,t.width,t.height),r=e)}}const i=r.toDataURL("image/png");this.sendResponse(t,{imageDataUrl:i})}catch(e){console.error("[MCP Client] Screenshot error:",e),this.sendError(t,`Screenshot error: ${e.message}`)}})()}else{const t=e.requestId,n=e.selector;try{const e=[...document.querySelectorAll(n)].map((e=>({tagName:e.tagName,id:e.id,className:e.className,textContent:e.textContent?.trim().substring(0,500)||"",attributes:[...e.attributes].reduce(((e,t)=>(e[t.name]=t.value,e)),{})})));this.sendResponse(t,{elements:e})}catch(e){this.sendError(t,`Error getting elements: ${e.message}`)}}else{const t=e.requestId;try{const e=document.title;this.sendResponse(t,{title:e})}catch(e){this.sendError(t,`Error getting title: ${e.message}`)}}else{const t=e.requestId,n=e.code;try{const e=new Function(n)();let o;try{o=JSON.stringify(e)}catch(t){o=String(e)}const s={requestId:t,result:o};this.ws?.send(JSON.stringify(s))}catch(e){console.error("[MCP Client] Error executing JavaScript:",e),this.sendError(t,`Error executing JavaScript: ${e.message}`)}}else{const t=e.requestId;try{const e=document.documentElement.outerHTML;this.sendResponse(t,{html:e})}catch(e){this.sendError(t,`Error getting HTML: ${e.message}`)}}}sendResponse(e,t){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server, cannot send response");const n={requestId:e,...t};this.ws.send(JSON.stringify(n))}sendError(e,t){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server, cannot send error response");const n={requestId:e,error:t};this.ws.send(JSON.stringify(n))}sendCommand(e){if(!this.connected||!this.ws)return void console.error("[MCP Client] Not connected to server");const t={type:"command",payload:{command:e}};this.ws.send(JSON.stringify(t)),this.commandHistory.push(e),this.historyIndex=this.commandHistory.length}registerConsoleCommands(){window.mcp={exec:e=>(this.sendCommand(e),"Command sent"),disconnect:()=>(this.ws&&(this.ws.close(),this.ws=null),"Disconnected"),reconnect:()=>(this.connect(),"Reconnecting..."),help:()=>"\nMCP Client Commands:\n  mcp.exec(command) - Execute a command\n  mcp.disconnect() - Disconnect from server\n  mcp.reconnect() - Reconnect to server\n  mcp.help() - Show help information\n        "},console.log("%c[MCP Client] Console commands registered, use mcp.help() to see available commands","color: green")}getContentBounds(e){const{width:t,height:n,data:o}=e;let s=t,r=n,c=0,i=0,a=!1;for(let e=0;e<n;e++)for(let n=0;n<t;n++){o[4*(e*t+n)+3]>10&&(a=!0,s=Math.min(s,n),r=Math.min(r,e),c=Math.max(c,n),i=Math.max(i,e))}if(!a)return null;return s=Math.max(0,s-10),r=Math.max(0,r-10),c=Math.min(t-1,c+10),i=Math.min(n-1,i+10),{left:s,top:r,width:c-s+1,height:i-r+1}}};return e.connect(),e}();
 //# sourceMappingURL=browser-console-mcp.js.map

package/dist/client/index.js

@@ -22,7 +22,7 @@ class BrowserConsoleMCP {
                 this.ws = new WebSocket(this.serverUrl);
                 this.ws.onopen = () => {
                     this.connected = true;
-                    console.info("%c[MCP Client] Connected to server", "color: green");
+                    console.log("%c[MCP Client] Connected to server", "color: green");
                     this.registerConsoleCommands();
                 };
                 this.ws.onmessage = (event) => {
@@ -36,7 +36,7 @@ class BrowserConsoleMCP {
                 };
                 this.ws.onclose = () => {
                     this.connected = false;
-                    console.info("%c[MCP Client] Disconnected from server", "color: orange");
+                    console.log("%c[MCP Client] Disconnected from server", "color: orange");
                 };
                 this.ws.onerror = (error) => {
                     console.error("[MCP Client] WebSocket error:", error);
@@ -56,35 +56,35 @@ class BrowserConsoleMCP {
     loadHtml2Canvas() {
         return new Promise((resolve, reject) => {
             if (typeof window.html2canvas !== "undefined") {
-                console.info("[MCP Client] html2canvas already loaded");
+                console.log("[MCP Client] html2canvas already loaded");
                 resolve(true);
                 return;
             }
-            console.info("[MCP Client] Loading html2canvas...");
+            console.log("[MCP Client] Loading html2canvas...");
             // Prioritize loading html2canvas from CDN
             const script = document.createElement("script");
             script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
             script.onload = () => {
-                console.info("[MCP Client] html2canvas loaded from CDN");
+                console.log("[MCP Client] html2canvas loaded from CDN");
                 resolve(true);
             };
             script.onerror = () => {
                 // If CDN fails, try local path
-                console.info("[MCP Client] Trying local path for html2canvas...");
+                console.log("[MCP Client] Trying local path for html2canvas...");
                 const localScript = document.createElement("script");
                 localScript.src = "/html2canvas.min.js";
                 localScript.onload = () => {
-                    console.info("[MCP Client] html2canvas loaded from local path");
+                    console.log("[MCP Client] html2canvas loaded from local path");
                     resolve(true);
                 };
                 localScript.onerror = (err) => {
                     // Try using unpkg CDN
-                    console.info("[MCP Client] Trying unpkg CDN for html2canvas...");
+                    console.log("[MCP Client] Trying unpkg CDN for html2canvas...");
                     const unpkgScript = document.createElement("script");
                     unpkgScript.src =
                         "https://unpkg.com/html2canvas/dist/html2canvas.min.js";
                     unpkgScript.onload = () => {
-                        console.info("[MCP Client] html2canvas loaded from unpkg CDN");
+                        console.log("[MCP Client] html2canvas loaded from unpkg CDN");
                         resolve(true);
                     };
                     unpkgScript.onerror = (err) => {
@@ -313,17 +313,17 @@ class BrowserConsoleMCP {
         // Handle other message types
         switch (message.type) {
             case "command_result":
-                console.info(`%c[MCP Server] ${message.payload?.result}`, "color: blue");
+                console.log(`%c[MCP Server] ${message.payload?.result}`, "color: blue");
                 break;
             case "error":
                 console.error(`[MCP Server] Error: ${message.payload?.error}`);
                 break;
             case "connection_status":
-                console.info(`%c[MCP Server] ${message.message}`, "color: green");
+                console.log(`%c[MCP Server] ${message.message}`, "color: green");
                 break;
             default:
                 // Only log message type, not full message content
-                console.info(`[MCP Server] Received message type: ${message.type}`);
+                console.log(`[MCP Server] Received message type: ${message.type}`);
         }
     }
     /**
@@ -401,7 +401,7 @@ MCP Client Commands:
         `;
             },
         };
-        console.info("%c[MCP Client] Console commands registered, use mcp.help() to see available commands", "color: green");
+        console.log("%c[MCP Client] Console commands registered, use mcp.help() to see available commands", "color: green");
     }
     /**
      * Get image content boundaries, remove excess whitespace

package/dist/server/index.js

@@ -35,9 +35,9 @@ class BrowserConsoleMCPServer {
         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()}`);
+            console.log(`[MCP Server] HTTP server started on port ${this.port}`);
+            console.log(`[MCP Server] WebSocket server path: ws://localhost:${this.port}/ws`);
+            console.log(`[MCP Server] Static files will be redirected to port ${this.staticServer.getPort()}`);
         });
     }
     /**
@@ -47,7 +47,7 @@ class BrowserConsoleMCPServer {
         this.wss.on("connection", (ws) => {
             const clientId = this.generateClientId();
             this.clients.set(clientId, { id: clientId, ws });
-            console.info(`[MCP Server] Client ${clientId} connected`);
+            console.log(`[MCP Server] Client ${clientId} connected`);
             ws.on("message", (data) => {
                 try {
                     const message = JSON.parse(data.toString());
@@ -59,7 +59,7 @@ class BrowserConsoleMCPServer {
             });
             ws.on("close", () => {
                 this.clients.delete(clientId);
-                console.info(`[MCP Server] Client ${clientId} disconnected`);
+                console.log(`[MCP Server] Client ${clientId} disconnected`);
             });
             ws.on("error", (error) => {
                 console.error(`[MCP Server] WebSocket error (client ${clientId}):`, error);
@@ -79,7 +79,7 @@ class BrowserConsoleMCPServer {
             return;
         }
         // Only log message type, not the full message content
-        console.info(`[MCP Server] Received message type ${message.type} from client ${clientId}`);
+        console.log(`[MCP Server] Received message type ${message.type} from client ${clientId}`);
         switch (message.type) {
             case "command":
                 this.executeCommand(client, message.payload?.command);
@@ -96,7 +96,7 @@ class BrowserConsoleMCPServer {
             this.sendErrorToClient(client, "Command is empty");
             return;
         }
-        console.info(`[MCP Server] Executing command: ${command}`);
+        console.log(`[MCP Server] Executing command: ${command}`);
         exec(command, (error, stdout, stderr) => {
             if (error) {
                 this.sendErrorToClient(client, `Command execution error: ${error.message}`);
@@ -139,7 +139,7 @@ class BrowserConsoleMCPServer {
         this.httpServer.close();
         this.wss.close();
         this.staticServer.stop();
-        console.info("[MCP Server] Server closed");
+        console.log("[MCP Server] Server closed");
     }
 }
 // Create and start server instance
@@ -147,7 +147,7 @@ const server = new BrowserConsoleMCPServer();
 server.start();
 // Handle process exit
 process.on("SIGINT", () => {
-    console.info("[MCP Server] Shutting down server...");
+    console.log("[MCP Server] Shutting down server...");
     server.stop();
     process.exit(0);
 });

package/dist/server/static-server.js

@@ -141,7 +141,7 @@ mcp.reconnect();</code></pre>
                     Expires: "0",
                 });
                 res.end(fileContent);
-                console.info(`[Static Server] Successfully served static file: ${filePath}`);
+                console.log(`[Static Server] Successfully served static file: ${filePath}`);
             }
             else {
                 console.error(`[Static Server] Static file not found: ${filePath}`);
@@ -160,8 +160,8 @@ mcp.reconnect();</code></pre>
      */
     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`);
+            console.log(`[Static Server] Server started, listening on port ${this.port}`);
+            console.log(`[Static Server] Client JS file URL: http://localhost:${this.port}/browser-console-mcp.js`);
         });
     }
     /**
@@ -169,7 +169,7 @@ mcp.reconnect();</code></pre>
      */
     stop() {
         this.server.close(() => {
-            console.info("[Static Server] Server closed");
+            console.log("[Static Server] Server closed");
         });
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-console-mcp",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "MCP client for browser console and server for Cursor",
   "main": "dist/server/index.js",
   "type": "module",
@@ -36,6 +36,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.17.46",
     "@types/ws": "^8.18.1",
+    "html2canvas": "^1.4.1",
     "rollup": "^4.12.1",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.8.1",
@@ -43,10 +44,17 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.5.0",
-    "html2canvas": "^1.4.1",
     "ws": "^8.16.0",
     "zod": "^3.24.4"
   },
+  "peerDependencies": {
+    "html2canvas": "^1.4.1"
+  },
+  "peerDependenciesMeta": {
+    "html2canvas": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsc",
     "build:client": "rollup -c",

package/readme.md

@@ -2,10 +2,11 @@
 
 Browser console MCP client and Cursor MCP server. Let your AI assistant control the browser!
 
-<details>
-<summary>English (Default)</summary>
+**Language**: [English](#english) | [中文](#中文) | [日本語](#日本語) | [한국어](#한국어)
 
-## Introduction
+## English
+
+### Introduction
 
 Browser Console MCP is a tool that allows Cursor's Claude AI assistant to interact with the browser through the MCP (Model Context Protocol) protocol. It provides a browser client and an MCP server, enabling the AI assistant to perform the following operations:
 
@@ -17,44 +18,40 @@ Browser Console MCP is a tool that allows Cursor's Claude AI assistant to intera
 - Click page elements
 - Input text into form fields
 
-## Installation
-
-### Global Installation
-
-```bash
-pnpm add -g browser-console-mcp
-```
-
-### Local Installation
+### Usage
 
-```bash
-pnpm add browser-console-mcp
-```
-
-## Usage
-
-### Start MCP Server
-
-```bash
-# If installed globally
-browser-console-mcp start
-
-# If installed locally
-pnpx browser-console-mcp start
-```
-
-### Inject MCP Client in Browser
+#### Inject MCP Client in Browser
 
 Execute the following code in your browser console:
 
 ```javascript
-// Inject MCP server
+// ======== IMPORTANT: Inject MCP server ========
 var s = document.createElement('script');
 s.src = 'http://localhost:7898/browser-inject.js';
 document.head.appendChild(s);
+// ==============================================
+```
+
+#### MCP Configuration
+
+Create a `.cursor/mcp.json` file in your home directory:
+
+```json
+{
+  "mcpServers": {
+    "browser-mcp": {
+      "command": "pnpx",
+      "enable": true,
+      "args": ["-y", "browser-console-mcp"],
+      "env": {
+        "PORT": "7898"
+      }
+    }
+  }
+}
 ```
 
-### Using in Cursor
+#### Using in Cursor
 
 In Cursor, your AI assistant can now use the following tools:
 
@@ -67,32 +64,13 @@ In Cursor, your AI assistant can now use the following tools:
 - `mcp_browser-mcp_clickElement`: Click page elements
 - `mcp_browser-mcp_inputText`: Input text into form fields
 
-## Development
-
-```bash
-# Install dependencies
-pnpm install
-
-# Build project
-pnpm build:all
-
-# Start development mode
-pnpm dev
-```
-
-## License
+### License
 
 MIT
-</details>
 
-<details>
-<summary>中文</summary>
-
-# Browser Console MCP
+## 中文
 
-浏览器控制台的MCP客户端和Cursor的MCP服务器。让你的AI助手能够控制浏览器！
-
-## 简介
+### 简介
 
 Browser Console MCP 是一个工具，允许 Cursor 的 Claude AI 助手通过 MCP（Model Context Protocol）协议与浏览器进行交互。它提供了一个浏览器客户端和一个 MCP 服务器，使 AI 助手能够执行以下操作：
 
@@ -104,44 +82,40 @@ Browser Console MCP 是一个工具，允许 Cursor 的 Claude AI 助手通过 M
 - 点击页面元素
 - 向输入框填入文本
 
-## 安装
-
-### 全局安装
-
-```bash
-pnpm add -g browser-console-mcp
-```
-
-### 本地安装
-
-```bash
-pnpm add browser-console-mcp
-```
-
-## 使用方法
-
-### 启动 MCP 服务器
-
-```bash
-# 全局安装的情况
-browser-console-mcp start
+### 使用方法
 
-# 本地安装的情况
-pnpx browser-console-mcp start
-```
-
-### 在浏览器中注入 MCP 客户端
+#### 在浏览器中注入 MCP 客户端
 
 在浏览器控制台中执行以下代码：
 
 ```javascript
-// 注入MCP服务器
+// ======== 重要: 注入MCP服务器 ========
 var s = document.createElement('script');
 s.src = 'http://localhost:7898/browser-inject.js';
 document.head.appendChild(s);
+// ====================================
 ```
 
-### 在 Cursor 中使用
+#### MCP 配置
+
+在您的主目录中创建 `.cursor/mcp.json` 文件：
+
+```json
+{
+  "mcpServers": {
+    "browser-mcp": {
+      "command": "pnpx",
+      "enable": true,
+      "args": ["-y", "browser-console-mcp"],
+      "env": {
+        "PORT": "7898"
+      }
+    }
+  }
+}
+```
+
+#### 在 Cursor 中使用
 
 在 Cursor 中，你的 AI 助手现在可以使用以下工具：
 
@@ -154,32 +128,13 @@ document.head.appendChild(s);
 - `mcp_browser-mcp_clickElement`: 点击页面元素
 - `mcp_browser-mcp_inputText`: 向输入框填入文本
 
-## 开发
-
-```bash
-# 安装依赖
-pnpm install
-
-# 构建项目
-pnpm build:all
-
-# 启动开发模式
-pnpm dev
-```
-
-## 许可证
+### 许可证
 
 MIT
-</details>
-
-<details>
-<summary>日本語</summary>
 
-# Browser Console MCP
-
-ブラウザコンソールのMCPクライアントとCursorのMCPサーバー。AIアシスタントにブラウザを制御させましょう！
+## 日本語
 
-## はじめに
+### はじめに
 
 Browser Console MCPは、CursorのClaude AIアシスタントがMCP（Model Context Protocol）プロトコルを通じてブラウザと対話できるようにするツールです。ブラウザクライアントとMCPサーバーを提供し、AIアシスタントが以下の操作を実行できるようにします：
 
@@ -191,44 +146,40 @@ Browser Console MCPは、CursorのClaude AIアシスタントがMCP（Model Cont
 - ページ要素のクリック
 - 入力フィールドへのテキスト入力
 
-## インストール
-
-### グローバルインストール
+### 使用方法
 
-```bash
-pnpm add -g browser-console-mcp
-```
-
-### ローカルインストール
-
-```bash
-pnpm add browser-console-mcp
-```
-
-## 使用方法
-
-### MCPサーバーの起動
-
-```bash
-# グローバルインストールの場合
-browser-console-mcp start
-
-# ローカルインストールの場合
-pnpx browser-console-mcp start
-```
-
-### ブラウザにMCPクライアントを注入
+#### ブラウザにMCPクライアントを注入
 
 ブラウザのコンソールで以下のコードを実行します：
 
 ```javascript
-// MCPサーバーを注入
+// ======== 重要: MCPサーバーを注入 ========
 var s = document.createElement('script');
 s.src = 'http://localhost:7898/browser-inject.js';
 document.head.appendChild(s);
+// ========================================
 ```
 
-### Cursorでの使用
+#### MCP設定
+
+ホームディレクトリに `.cursor/mcp.json` ファイルを作成します：
+
+```json
+{
+  "mcpServers": {
+    "browser-mcp": {
+      "command": "pnpx",
+      "enable": true,
+      "args": ["-y", "browser-console-mcp"],
+      "env": {
+        "PORT": "7898"
+      }
+    }
+  }
+}
+```
+
+#### Cursorでの使用
 
 Cursorでは、AIアシスタントが以下のツールを使用できるようになります：
 
@@ -241,32 +192,13 @@ Cursorでは、AIアシスタントが以下のツールを使用できるよう
 - `mcp_browser-mcp_clickElement`: ページ要素をクリック
 - `mcp_browser-mcp_inputText`: 入力フィールドにテキストを入力
 
-## 開発
-
-```bash
-# 依存関係のインストール
-pnpm install
-
-# プロジェクトのビルド
-pnpm build:all
-
-# 開発モードの起動
-pnpm dev
-```
-
-## ライセンス
+### ライセンス
 
 MIT
-</details>
 
-<details>
-<summary>한국어</summary>
+## 한국어
 
-# Browser Console MCP
-
-브라우저 콘솔용 MCP 클라이언트와 Cursor용 MCP 서버. AI 어시스턴트가 브라우저를 제어할 수 있게 해보세요!
-
-## 소개
+### 소개
 
 Browser Console MCP는 Cursor의 Claude AI 어시스턴트가 MCP(Model Context Protocol) 프로토콜을 통해 브라우저와 상호작용할 수 있게 해주는 도구입니다. 브라우저 클라이언트와 MCP 서버를 제공하여 AI 어시스턴트가 다음 작업을 수행할 수 있도록 합니다:
 
@@ -278,44 +210,40 @@ Browser Console MCP는 Cursor의 Claude AI 어시스턴트가 MCP(Model Context
 - 페이지 요소 클릭하기
 - 입력 필드에 텍스트 입력하기
 
-## 설치
-
-### 전역 설치
-
-```bash
-pnpm add -g browser-console-mcp
-```
-
-### 로컬 설치
-
-```bash
-pnpm add browser-console-mcp
-```
-
-## 사용 방법
-
-### MCP 서버 시작하기
+### 사용 방법
 
-```bash
-# 전역 설치한 경우
-browser-console-mcp start
-
-# 로컬 설치한 경우
-pnpx browser-console-mcp start
-```
-
-### 브라우저에 MCP 클라이언트 주입하기
+#### 브라우저에 MCP 클라이언트 주입하기
 
 브라우저 콘솔에서 다음 코드를 실행하세요:
 
 ```javascript
-// MCP 서버 주입
+// ======== 중요: MCP 서버 주입 ========
 var s = document.createElement('script');
 s.src = 'http://localhost:7898/browser-inject.js';
 document.head.appendChild(s);
+// ===================================
+```
+
+#### MCP 구성
+
+홈 디렉토리에 `.cursor/mcp.json` 파일을 생성하세요:
+
+```json
+{
+  "mcpServers": {
+    "browser-mcp": {
+      "command": "pnpx",
+      "enable": true,
+      "args": ["-y", "browser-console-mcp"],
+      "env": {
+        "PORT": "7898"
+      }
+    }
+  }
+}
 ```
 
-### Cursor에서 사용하기
+#### Cursor에서 사용하기
 
 Cursor에서 AI 어시스턴트는 이제 다음 도구들을 사용할 수 있습니다:
 
@@ -328,20 +256,6 @@ Cursor에서 AI 어시스턴트는 이제 다음 도구들을 사용할 수 있
 - `mcp_browser-mcp_clickElement`: 페이지 요소 클릭하기
 - `mcp_browser-mcp_inputText`: 입력 필드에 텍스트 입력하기
 
-## 개발
-
-```bash
-# 의존성 설치
-pnpm install
-
-# 프로젝트 빌드
-pnpm build:all
-
-# 개발 모드 시작
-pnpm dev
-```
-
-## 라이선스
+### 라이선스
 
 MIT
-</details>