[BUG] Chrome Extension Connection Issues - Undefined Data & Missing npm Configuration

[Gatescrispy]

Description

The BrowserTools MCP extension fails to establish a proper connection with the local server, sending undefined data in all requests. Additionally, there are npm configuration issues that need to be addressed.

Environment

• OS: macOS 24.3.0
• Node.js: Latest stable
• Chrome: Latest version
• Project path: /Users/cedrictantcheu/Downloads/chrome-extension/browser-tools-mcp

Current Behavior

1. Server starts successfully but receives malformed requests
2. Extension UI shows "Disconnected" status
3. All requests contain undefined data
4. Missing npm configuration in root directory

Error Logs

1. NPM Root Directory Error

npm error code ENOENT
npm error syscall open
npm error path /Users/cedrictantcheu/Downloads/chrome-extension/package.json
npm error errno -2
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory

2. Server Start Output

> @agentdeskai/[email protected] start
> tsc && node dist/browser-connector.js
Starting Browser Tools Server...
Requested port: 3025
Found available port: 3025
=== Browser Tools Server Started ===
Aggregator listening on http://0.0.0.0:3025

3. Server Logs (Continuous Pattern)

=== Received Extension Log ===
Request body: { 
  dataType: undefined, 
  timestamp: undefined, 
  hasSettings: false 
}
Warning: No data received in log request
Current log counts: {
  consoleLogs: 0,
  consoleErrors: 0,
  networkErrors: 0,
  networkSuccess: 0
}

Steps to Reproduce

1. Clone the repository
2. Navigate to /browser-tools-mcp/browser-tools-server
3. Run npm start
4. Load the extension in Chrome developer mode
5. Open DevTools > BrowserTools MCP tab
6. Observe:
   • Status remains "Disconnected"
   • Server logs show undefined data
   • Continuous failed connection attempts

Required Information

1. Expected data format for requests
2. Required npm scripts and configuration
3. Correct project structure documentation
4. Sample of valid request payload

Suggested Investigation Points

1. Data format validation in extension's background script
2. Server's request handling logic
3. Project setup requirements
4. npm script configuration

Possible Solutions

1. Document required data format
2. Add data validation on both ends
3. Provide setup guide with npm configuration
4. Include example of working request/response cycle

[DobroPY]

1. Replace in mcp.json file command with result from "which npx"

like

"browser-tools": {
"command": "/usr/local/bin/npx",
"args": [
"-y",
"@agentdeskai/[email protected]"
]
}

2. Try installing globally
   npm install -g @agentdeskai/browser-tools-mcp

Then modify config to use the global installation

"browser-tools": {
"command": "/usr/local/bin/browser-tools-mcp"
}