- Implement comprehensive debug toolbar showing project name, session ID, client info, and uptime
- Add Django-style draggable toolbar with terminal aesthetics for multi-client identification
- Support custom JavaScript/CSS injection into all pages with session persistence
- Auto-injection system hooks into page creation lifecycle for seamless operation
- LLM-safe HTML comment wrapping prevents confusion during automated testing
- 5 new MCP tools: enable_debug_toolbar, inject_custom_code, list_injections, disable_debug_toolbar, clear_injections
- Session-based configuration storage with auto-injection on new pages
- Solves multi-parallel MCP client identification problem for development workflows
Tools added:
- browser_enable_debug_toolbar: Configure project identification overlay
- browser_inject_custom_code: Add custom JS/CSS to all session pages
- browser_list_injections: View active injection configuration
- browser_disable_debug_toolbar: Remove debug toolbar
- browser_clear_injections: Clean up custom injections
Files modified:
- src/tools/codeInjection.ts: Complete injection system (547 lines)
- src/context.ts: Added injection config and auto-injection hooks
- src/tools.ts: Registered new tools in main array
- test-code-injection-simple.cjs: Validation test suite
Addresses issue: "I'm running many different 'mcp clients' in parallel on the same machine.
It's sometimes hard to figure out what client a playwright window belongs to."
Video Recording Fixes:
- Fix session persistence issues where recording state was lost between tool calls
- Improve page video object handling by triggering navigation when needed
- Add browser_reveal_artifact_paths tool to show exact file locations
- Enhance browser_recording_status with detailed debugging info and file listings
- Add clearVideoRecordingState() method for proper state management
- Keep recording config available for debugging until new session starts
Request Monitoring System:
- Add comprehensive RequestInterceptor class for HTTP traffic capture
- Implement 5 new MCP tools for request monitoring and analysis
- Support multiple export formats: JSON, HAR, CSV, and summary reports
- Add filtering by domain, method, status codes, and response timing
- Integrate with artifact storage for organized session-based file management
- Enhance browser_network_requests with rich intercepted data
Additional Improvements:
- Add getBaseDirectory/getSessionDirectory methods to ArtifactManager
- Fix floating promise in tab.ts extension console message polling
- Add debug script for comprehensive video recording workflow testing
- Update README with new tool documentation
Resolves video recording workflow issues and adds powerful HTTP traffic
analysis capabilities for web application debugging and security testing.
- Add browser_configure tool to change headless/headed mode, viewport, and user agent during session
- Fix STDIO entry point by preventing stdin close handlers in STDIO mode
- Fix headed mode default behavior when DISPLAY is available on Linux
- Add dynamic browser configuration update mechanism in Context class
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add three new MCP tools for recording browser automation:
- browser_start_recording: Enable video recording with configurable size/filename
- browser_stop_recording: Stop recording and return video file paths
- browser_recording_status: Check recording status and configuration
Key features:
- Automatic video saving when pages/contexts close
- Configurable video size and output directory
- Enhanced LLM guidance with clear workflow instructions
- Integration with existing browser context management
Videos are saved as .webm files in {outputDir}/videos/ directory.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
