[FEATURE] Enhanced Device Emulation for Chrome MCP

Preflight Checklist

• [ ] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

Chrome MCP can't capture true mobile viewports:

1. resize_window has a minimum width (~500px) - Chrome enforces this, so viewports like 375px or 390px (iPhone) aren't achievable
2. Can't enable device emulation programmatically - Keyboard shortcuts (cmd+opt+i, cmd+shift+m) sent via the computer tool don't work
3. No alternative - The only way to get a real mobile viewport is manual user intervention (open DevTools, toggle device mode)

Proposed Solution

Add a device emulation tool:

mcp__claude-in-chrome__device_emulation
  tabId: number
  enabled: boolean
  device?: "iPhone 16" | "iPhone 14" | "Pixel 7" | ...
  // OR custom dimensions:
  width?: number
  height?: number
  deviceScaleFactor?: number
  mobile?: boolean  // enables touch events, mobile user agent

This could use Chrome DevTools Protocol's Emulation.setDeviceMetricsOverride under the hood.

Alternative Solutions

Current Workaround

1. Use Chrome MCP for navigation and interaction
2. Prompt user to manually open DevTools and enable device mode
3. Capture via macOS screencapture and crop to the device frame

This works but breaks the automation flow.

Priority

Medium - Would be very helpful

Feature Category

Other

Use Case Example

Capturing A/B test variant screenshots across desktop and mobile viewports for documentation. Desktop works great today; mobile requires manual intervention.

Additional Context

Environment

• macOS
• Chrome MCP via Claude Code CLI
• Chrome browser with DevTools normally docked in-window