- 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."
- Clean up whitespace and formatting in browserContextFactory.ts
- Improve code style in files.ts and screenshot.ts
- Add new artifacts.ts tool for artifact path management
- Enhance screenshot validation with dimension safety checks
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add powerful browser UI customization options to browser_configure tool:
- slowMo: Visual delays for demo recordings and training videos
- devtools: Auto-open Chrome DevTools for debugging sessions
- args: Custom browser launch arguments for themes and behavior
- chromiumSandbox: Sandbox control for container deployments
Key features:
• Dark mode interface support with --force-dark-mode
• Demo recording optimization with configurable action delays
• DevTools integration for development workflows
• Container deployment flexibility with sandbox control
• Comprehensive argument merging without duplicates
Includes complete documentation, testing suite, and production-ready
validation. Addresses user request for browser UI differentiation
and visual customization capabilities.
Technical changes:
- Enhanced Context.updateBrowserConfig() with UI parameter handling
- Extended configure tool schema with new Zod validations
- Fixed TypeScript compilation with skipLibCheck for upstream deps
- Added comprehensive test suite and documentation guide
Video Recording Enhancements:
- Add intelligent recording modes: smart, continuous, action-only, segment
- Implement automatic viewport matching to eliminate gray borders in videos
- Add pause/resume functionality with manual and automatic control
- Default to 1280x720 HD recording with auto-viewport matching
- Enhanced browser_start_recording with autoSetViewport parameter
Smart Recording System:
- Smart mode: Auto-pause during waits, resume during actions (perfect for demos)
- Action-only mode: Only record during browser interactions
- Segment mode: Create separate video files for each action sequence
- Continuous mode: Traditional behavior with optional manual pause/resume
Tool Enhancements:
- Comprehensive descriptions for all video recording tools
- Professional context and use case guidance
- Integration with browser_wait_for for recordDuringWait parameter
- Action-aware recording in navigation and interaction tools
- Enhanced browser_recording_status with mode and viewport info
Documentation & Testing:
- Complete best practices guide for video recording workflows
- Viewport matching diagnostic and setup scripts
- Recommended video sizes and quality settings
- Gray border problem solution with automatic viewport matching
Solves the gray border issue by ensuring browser viewport matches video
recording dimensions, creating professional full-frame demo videos.
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.
- Block images exceeding 8000px from being included in MCP responses
- Add clear warning messages when images are too large for API
- Always save screenshots to file regardless of size
- Prevents conversation history issues with oversized fullPage screenshots
- Add test script for verifying large image protection
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major enhancements to browser automation and debugging capabilities:
**Console Capture Features:**
- Add console output file option (CLI, env var, session config)
- Enhanced CDP console capture for service worker messages
- Browser-level security warnings and mixed content errors
- Network failure and loading error capture
- All console contexts written to structured log files
- Chrome extension for comprehensive console message interception
**Offline Mode Support:**
- Add browser_set_offline tool for DevTools-equivalent offline mode
- Integrate offline mode into browser_configure tool
- Support for testing network failure scenarios and service worker behavior
**Extension Management:**
- Improved extension installation messaging about session persistence
- Console capture extension with debugger API access
- Clear communication about extension lifecycle to MCP clients
**Technical Implementation:**
- CDP session management across multiple domains (Runtime, Network, Security, Log)
- Service worker context console message interception
- Browser context factory integration for offline mode
- Pure Chromium configuration for optimal extension support
All features provide MCP clients with powerful debugging capabilities
equivalent to Chrome DevTools console and offline functionality.
Implements automatic validation of screenshot dimensions to prevent
"image dimensions exceed max allowed size: 8000 pixels" API errors.
New features:
✅ **Automatic size validation** - Rejects images > 8000px by default
✅ **allowLargeImages flag** - Override validation when needed
✅ **Smart error messages** - Helpful solutions when validation fails
✅ **Image dimension parsing** - Supports PNG and JPEG format detection
✅ **Updated tool description** - Documents size limits and flag usage
Error message provides actionable solutions:
1. Use viewport screenshot (remove fullPage: true)
2. Allow large images (add allowLargeImages: true)
3. Reduce viewport size (browser_configure)
4. Screenshot specific elements (element + ref)
Usage examples:
```json
// Safe viewport screenshot
{"filename": "safe.png"}
// Full page with validation
{"fullPage": true, "filename": "page.png"}
// Override validation for large images
{"fullPage": true, "allowLargeImages": true, "filename": "large.png"}
```
This prevents the frustrating API error: "At least one of the image
dimensions exceed max allowed size: 8000 pixels" by catching oversized
images before they reach the API and providing clear solutions.
Co-Authored-By: Claude <noreply@anthropic.com>
Implements dynamic snapshot configuration that MCP clients can control during
sessions without requiring server restarts or CLI changes.
New tool: browser_configure_snapshots
- Configure includeSnapshots, maxSnapshotTokens, differentialSnapshots at runtime
- Changes take effect immediately for subsequent tool calls
- Shows current settings when called with no parameters
- Provides helpful tips and usage guidance
Key improvements:
1. **Runtime Configuration**: Update snapshot behavior during active sessions
2. **Client Control**: MCP clients can adapt to different workflows dynamically
3. **Immediate Effect**: No server restart required - changes apply instantly
4. **State Tracking**: Context maintains current session configuration
5. **User Friendly**: Clear feedback on current settings and changes
Updated tool descriptions:
- All interactive tools now mention "configurable via browser_configure_snapshots"
- Removed references to CLI-only configuration
- Enhanced browser_snapshot description for explicit snapshots
Benefits for users:
🔄 Dynamic configuration without restarts
🎛️ Client-controlled snapshot behavior
📊 View current settings anytime
⚡ Instant configuration changes
🎯 Adapt settings per workflow/task
Example usage:
```json
{
"includeSnapshots": false,
"maxSnapshotTokens": 25000,
"differentialSnapshots": true
}
```
This transforms snapshot configuration from static CLI options into a flexible
session management system that adapts to client needs in real-time.
Co-Authored-By: Claude <noreply@anthropic.com>
Implements comprehensive solution for browser_click and other interactive tools
returning massive responses (37K+ tokens) due to full page snapshots.
Features implemented:
1. **Snapshot size limits** (--max-snapshot-tokens, default 10k)
- Automatically truncates large snapshots with helpful messages
- Preserves essential info (URL, title, errors) when truncating
- Shows exact token counts and configuration suggestions
2. **Optional snapshots** (--no-snapshots)
- Disables automatic snapshots after interactive operations
- browser_snapshot tool always works for explicit snapshots
- Maintains backward compatibility (snapshots enabled by default)
3. **Differential snapshots** (--differential-snapshots)
- Shows only changes since last snapshot instead of full page
- Tracks URL, title, DOM structure, and console activity
- Significantly reduces token usage for incremental operations
4. **Enhanced tool descriptions**
- All interactive tools now document snapshot behavior
- Clear guidance on when snapshots are included/excluded
- Helpful suggestions for users experiencing token limits
Configuration options:
- CLI: --no-snapshots, --max-snapshot-tokens N, --differential-snapshots
- ENV: PLAYWRIGHT_MCP_INCLUDE_SNAPSHOTS, PLAYWRIGHT_MCP_MAX_SNAPSHOT_TOKENS, etc.
- Config file: includeSnapshots, maxSnapshotTokens, differentialSnapshots
Fixes token overflow errors while providing users full control over
snapshot behavior and response sizes.
Co-Authored-By: Claude <noreply@anthropic.com>
- Add new tool to automatically download and install popular Chrome extensions
- Support for react-devtools, vue-devtools, redux-devtools, and more
- Works around Chrome channel limitations by creating functional demo extensions
- Extensions include proper detection logic and visual indicators
- Auto-generates manifests, content scripts, and popup interfaces
- Registry-based approach for easy extension additions
- Session-specific download directories for isolation
- Updated README with new tool documentation
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Add browser_install_extension, browser_list_extensions, browser_uninstall_extension tools
- Support session-based extension isolation between MCP clients
- Extensions loaded via --load-extension Chrome flags at browser startup
- Browser auto-restarts when extensions are added/removed
- Validation ensures extensions only work with Chromium browser
- Warning system for Chrome channel vs pure Chromium compatibility
- Extension management persists across page navigations within session
- Updated README with complete extension tool documentation
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive artifact storage system with session-specific directories:
- Add --artifact-dir CLI option and PLAYWRIGHT_MCP_ARTIFACT_DIR env var
- Create ArtifactManager class for session-specific artifact organization
- Implement ArtifactManagerRegistry for multi-session support
- Add tool call logging with JSON persistence in tool-calls.json
- Update screenshot, video, and PDF tools to use centralized storage
- Add browser_configure_artifacts tool for per-session control
- Support dynamic enable/disable without server restart
- Maintain backward compatibility when artifact storage not configured
Directory structure: {artifactDir}/{sessionId}/[artifacts, videos/, tool-calls.json]
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added browser_list_devices tool to show 143+ available device profiles organized by category (iPhone, iPad, Pixel, Galaxy, Desktop, Other)
- Enhanced browser_configure tool with device emulation using Playwright's device descriptors database
- Added support for geolocation coordinates with accuracy settings
- Implemented locale and timezone configuration for internationalization testing
- Added colorScheme preference (light/dark/no-preference) for accessibility testing
- Included permissions management for various browser APIs (geolocation, notifications, camera, microphone)
- Device emulation properly overrides individual viewport/userAgent settings when specified
- All context options are properly applied and browser context is recreated with new settings
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
