Session: \${sessionInfo.id.substring(0, 12)}...
Client: \${sessionInfo.client}
Uptime: \${uptimeStr}
URL: \${window.location.hostname}
\` : ''}
\`;
}
}
// Toggle function
toolbar.playwrightToggle = function() {
toolbarConfig.minimized = !toolbarConfig.minimized;
updateToolbarContent();
};
// Dragging functionality
let isDragging = false;
let dragOffset = { x: 0, y: 0 };
toolbar.addEventListener('mousedown', function(e) {
isDragging = true;
dragOffset.x = e.clientX - toolbar.offsetLeft;
dragOffset.y = e.clientY - toolbar.offsetTop;
toolbar.style.cursor = 'grabbing';
e.preventDefault();
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
toolbar.style.left = (e.clientX - dragOffset.x) + 'px';
toolbar.style.top = (e.clientY - dragOffset.y) + 'px';
// Remove position properties when dragging
toolbar.style.right = 'auto';
toolbar.style.bottom = 'auto';
}
});
document.addEventListener('mouseup', function() {
if (isDragging) {
isDragging = false;
toolbar.style.cursor = 'move';
}
});
// Update content initially and every second
updateToolbarContent();
setInterval(updateToolbarContent, 1000);
// Add to page
document.body.appendChild(toolbar);
console.log(\`[Playwright MCP] Debug toolbar injected - Project: \${sessionInfo.project}, Session: \${sessionInfo.id}\`);
})();
/* END PLAYWRIGHT-MCP-DEBUG-TOOLBAR */
`;
}
/**
* Wraps custom code with LLM-safe markers
*/
export function wrapInjectedCode(injection: CustomInjection, sessionId: string, projectName?: string): string {
const projectInfo = projectName ? ` | Project: ${projectName}` : '';
const header = `
`;
const footer = ``;
if (injection.type === 'javascript') {
return `${header}
${footer}`;
} else if (injection.type === 'css') {
return `${header}
${footer}`;
}
return `${header}
${injection.code}
${footer}`;
}
/**
* Generates JavaScript to inject code into the page
*/
export function generateInjectionScript(wrappedCode: string): string {
return `
(function() {
try {
const injectionContainer = document.createElement('div');
injectionContainer.innerHTML = \`${wrappedCode.replace(/`/g, '\\`')}\`;
// Extract and execute scripts
const scripts = injectionContainer.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
if (script.src) {
newScript.src = script.src;
} else {
newScript.textContent = script.textContent;
}
document.head.appendChild(newScript);
});
// Extract and add styles
const styles = injectionContainer.querySelectorAll('style');
styles.forEach(style => {
document.head.appendChild(style.cloneNode(true));
});
// Add any remaining content to body
const remaining = injectionContainer.children;
for (let i = 0; i < remaining.length; i++) {
if (remaining[i].tagName !== 'SCRIPT' && remaining[i].tagName !== 'STYLE') {
document.body.appendChild(remaining[i].cloneNode(true));
}
}
} catch (error) {
console.error('[Playwright MCP] Injection error:', error);
}
})();
`;
}
// Tool schemas
const enableDebugToolbarSchema = z.object({
projectName: z.string().optional().describe('Name of your project/client to display in the toolbar'),
position: z.enum(['top-left', 'top-right', 'bottom-left', 'bottom-right']).optional().describe('Position of the toolbar on screen'),
theme: z.enum(['light', 'dark', 'transparent']).optional().describe('Visual theme for the toolbar'),
minimized: z.boolean().optional().describe('Start toolbar in minimized state'),
showDetails: z.boolean().optional().describe('Show session details in expanded view'),
opacity: z.number().min(0.1).max(1.0).optional().describe('Toolbar opacity')
});
const injectCustomCodeSchema = z.object({
name: z.string().describe('Unique name for this injection'),
type: z.enum(['javascript', 'css']).describe('Type of code to inject'),
code: z.string().describe('The JavaScript or CSS code to inject'),
persistent: z.boolean().optional().describe('Keep injection active across session restarts'),
autoInject: z.boolean().optional().describe('Automatically inject on every new page')
});
const clearInjectionsSchema = z.object({
includeToolbar: z.boolean().optional().describe('Also disable debug toolbar')
});
// Tool definitions
const enableDebugToolbar = defineTool({
capability: 'core',
schema: {
name: 'browser_enable_debug_toolbar',
title: 'Enable Debug Toolbar',
description: 'Enable the debug toolbar to identify which MCP client is controlling the browser',
inputSchema: enableDebugToolbarSchema,
type: 'destructive',
},
handle: async (context: Context, params: z.output