feat: add browser configuration tool and fix STDIO mode
- 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>
This commit is contained in:
parent
e846cd509c
commit
aa84278d36
@ -129,8 +129,10 @@ export function configFromCLIOptions(cliOptions: CLIOptions): Config {
|
||||
const launchOptions: LaunchOptions = {
|
||||
channel,
|
||||
executablePath: cliOptions.executablePath,
|
||||
headless: cliOptions.headless,
|
||||
};
|
||||
if (cliOptions.headless !== undefined) {
|
||||
launchOptions.headless = cliOptions.headless;
|
||||
}
|
||||
|
||||
// --no-sandbox was passed, disable the sandbox
|
||||
if (cliOptions.sandbox === false)
|
||||
|
142
src/context.ts
142
src/context.ts
@ -19,6 +19,7 @@ import * as playwright from 'playwright';
|
||||
|
||||
import { logUnhandledError } from './log.js';
|
||||
import { Tab } from './tab.js';
|
||||
import { EnvironmentIntrospector } from './environmentIntrospection.js';
|
||||
|
||||
import type { Tool } from './tools/tool.js';
|
||||
import type { FullConfig } from './config.js';
|
||||
@ -37,15 +38,26 @@ export class Context {
|
||||
private _videoRecordingConfig: { dir: string; size?: { width: number; height: number } } | undefined;
|
||||
private _videoBaseFilename: string | undefined;
|
||||
private _activePagesWithVideos: Set<playwright.Page> = new Set();
|
||||
private _environmentIntrospector: EnvironmentIntrospector;
|
||||
|
||||
private static _allContexts: Set<Context> = new Set();
|
||||
private _closeBrowserContextPromise: Promise<void> | undefined;
|
||||
|
||||
constructor(tools: Tool[], config: FullConfig, browserContextFactory: BrowserContextFactory) {
|
||||
// Session isolation properties
|
||||
readonly sessionId: string;
|
||||
private _sessionStartTime: number;
|
||||
|
||||
constructor(tools: Tool[], config: FullConfig, browserContextFactory: BrowserContextFactory, environmentIntrospector?: EnvironmentIntrospector) {
|
||||
this.tools = tools;
|
||||
this.config = config;
|
||||
this._browserContextFactory = browserContextFactory;
|
||||
testDebug('create context');
|
||||
this._environmentIntrospector = environmentIntrospector || new EnvironmentIntrospector();
|
||||
|
||||
// Generate unique session ID
|
||||
this._sessionStartTime = Date.now();
|
||||
this.sessionId = this._generateSessionId();
|
||||
|
||||
testDebug(`create context with sessionId: ${this.sessionId}`);
|
||||
Context._allContexts.add(this);
|
||||
}
|
||||
|
||||
@ -53,6 +65,28 @@ export class Context {
|
||||
await Promise.all([...Context._allContexts].map(context => context.dispose()));
|
||||
}
|
||||
|
||||
private _generateSessionId(): string {
|
||||
// Create a base session ID from timestamp and random
|
||||
const baseId = `${this._sessionStartTime}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
// If we have client version info, incorporate it
|
||||
if (this.clientVersion) {
|
||||
const clientInfo = `${this.clientVersion.name || 'unknown'}-${this.clientVersion.version || 'unknown'}`;
|
||||
return `${clientInfo}-${baseId}`;
|
||||
}
|
||||
|
||||
return baseId;
|
||||
}
|
||||
|
||||
updateSessionIdWithClientInfo() {
|
||||
if (this.clientVersion) {
|
||||
const newSessionId = this._generateSessionId();
|
||||
testDebug(`updating sessionId from ${this.sessionId} to ${newSessionId}`);
|
||||
// Note: sessionId is readonly, but we can update it during initialization
|
||||
(this as any).sessionId = newSessionId;
|
||||
}
|
||||
}
|
||||
|
||||
tabs(): Tab[] {
|
||||
return this._tabs;
|
||||
}
|
||||
@ -209,8 +243,8 @@ export class Context {
|
||||
// Create a new browser context with video recording enabled
|
||||
result = await this._createVideoEnabledContext();
|
||||
} else {
|
||||
// Use the standard browser context factory
|
||||
result = await this._browserContextFactory.createContext(this.clientVersion!);
|
||||
// Use session-aware browser context factory
|
||||
result = await this._createSessionIsolatedContext();
|
||||
}
|
||||
const { browserContext } = result;
|
||||
await this._setupRequestInterception(browserContext);
|
||||
@ -232,15 +266,26 @@ export class Context {
|
||||
// For video recording, we need to create an isolated context
|
||||
const browserType = playwright[this.config.browser.browserName];
|
||||
|
||||
// Get environment-specific browser options
|
||||
const envOptions = this._environmentIntrospector.getRecommendedBrowserOptions();
|
||||
|
||||
const browser = await browserType.launch({
|
||||
...this.config.browser.launchOptions,
|
||||
...envOptions, // Include environment-detected options
|
||||
handleSIGINT: false,
|
||||
handleSIGTERM: false,
|
||||
});
|
||||
|
||||
// Use environment-specific video directory if available
|
||||
const videoConfig = envOptions.recordVideo ?
|
||||
{ ...this._videoRecordingConfig, dir: envOptions.recordVideo.dir } :
|
||||
this._videoRecordingConfig;
|
||||
|
||||
const contextOptions = {
|
||||
...this.config.browser.contextOptions,
|
||||
recordVideo: this._videoRecordingConfig,
|
||||
recordVideo: videoConfig,
|
||||
// Force isolated session for video recording with session-specific storage
|
||||
storageState: undefined, // Always start fresh for video recording
|
||||
};
|
||||
|
||||
const browserContext = await browser.newContext(contextOptions);
|
||||
@ -254,13 +299,49 @@ export class Context {
|
||||
};
|
||||
}
|
||||
|
||||
private async _createSessionIsolatedContext(): Promise<{ browserContext: playwright.BrowserContext, close: () => Promise<void> }> {
|
||||
// Always create isolated browser contexts for each MCP client
|
||||
// This ensures complete session isolation between different clients
|
||||
const browserType = playwright[this.config.browser.browserName];
|
||||
|
||||
// Get environment-specific browser options
|
||||
const envOptions = this._environmentIntrospector.getRecommendedBrowserOptions();
|
||||
|
||||
const browser = await browserType.launch({
|
||||
...this.config.browser.launchOptions,
|
||||
...envOptions, // Include environment-detected options
|
||||
handleSIGINT: false,
|
||||
handleSIGTERM: false,
|
||||
});
|
||||
|
||||
// Create isolated context options with session-specific storage
|
||||
const contextOptions = {
|
||||
...this.config.browser.contextOptions,
|
||||
// Each session gets its own isolated storage - no shared state
|
||||
storageState: undefined,
|
||||
};
|
||||
|
||||
const browserContext = await browser.newContext(contextOptions);
|
||||
|
||||
testDebug(`created isolated browser context for session: ${this.sessionId}`);
|
||||
|
||||
return {
|
||||
browserContext,
|
||||
close: async () => {
|
||||
testDebug(`closing isolated browser context for session: ${this.sessionId}`);
|
||||
await browserContext.close();
|
||||
await browser.close();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
setVideoRecording(config: { dir: string; size?: { width: number; height: number } }, baseFilename: string) {
|
||||
this._videoRecordingConfig = config;
|
||||
this._videoBaseFilename = baseFilename;
|
||||
|
||||
// Force recreation of browser context to include video recording
|
||||
if (this._browserContextPromise) {
|
||||
void this.close().then(() => {
|
||||
void this.closeBrowserContext().then(() => {
|
||||
// The next call to _ensureBrowserContext will create a new context with video recording
|
||||
});
|
||||
}
|
||||
@ -275,6 +356,55 @@ export class Context {
|
||||
};
|
||||
}
|
||||
|
||||
updateEnvironmentRoots(roots: { uri: string; name?: string }[]) {
|
||||
this._environmentIntrospector.updateRoots(roots);
|
||||
|
||||
// Log environment change
|
||||
const summary = this._environmentIntrospector.getEnvironmentSummary();
|
||||
testDebug(`environment updated for session ${this.sessionId}: ${summary}`);
|
||||
|
||||
// If we have an active browser context, we might want to recreate it
|
||||
// For now, we'll just log the change - full recreation would close existing tabs
|
||||
if (this._browserContextPromise)
|
||||
testDebug(`browser context exists - environment changes will apply to new contexts`);
|
||||
|
||||
}
|
||||
|
||||
getEnvironmentIntrospector(): EnvironmentIntrospector {
|
||||
return this._environmentIntrospector;
|
||||
}
|
||||
|
||||
async updateBrowserConfig(changes: {
|
||||
headless?: boolean;
|
||||
viewport?: { width: number; height: number };
|
||||
userAgent?: string;
|
||||
}): Promise<void> {
|
||||
const currentConfig = { ...this.config };
|
||||
|
||||
// Update the configuration
|
||||
if (changes.headless !== undefined) {
|
||||
currentConfig.browser.launchOptions.headless = changes.headless;
|
||||
}
|
||||
if (changes.viewport) {
|
||||
currentConfig.browser.contextOptions.viewport = changes.viewport;
|
||||
}
|
||||
if (changes.userAgent) {
|
||||
currentConfig.browser.contextOptions.userAgent = changes.userAgent;
|
||||
}
|
||||
|
||||
// Store the modified config
|
||||
(this as any).config = currentConfig;
|
||||
|
||||
// Close the current browser context to force recreation with new settings
|
||||
await this.closeBrowserContext();
|
||||
|
||||
// Clear tabs since they're attached to the old context
|
||||
this._tabs = [];
|
||||
this._currentTab = undefined;
|
||||
|
||||
testDebug(`browser config updated for session ${this.sessionId}: headless=${currentConfig.browser.launchOptions.headless}, viewport=${JSON.stringify(currentConfig.browser.contextOptions.viewport)}`);
|
||||
}
|
||||
|
||||
async stopVideoRecording(): Promise<string[]> {
|
||||
if (!this._videoRecordingConfig)
|
||||
return [];
|
||||
|
@ -59,7 +59,6 @@ program
|
||||
.addOption(new Option('--loop-tools', 'Run loop tools').hideHelp())
|
||||
.addOption(new Option('--vision', 'Legacy option, use --caps=vision instead').hideHelp())
|
||||
.action(async options => {
|
||||
const abortController = setupExitWatchdog();
|
||||
|
||||
if (options.vision) {
|
||||
// eslint-disable-next-line no-console
|
||||
@ -67,6 +66,7 @@ program
|
||||
options.caps = 'vision';
|
||||
}
|
||||
const config = await resolveCLIConfig(options);
|
||||
const abortController = setupExitWatchdog(config.server);
|
||||
|
||||
if (options.extension) {
|
||||
await runWithExtension(config, abortController);
|
||||
@ -90,7 +90,7 @@ program
|
||||
}
|
||||
});
|
||||
|
||||
function setupExitWatchdog() {
|
||||
function setupExitWatchdog(serverConfig: { host?: string; port?: number }) {
|
||||
const abortController = new AbortController();
|
||||
|
||||
let isExiting = false;
|
||||
@ -104,7 +104,9 @@ function setupExitWatchdog() {
|
||||
process.exit(0);
|
||||
};
|
||||
|
||||
if (serverConfig.port !== undefined) {
|
||||
process.stdin.on('close', handleExit);
|
||||
}
|
||||
process.on('SIGINT', handleExit);
|
||||
process.on('SIGTERM', handleExit);
|
||||
|
||||
|
@ -15,6 +15,7 @@
|
||||
*/
|
||||
|
||||
import common from './tools/common.js';
|
||||
import configure from './tools/configure.js';
|
||||
import console from './tools/console.js';
|
||||
import dialogs from './tools/dialogs.js';
|
||||
import evaluate from './tools/evaluate.js';
|
||||
@ -36,6 +37,7 @@ import type { FullConfig } from './config.js';
|
||||
|
||||
export const allTools: Tool<any>[] = [
|
||||
...common,
|
||||
...configure,
|
||||
...console,
|
||||
...dialogs,
|
||||
...evaluate,
|
||||
|
87
src/tools/configure.ts
Normal file
87
src/tools/configure.ts
Normal file
@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Copyright (c) Microsoft Corporation.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { z } from 'zod';
|
||||
import { defineTool } from './tool.js';
|
||||
import type { Context } from '../context.js';
|
||||
import type { Response } from '../response.js';
|
||||
|
||||
const configureSchema = z.object({
|
||||
headless: z.boolean().optional().describe('Whether to run the browser in headless mode'),
|
||||
viewport: z.object({
|
||||
width: z.number(),
|
||||
height: z.number(),
|
||||
}).optional().describe('Browser viewport size'),
|
||||
userAgent: z.string().optional().describe('User agent string for the browser'),
|
||||
});
|
||||
|
||||
export default [
|
||||
defineTool({
|
||||
capability: 'core',
|
||||
schema: {
|
||||
name: 'browser_configure',
|
||||
title: 'Configure browser settings',
|
||||
description: 'Change browser configuration settings like headless/headed mode, viewport size, or user agent for subsequent operations. This will close the current browser and restart it with new settings.',
|
||||
inputSchema: configureSchema,
|
||||
type: 'destructive',
|
||||
},
|
||||
handle: async (context: Context, params: z.output<typeof configureSchema>, response: Response) => {
|
||||
try {
|
||||
const currentConfig = context.config;
|
||||
const changes: string[] = [];
|
||||
|
||||
// Track what's changing
|
||||
if (params.headless !== undefined) {
|
||||
const currentHeadless = currentConfig.browser.launchOptions.headless;
|
||||
if (params.headless !== currentHeadless) {
|
||||
changes.push(`headless: ${currentHeadless} → ${params.headless}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (params.viewport) {
|
||||
const currentViewport = currentConfig.browser.contextOptions.viewport;
|
||||
if (!currentViewport || currentViewport.width !== params.viewport.width || currentViewport.height !== params.viewport.height) {
|
||||
changes.push(`viewport: ${currentViewport?.width || 'default'}x${currentViewport?.height || 'default'} → ${params.viewport.width}x${params.viewport.height}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (params.userAgent) {
|
||||
const currentUA = currentConfig.browser.contextOptions.userAgent;
|
||||
if (params.userAgent !== currentUA) {
|
||||
changes.push(`userAgent: ${currentUA || 'default'} → ${params.userAgent}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (changes.length === 0) {
|
||||
response.addResult('No configuration changes detected. Current settings remain the same.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Apply the configuration changes
|
||||
await context.updateBrowserConfig({
|
||||
headless: params.headless,
|
||||
viewport: params.viewport,
|
||||
userAgent: params.userAgent,
|
||||
});
|
||||
|
||||
response.addResult(`Browser configuration updated successfully:\n${changes.map(c => `• ${c}`).join('\n')}\n\nThe browser has been restarted with the new settings.`);
|
||||
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to update browser configuration: ${error}`);
|
||||
}
|
||||
},
|
||||
}),
|
||||
];
|
Loading…
x
Reference in New Issue
Block a user