🌐 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