@thestarware/chrome-console-mcp/README.md

MCP Server for Chrome/Edge console logs and network requests via browser extension

# Chrome Console MCP Server

A Model Context Protocol (MCP) server that captures console logs from Chrome/Edge browsers via a browser extension and exposes them to MCP clients.

## Architecture

```
Web Page Console → Chrome Extension → HTTP Bridge → MCP Server → MCP Client
```

## Features

- **Real-time Console Log Capture**: Captures console.log, console.warn, console.error, etc.
- **MCP Resources**: Exposes logs as structured data via MCP protocol
- **Search & Filter**: Search logs by content, level, URL, and time range
- **Export Options**: Export logs in JSON, CSV, or text format
- **Statistics**: Get detailed statistics about captured logs
- **Cross-browser**: Works with Chrome and Edge

## Installation

### 1. Install Dependencies

```bash
npm install
```

### 2. Build the Project

```bash
npm run build:all
```

### 3. Load Browser Extension

**For Chrome:**
1. Open Chrome and go to `chrome://extensions/`
2. Enable "Developer mode"
3. Click "Load unpacked" and select the `dist/extension` directory

**For Edge:**
1. Open Edge and go to `edge://extensions/`
2. Enable "Developer mode"
3. Click "Load unpacked" and select the `dist/extension` directory

## Usage

### Start the MCP Server

```bash
# Start with default port (8765)
npm start

# Start with custom port
node dist/index.js --port 9000
```

### Test with MCP Inspector

```bash
npm run inspector
```

### Use the Chrome Extension

1. Open any webpage in Chrome
2. Open Developer Tools (F12)
3. Go to the "Console MCP" panel
4. Click "Start Capture" to begin capturing console logs
5. Console logs from the webpage will appear in the panel and be forwarded to the MCP server
6. Use the "Settings" button to configure the server port if needed
7. Use the "Filters" button to add custom console/network filters as needed

## MCP Resources

- `console://logs/all` - All captured console logs
- `console://logs/recent` - Last 100 console logs  
- `console://stats` - Statistics about captured logs

## MCP Tools

- `search_logs` - Search logs by term, level, or URL
- `export_logs` - Export logs in various formats
- `clear_logs` - Clear all stored logs
- `get_log_stats` - Get log statistics
- `get_server_info` - Get server information including current port

## Development

```bash
# Watch mode for TypeScript
npm run dev

# Build extension only
npm run extension:build

# Build everything
npm run build:all
```

## Troubleshooting

### Extension not connecting to MCP server

1. Ensure the MCP server is running: `npm start`
2. Check that the configured port (default 8765) is not blocked by firewall
3. Verify the extension is loaded in Chrome/Edge
4. Check the browser console for HTTP connection errors

### Console logs not appearing

1. Make sure "Start Capture" is clicked in the DevTools panel
2. Check that console logs are actually being generated on the webpage
3. Look for errors in the browser console and DevTools panel console

## File Structure

```
chrome-console-mcp/
├── src/                      # MCP server source code
│   ├── index.ts             # Main MCP server
│   ├── console-manager.ts   # Log management
│   ├── http-bridge.ts       # HTTP bridge (configurable port)
│   └── types.ts             # Type definitions
├── extension/               # Chrome extension
│   ├── manifest.json        # Extension manifest
│   ├── background.js        # Background script
│   └── devtools/           # DevTools panel
└── dist/                   # Built files
```