warehack.ing/playwright-mcp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add comprehensive browser UI customization support

Browse source 
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
This commit is contained in:
Ryan Malloy 2025-09-06 13:25:04 -06:00
parent ea30553f5a
commit 671b0a3668
7 changed files with 631 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/tools/configure.ts
View file

@ -38,7 +38,13 @@ const configureSchema = z.object({
timezone: z.string().optional().describe('Timezone ID (e.g., "America/New_York", "Europe/London", "Asia/Tokyo")'),
colorScheme: z.enum(['light', 'dark', 'no-preference']).optional().describe('Preferred color scheme'),
permissions: z.array(z.string()).optional().describe('Permissions to grant (e.g., ["geolocation", "notifications", "camera", "microphone"])'),
offline: z.boolean().optional().describe('Whether to emulate offline network conditions (equivalent to DevTools offline mode)')
offline: z.boolean().optional().describe('Whether to emulate offline network conditions (equivalent to DevTools offline mode)'),
// Browser UI Customization Options
chromiumSandbox: z.boolean().optional().describe('Enable/disable Chromium sandbox (affects browser appearance)'),
slowMo: z.number().min(0).optional().describe('Slow down operations by specified milliseconds (helps with visual tracking)'),
devtools: z.boolean().optional().describe('Open browser with DevTools panel open (Chromium only)'),
args: z.array(z.string()).optional().describe('Additional browser launch arguments for UI customization (e.g., ["--force-color-profile=srgb", "--disable-features=VizDisplayCompositor"])'),
});
const listDevicesSchema = z.object({});
@ -100,19 +106,19 @@ const offlineModeTest = defineTool({
try {
// Get current browser context
const tab = context.currentTab();
if (!tab) {
if (!tab)
throw new Error('No active browser tab. Navigate to a page first.');
}
const browserContext = tab.page.context();
await browserContext.setOffline(params.offline);
response.addResult(
`✅ Browser offline mode ${params.offline ? 'enabled' : 'disabled'}\n\n` +
`✅ Browser offline mode ${params.offline ? 'enabled' : 'disabled'}\n\n` +
`The browser will now ${params.offline ? 'block all network requests' : 'allow network requests'} ` +
`(equivalent to ${params.offline ? 'checking' : 'unchecking'} the offline checkbox in DevTools).`
);
} catch (error) {
throw new Error(`Failed to set offline mode: ${error}`);
}