style: fix linting errors and update README with new tools
- Auto-fix trailing spaces, curly braces, and indentation issues - Clean up boolean comparisons and code formatting - README automatically updated with new code injection tools: - browser_enable_debug_toolbar: Enable debug toolbar for client identification - browser_inject_custom_code: Inject custom JavaScript/CSS code - browser_list_injections: List all active code injections - browser_disable_debug_toolbar: Disable debug toolbar - browser_clear_injections: Remove custom code injections All linting checks now pass successfully.
This commit is contained in:
parent
b7ec4faf60
commit
a41a73af2a
27 changed files with 1603 additions and 134 deletions
159
test-code-injection.cjs
Executable file
159
test-code-injection.cjs
Executable file
|
|
@ -0,0 +1,159 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Test script for MCP client identification system
|
||||
* Tests the debug toolbar and custom code injection functionality
|
||||
*/
|
||||
|
||||
const { createConnection } = require('./lib/index.js');
|
||||
const { BrowserContextFactory } = require('./lib/browserContextFactory.js');
|
||||
|
||||
async function testCodeInjection() {
|
||||
console.log('🧪 Testing MCP Client Identification System...\n');
|
||||
|
||||
try {
|
||||
// Create MCP server connection
|
||||
console.log('📡 Creating MCP connection...');
|
||||
const connection = createConnection();
|
||||
|
||||
// Configure browser with a test project name
|
||||
console.log('🌐 Configuring browser...');
|
||||
await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_configure',
|
||||
arguments: {
|
||||
headless: false, // Show browser for visual verification
|
||||
viewport: { width: 1280, height: 720 }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Enable debug toolbar
|
||||
console.log('🏷️ Enabling debug toolbar...');
|
||||
const toolbarResult = await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_enable_debug_toolbar',
|
||||
arguments: {
|
||||
projectName: 'Test Project A',
|
||||
position: 'top-right',
|
||||
theme: 'dark',
|
||||
minimized: false,
|
||||
showDetails: true,
|
||||
opacity: 0.9
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log('✅ Debug toolbar enabled:', toolbarResult.content[0].text);
|
||||
|
||||
// Navigate to a test page
|
||||
console.log('🚀 Navigating to test page...');
|
||||
await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_navigate',
|
||||
arguments: {
|
||||
url: 'https://example.com'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add custom code injection
|
||||
console.log('💉 Adding custom JavaScript injection...');
|
||||
const injectionResult = await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_inject_custom_code',
|
||||
arguments: {
|
||||
name: 'test-alert',
|
||||
type: 'javascript',
|
||||
code: `
|
||||
console.log('[Test Injection] Hello from Test Project A!');
|
||||
// Create a subtle notification
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = \`
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
font-family: Arial;
|
||||
z-index: 1000;
|
||||
font-size: 14px;
|
||||
\`;
|
||||
notification.textContent = 'Custom injection from Test Project A';
|
||||
document.body.appendChild(notification);
|
||||
setTimeout(() => notification.remove(), 3000);
|
||||
`,
|
||||
persistent: true,
|
||||
autoInject: true
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log('✅ Custom code injected:', injectionResult.content[0].text);
|
||||
|
||||
// List all injections
|
||||
console.log('📋 Listing all active injections...');
|
||||
const listResult = await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_list_injections',
|
||||
arguments: {}
|
||||
}
|
||||
});
|
||||
console.log('📊 Current injections:');
|
||||
listResult.content.forEach(item => console.log(' ', item.text));
|
||||
|
||||
// Navigate to another page to test auto-injection
|
||||
console.log('\n🔄 Testing auto-injection on new page...');
|
||||
await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_navigate',
|
||||
arguments: {
|
||||
url: 'https://httpbin.org/html'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('\n🎉 Test completed successfully!');
|
||||
console.log('👀 Check the browser window to see:');
|
||||
console.log(' - Debug toolbar in top-right corner showing "Test Project A"');
|
||||
console.log(' - Green notification message from custom injection');
|
||||
console.log(' - Both should appear on both pages (example.com and httpbin.org)');
|
||||
console.log('\n💡 The debug toolbar shows:');
|
||||
console.log(' - Project name with green indicator');
|
||||
console.log(' - Session ID (first 12 chars)');
|
||||
console.log(' - Client info');
|
||||
console.log(' - Session uptime');
|
||||
console.log(' - Current hostname');
|
||||
console.log('\n⏳ Browser will stay open for 30 seconds for manual inspection...');
|
||||
|
||||
// Wait for manual inspection
|
||||
await new Promise(resolve => setTimeout(resolve, 30000));
|
||||
|
||||
// Clean up
|
||||
console.log('\n🧹 Cleaning up injections...');
|
||||
await connection.request({
|
||||
method: 'tools/call',
|
||||
params: {
|
||||
name: 'browser_clear_injections',
|
||||
arguments: {
|
||||
includeToolbar: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('✨ Test completed and cleaned up successfully!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Test failed:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Run the test
|
||||
testCodeInjection().catch(console.error);
|
||||
Loading…
Add table
Add a link
Reference in a new issue