MCP Browser - Extension Test Page

# 🌐 MCP Browser Extension Test

Interactive test page for extension features

Active Tab - Console Messages Being Captured
📌 How to use this page:

1. Make sure the MCP Browser extension is loaded
2. Check the extension badge - should show 🟢 (green) with port number
3. Click buttons below to generate console messages
4. Use Claude Code to query logs: `browser_query_logs(port=8875, last_n=10)`

## 📝 Console Logging Tests

Test console message capture with different severity levels

## 🎯 DOM Interaction Tests

### Click Test

Clicks: 0

Selector: `#clickTarget`

### Form Input

Value:

Selector: `#testInput`

### Dropdown Selection

Selected:

Selector: `#testSelect`

## ⚡ Extension Testing Commands

Use these commands in Claude Code to interact with this page:

### Query Logs

    browser_query_logs(
      port=8875,
      last_n=10
    )

Returns the last 10 console messages from this tab

### Filter by Level

    browser_query_logs(
      port=8875,
      level_filter=["error"],
      last_n=5
    )

Returns only error messages

### Take Screenshot

    browser_screenshot(
      port=8875
    )

Captures a screenshot of this page

## 🔬 Active Tab Filtering Test

The extension only captures console messages from the active tab.

Test Steps:

1. Click "Start Background Logging" - messages logged every 2 seconds
2. Switch to another tab - extension should ignore these messages
3. Switch back to this tab - messages should resume being captured
4. Query logs to verify only active-tab messages were captured

Background logging: Stopped

## 📊 Extension Status Check

- ✅ Extension loaded in Chrome
- ✅ Badge should show 🟢 (green) when connected
- ✅ Port number displayed in badge (e.g., "8875")
- ✅ Only this tab (active) sends console messages
- ✅ Background tabs are filtered out