This extension adds visual AI↔human communication, semantic analysis (SIDs), and deterministic execution capabilities to the chrome-devtools-mcp server.
overlay_annotate- Draw highlights (rings, boxes, underlines) with optional labels on page elementsoverlay_clear- Remove overlay annotationsoverlay_pick_element- Enable interactive element picker for human selection (requires headed mode)
sem_snapshot- Create semantic view of page with stable SIDs from accessibility treesem_query- Search elements by role, label, text content with semantic scoring
time_freeze- Pause timers, animations, and RAF for deterministic executiontime_resume- Resume normal time flowexec_step- Advance virtual time by N ticksview_screenshot- Take stabilized screenshots with PII redaction and masking
net_record- Record network traffic with Service Worker bypass for reproducibilitynet_replay- Replay recorded network traces with exact or best-effort matching
policy_scope- Set session policies for origins, capabilities, and limitspolicy_redact- Configure PII redaction rules for outputsaudit_export- Export evidence bundles (screenshots, requests, logs) in JSON/SARIF/ZIP
SIDs are generated from the accessibility tree using a stable hash of:
- Frame ID + AX path + role + normalized label
- Format:
sid_<base64url-hash-24chars> - Reconciliation through semantic matching when elements change
- Overlay annotations for AI to highlight elements
- Element picker for human to select targets
- Support for multiple annotation shapes and persistence
- Virtual time control for consistent automation
- Animation freezing and step-by-step execution
- Stabilized screenshots with consistent timing
- Policy-based capability restrictions
- PII redaction for privacy protection
- Comprehensive audit trails and export
New CLI options:
--overlayEnabled(default: true) - Enable visual overlay features--determinismDefaults(default: false) - Apply deterministic defaults--bypassServiceWorkers(default: true) - Bypass SW for network recording--policyDefault(default: deny_write) - Default policy for write operations
{"name": "sem_query", "args": {"role": "button", "label": "Submit"}}
→ {"sids": ["sid_abc..."]}
{"name": "overlay_annotate", "args": {"target": {"sid": "sid_abc..."}, "shape": "ring", "label": "Click here"}}{"name": "overlay_pick_element", "args": {"hint": "Select email field"}}
→ {"picked": {"sid": "sid_def...", "role": "textbox"}}
{"name": "input_fill", "args": {"selector": "[data-sid='sid_def...']", "text": "user@example.com"}}{"name": "time_freeze", "args": {}}
{"name": "net_record", "args": {"mode": "strict"}}
{"name": "view_screenshot", "args": {"stabilize_ms": 200, "redact_pii": true}}
{"name": "audit_export", "args": {"format": "json", "include": ["screenshots", "requests"]}}- Uses existing Chrome DevTools Protocol (CDP) - no browser modifications needed
- Overlays implemented via CDP
Overlay.*methods with DOM fallback for rich annotations - SID generation based on accessibility tree analysis
- Virtual time control via CDP
Emulation.setVirtualTimePolicy - Service Worker bypass via
Network.setBypassServiceWorker
headed_required- Returned when headed mode is required but headless is usedpolicy_denied- Capability blocked by active policytimeout,rate_limited,invalid_param- Standard error responses
- Intent-based automation with JSON-Logic planning
- Framework-aware selectors (React, Vue components)
- Heap snapshot capture and restoration for deeper undo
- Advanced network mocking and traffic shaping