This is page 2 of 2. Use http://codebase.md/weotzi/browser-tools-mcp?page={x} to view the full context.
# Directory Structure
```
├── .DS_Store
├── .gitignore
├── browser-tools-mcp
│ ├── mcp-server.ts
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ └── tsconfig.json
├── browser-tools-server
│ ├── browser-connector.ts
│ ├── lighthouse
│ │ ├── accessibility.ts
│ │ ├── best-practices.ts
│ │ ├── index.ts
│ │ ├── performance.ts
│ │ ├── seo.ts
│ │ └── types.ts
│ ├── package-lock.json
│ ├── package.json
│ ├── puppeteer-service.ts
│ ├── README.md
│ └── tsconfig.json
├── chrome-extension
│ ├── background.js
│ ├── devtools.html
│ ├── devtools.js
│ ├── manifest.json
│ ├── panel.html
│ └── panel.js
├── docs
│ ├── mcp-docs.md
│ └── mcp.md
├── LICENSE
└── README.md
```
# Files
--------------------------------------------------------------------------------
/chrome-extension/devtools.js:
--------------------------------------------------------------------------------
```javascript
// devtools.js
// Store settings with defaults
let settings = {
logLimit: 50,
queryLimit: 30000,
stringSizeLimit: 500,
maxLogSize: 20000,
showRequestHeaders: false,
showResponseHeaders: false,
screenshotPath: "", // Add new setting for screenshot path
serverHost: "localhost", // Default server host
serverPort: 3025, // Default server port
allowAutoPaste: false, // Default auto-paste setting
};
// Keep track of debugger state
let isDebuggerAttached = false;
let attachDebuggerRetries = 0;
const currentTabId = chrome.devtools.inspectedWindow.tabId;
const MAX_ATTACH_RETRIES = 3;
const ATTACH_RETRY_DELAY = 1000; // 1 second
// Load saved settings on startup
chrome.storage.local.get(["browserConnectorSettings"], (result) => {
if (result.browserConnectorSettings) {
settings = { ...settings, ...result.browserConnectorSettings };
}
});
// Listen for settings updates
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "SETTINGS_UPDATED") {
settings = message.settings;
// If server settings changed and we have a WebSocket, reconnect
if (
ws &&
(message.settings.serverHost !== settings.serverHost ||
message.settings.serverPort !== settings.serverPort)
) {
console.log("Server settings changed, reconnecting WebSocket...");
setupWebSocket();
}
}
// Handle connection status updates from page refreshes
if (message.type === "CONNECTION_STATUS_UPDATE") {
console.log(
`DevTools received connection status update: ${
message.isConnected ? "Connected" : "Disconnected"
}`
);
// If connection is lost, try to reestablish WebSocket only if we had a previous connection
if (!message.isConnected && ws) {
console.log(
"Connection lost after page refresh, will attempt to reconnect WebSocket"
);
// Only reconnect if we actually have a WebSocket that might be stale
if (
ws &&
(ws.readyState === WebSocket.CLOSED ||
ws.readyState === WebSocket.CLOSING)
) {
console.log("WebSocket is already closed or closing, will reconnect");
setupWebSocket();
}
}
}
// Handle auto-discovery requests after page refreshes
if (message.type === "INITIATE_AUTO_DISCOVERY") {
console.log(
`DevTools initiating WebSocket reconnect after page refresh (reason: ${message.reason})`
);
// For page refreshes with forceRestart, we should always reconnect if our current connection is not working
if (
(message.reason === "page_refresh" || message.forceRestart === true) &&
(!ws || ws.readyState !== WebSocket.OPEN)
) {
console.log(
"Page refreshed and WebSocket not open - forcing reconnection"
);
// Close existing WebSocket if any
if (ws) {
console.log("Closing existing WebSocket due to page refresh");
intentionalClosure = true; // Mark as intentional to prevent auto-reconnect
try {
ws.close();
} catch (e) {
console.error("Error closing WebSocket:", e);
}
ws = null;
intentionalClosure = false; // Reset flag
}
// Clear any pending reconnect timeouts
if (wsReconnectTimeout) {
clearTimeout(wsReconnectTimeout);
wsReconnectTimeout = null;
}
// Try to reestablish the WebSocket connection
setupWebSocket();
}
}
});
// Utility to recursively truncate strings in any data structure
function truncateStringsInData(data, maxLength, depth = 0, path = "") {
// Add depth limit to prevent circular references
if (depth > 100) {
console.warn("Max depth exceeded at path:", path);
return "[MAX_DEPTH_EXCEEDED]";
}
console.log(`Processing at path: ${path}, type:`, typeof data);
if (typeof data === "string") {
if (data.length > maxLength) {
console.log(
`Truncating string at path ${path} from ${data.length} to ${maxLength}`
);
return data.substring(0, maxLength) + "... (truncated)";
}
return data;
}
if (Array.isArray(data)) {
console.log(`Processing array at path ${path} with length:`, data.length);
return data.map((item, index) =>
truncateStringsInData(item, maxLength, depth + 1, `${path}[${index}]`)
);
}
if (typeof data === "object" && data !== null) {
console.log(
`Processing object at path ${path} with keys:`,
Object.keys(data)
);
const result = {};
for (const [key, value] of Object.entries(data)) {
try {
result[key] = truncateStringsInData(
value,
maxLength,
depth + 1,
path ? `${path}.${key}` : key
);
} catch (e) {
console.error(`Error processing key ${key} at path ${path}:`, e);
result[key] = "[ERROR_PROCESSING]";
}
}
return result;
}
return data;
}
// Helper to calculate the size of an object
function calculateObjectSize(obj) {
return JSON.stringify(obj).length;
}
// Helper to process array of objects with size limit
function processArrayWithSizeLimit(array, maxTotalSize, processFunc) {
let currentSize = 0;
const result = [];
for (const item of array) {
// Process the item first
const processedItem = processFunc(item);
const itemSize = calculateObjectSize(processedItem);
// Check if adding this item would exceed the limit
if (currentSize + itemSize > maxTotalSize) {
console.log(
`Reached size limit (${currentSize}/${maxTotalSize}), truncating array`
);
break;
}
// Add item and update size
result.push(processedItem);
currentSize += itemSize;
console.log(
`Added item of size ${itemSize}, total size now: ${currentSize}`
);
}
return result;
}
// Modified processJsonString to handle arrays with size limit
function processJsonString(jsonString, maxLength) {
console.log("Processing string of length:", jsonString?.length);
try {
let parsed;
try {
parsed = JSON.parse(jsonString);
console.log(
"Successfully parsed as JSON, structure:",
JSON.stringify(Object.keys(parsed))
);
} catch (e) {
console.log("Not valid JSON, treating as string");
return truncateStringsInData(jsonString, maxLength, 0, "root");
}
// If it's an array, process with size limit
if (Array.isArray(parsed)) {
console.log("Processing array of objects with size limit");
const processed = processArrayWithSizeLimit(
parsed,
settings.maxLogSize,
(item) => truncateStringsInData(item, maxLength, 0, "root")
);
const result = JSON.stringify(processed);
console.log(
`Processed array: ${parsed.length} -> ${processed.length} items`
);
return result;
}
// Otherwise process as before
const processed = truncateStringsInData(parsed, maxLength, 0, "root");
const result = JSON.stringify(processed);
console.log("Processed JSON string length:", result.length);
return result;
} catch (e) {
console.error("Error in processJsonString:", e);
return jsonString.substring(0, maxLength) + "... (truncated)";
}
}
// Helper to send logs to browser-connector
async function sendToBrowserConnector(logData) {
if (!logData) {
console.error("No log data provided to sendToBrowserConnector");
return;
}
// First, ensure we're connecting to the right server
if (!(await validateServerIdentity())) {
console.error(
"Cannot send logs: Not connected to a valid browser tools server"
);
return;
}
console.log("Sending log data to browser connector:", {
type: logData.type,
timestamp: logData.timestamp,
});
// Process any string fields that might contain JSON
const processedData = { ...logData };
if (logData.type === "network-request") {
console.log("Processing network request");
if (processedData.requestBody) {
console.log(
"Request body size before:",
processedData.requestBody.length
);
processedData.requestBody = processJsonString(
processedData.requestBody,
settings.stringSizeLimit
);
console.log("Request body size after:", processedData.requestBody.length);
}
if (processedData.responseBody) {
console.log(
"Response body size before:",
processedData.responseBody.length
);
processedData.responseBody = processJsonString(
processedData.responseBody,
settings.stringSizeLimit
);
console.log(
"Response body size after:",
processedData.responseBody.length
);
}
} else if (
logData.type === "console-log" ||
logData.type === "console-error"
) {
console.log("Processing console message");
if (processedData.message) {
console.log("Message size before:", processedData.message.length);
processedData.message = processJsonString(
processedData.message,
settings.stringSizeLimit
);
console.log("Message size after:", processedData.message.length);
}
}
// Add settings to the request
const payload = {
data: {
...processedData,
timestamp: Date.now(),
},
settings: {
logLimit: settings.logLimit,
queryLimit: settings.queryLimit,
showRequestHeaders: settings.showRequestHeaders,
showResponseHeaders: settings.showResponseHeaders,
},
};
const finalPayloadSize = JSON.stringify(payload).length;
console.log("Final payload size:", finalPayloadSize);
if (finalPayloadSize > 1000000) {
console.warn("Warning: Large payload detected:", finalPayloadSize);
console.warn(
"Payload preview:",
JSON.stringify(payload).substring(0, 1000) + "..."
);
}
const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/extension-log`;
console.log(`Sending log to ${serverUrl}`);
fetch(serverUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log("Log sent successfully:", data);
})
.catch((error) => {
console.error("Error sending log:", error);
});
}
// Validate server identity
async function validateServerIdentity() {
try {
console.log(
`Validating server identity at ${settings.serverHost}:${settings.serverPort}...`
);
// Use fetch with a timeout to prevent long-hanging requests
const response = await fetch(
`http://${settings.serverHost}:${settings.serverPort}/.identity`,
{
signal: AbortSignal.timeout(3000), // 3 second timeout
}
);
if (!response.ok) {
console.error(
`Server identity validation failed: HTTP ${response.status}`
);
// Notify about the connection failure
chrome.runtime.sendMessage({
type: "SERVER_VALIDATION_FAILED",
reason: "http_error",
status: response.status,
serverHost: settings.serverHost,
serverPort: settings.serverPort,
});
return false;
}
const identity = await response.json();
// Validate signature
if (identity.signature !== "mcp-browser-connector-24x7") {
console.error("Server identity validation failed: Invalid signature");
// Notify about the invalid signature
chrome.runtime.sendMessage({
type: "SERVER_VALIDATION_FAILED",
reason: "invalid_signature",
serverHost: settings.serverHost,
serverPort: settings.serverPort,
});
return false;
}
console.log(
`Server identity confirmed: ${identity.name} v${identity.version}`
);
// Notify about successful validation
chrome.runtime.sendMessage({
type: "SERVER_VALIDATION_SUCCESS",
serverInfo: identity,
serverHost: settings.serverHost,
serverPort: settings.serverPort,
});
return true;
} catch (error) {
console.error("Server identity validation failed:", error);
// Notify about the connection error
chrome.runtime.sendMessage({
type: "SERVER_VALIDATION_FAILED",
reason: "connection_error",
error: error.message,
serverHost: settings.serverHost,
serverPort: settings.serverPort,
});
return false;
}
}
// Function to clear logs on the server
function wipeLogs() {
console.log("Wiping all logs...");
const serverUrl = `http://${settings.serverHost}:${settings.serverPort}/wipelogs`;
console.log(`Sending wipe request to ${serverUrl}`);
fetch(serverUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
return response.json();
})
.then((data) => {
console.log("Logs wiped successfully:", data);
})
.catch((error) => {
console.error("Error wiping logs:", error);
});
}
// Listen for page refreshes
chrome.devtools.network.onNavigated.addListener((url) => {
console.log("Page navigated/refreshed - wiping logs");
wipeLogs();
// Send the new URL to the server
if (ws && ws.readyState === WebSocket.OPEN && url) {
console.log(
"Chrome Extension: Sending page-navigated event with URL:",
url
);
ws.send(
JSON.stringify({
type: "page-navigated",
url: url,
tabId: chrome.devtools.inspectedWindow.tabId,
timestamp: Date.now(),
})
);
}
});
// 1) Listen for network requests
chrome.devtools.network.onRequestFinished.addListener((request) => {
if (request._resourceType === "xhr" || request._resourceType === "fetch") {
request.getContent((responseBody) => {
const entry = {
type: "network-request",
url: request.request.url,
method: request.request.method,
status: request.response.status,
requestHeaders: request.request.headers,
responseHeaders: request.response.headers,
requestBody: request.request.postData?.text ?? "",
responseBody: responseBody ?? "",
};
sendToBrowserConnector(entry);
});
}
});
// Helper function to attach debugger
async function attachDebugger() {
// First check if we're already attached to this tab
chrome.debugger.getTargets((targets) => {
const isAlreadyAttached = targets.some(
(target) => target.tabId === currentTabId && target.attached
);
if (isAlreadyAttached) {
console.log("Found existing debugger attachment, detaching first...");
// Force detach first to ensure clean state
chrome.debugger.detach({ tabId: currentTabId }, () => {
// Ignore any errors during detach
if (chrome.runtime.lastError) {
console.log("Error during forced detach:", chrome.runtime.lastError);
}
// Now proceed with fresh attachment
performAttach();
});
} else {
// No existing attachment, proceed directly
performAttach();
}
});
}
function performAttach() {
console.log("Performing debugger attachment to tab:", currentTabId);
chrome.debugger.attach({ tabId: currentTabId }, "1.3", () => {
if (chrome.runtime.lastError) {
console.error("Failed to attach debugger:", chrome.runtime.lastError);
isDebuggerAttached = false;
return;
}
isDebuggerAttached = true;
console.log("Debugger successfully attached");
// Add the event listener when attaching
chrome.debugger.onEvent.addListener(consoleMessageListener);
chrome.debugger.sendCommand(
{ tabId: currentTabId },
"Runtime.enable",
{},
() => {
if (chrome.runtime.lastError) {
console.error("Failed to enable runtime:", chrome.runtime.lastError);
return;
}
console.log("Runtime API successfully enabled");
}
);
});
}
// Helper function to detach debugger
function detachDebugger() {
// Remove the event listener first
chrome.debugger.onEvent.removeListener(consoleMessageListener);
// Check if debugger is actually attached before trying to detach
chrome.debugger.getTargets((targets) => {
const isStillAttached = targets.some(
(target) => target.tabId === currentTabId && target.attached
);
if (!isStillAttached) {
console.log("Debugger already detached");
isDebuggerAttached = false;
return;
}
chrome.debugger.detach({ tabId: currentTabId }, () => {
if (chrome.runtime.lastError) {
console.warn(
"Warning during debugger detach:",
chrome.runtime.lastError
);
}
isDebuggerAttached = false;
console.log("Debugger detached");
});
});
}
// Move the console message listener outside the panel creation
const consoleMessageListener = (source, method, params) => {
// Only process events for our tab
if (source.tabId !== currentTabId) {
return;
}
if (method === "Runtime.exceptionThrown") {
const entry = {
type: "console-error",
message:
params.exceptionDetails.exception?.description ||
JSON.stringify(params.exceptionDetails),
level: "error",
timestamp: Date.now(),
};
console.log("Sending runtime exception:", entry);
sendToBrowserConnector(entry);
}
if (method === "Runtime.consoleAPICalled") {
// Process all arguments from the console call
let formattedMessage = "";
const args = params.args || [];
// Extract all arguments and combine them
if (args.length > 0) {
// Try to build a meaningful representation of all arguments
try {
formattedMessage = args
.map((arg) => {
// Handle different types of arguments
if (arg.type === "string") {
return arg.value;
} else if (arg.type === "object" && arg.preview) {
// For objects, include their preview or description
return JSON.stringify(arg.preview);
} else if (arg.description) {
// Some objects have descriptions
return arg.description;
} else {
// Fallback for other types
return arg.value || arg.description || JSON.stringify(arg);
}
})
.join(" ");
} catch (e) {
// Fallback if processing fails
console.error("Failed to process console arguments:", e);
formattedMessage =
args[0]?.value || "Unable to process console arguments";
}
}
const entry = {
type: params.type === "error" ? "console-error" : "console-log",
level: params.type,
message: formattedMessage,
timestamp: Date.now(),
};
console.log("Sending console entry:", entry);
sendToBrowserConnector(entry);
}
};
// 2) Use DevTools Protocol to capture console logs
chrome.devtools.panels.create("BrowserToolsMCP", "", "panel.html", (panel) => {
// Initial attach - we'll keep the debugger attached as long as DevTools is open
attachDebugger();
// Handle panel showing
panel.onShown.addListener((panelWindow) => {
if (!isDebuggerAttached) {
attachDebugger();
}
});
});
// Clean up when DevTools closes
window.addEventListener("unload", () => {
// Detach debugger
detachDebugger();
// Set intentional closure flag before closing
intentionalClosure = true;
if (ws) {
try {
ws.close();
} catch (e) {
console.error("Error closing WebSocket during unload:", e);
}
ws = null;
}
if (wsReconnectTimeout) {
clearTimeout(wsReconnectTimeout);
wsReconnectTimeout = null;
}
if (heartbeatInterval) {
clearInterval(heartbeatInterval);
heartbeatInterval = null;
}
});
// Function to capture and send element data
function captureAndSendElement() {
chrome.devtools.inspectedWindow.eval(
`(function() {
const el = $0; // $0 is the currently selected element in DevTools
if (!el) return null;
const rect = el.getBoundingClientRect();
return {
tagName: el.tagName,
id: el.id,
className: el.className,
textContent: el.textContent?.substring(0, 100),
attributes: Array.from(el.attributes).map(attr => ({
name: attr.name,
value: attr.value
})),
dimensions: {
width: rect.width,
height: rect.height,
top: rect.top,
left: rect.left
},
innerHTML: el.innerHTML.substring(0, 500)
};
})()`,
(result, isException) => {
if (isException || !result) return;
console.log("Element selected:", result);
// Send to browser connector
sendToBrowserConnector({
type: "selected-element",
timestamp: Date.now(),
element: result,
});
}
);
}
// Listen for element selection in the Elements panel
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
captureAndSendElement();
});
// WebSocket connection management
let ws = null;
let wsReconnectTimeout = null;
let heartbeatInterval = null;
const WS_RECONNECT_DELAY = 5000; // 5 seconds
const HEARTBEAT_INTERVAL = 30000; // 30 seconds
// Add a flag to track if we need to reconnect after identity validation
let reconnectAfterValidation = false;
// Track if we're intentionally closing the connection
let intentionalClosure = false;
// Function to send a heartbeat to keep the WebSocket connection alive
function sendHeartbeat() {
if (ws && ws.readyState === WebSocket.OPEN) {
console.log("Chrome Extension: Sending WebSocket heartbeat");
ws.send(JSON.stringify({ type: "heartbeat" }));
}
}
async function setupWebSocket() {
// Clear any pending timeouts
if (wsReconnectTimeout) {
clearTimeout(wsReconnectTimeout);
wsReconnectTimeout = null;
}
if (heartbeatInterval) {
clearInterval(heartbeatInterval);
heartbeatInterval = null;
}
// Close existing WebSocket if any
if (ws) {
// Set flag to indicate this is an intentional closure
intentionalClosure = true;
try {
ws.close();
} catch (e) {
console.error("Error closing existing WebSocket:", e);
}
ws = null;
intentionalClosure = false; // Reset flag
}
// Validate server identity before connecting
console.log("Validating server identity before WebSocket connection...");
const isValid = await validateServerIdentity();
if (!isValid) {
console.error(
"Cannot establish WebSocket: Not connected to a valid browser tools server"
);
// Set flag to indicate we need to reconnect after a page refresh check
reconnectAfterValidation = true;
// Try again after delay
wsReconnectTimeout = setTimeout(() => {
console.log("Attempting to reconnect WebSocket after validation failure");
setupWebSocket();
}, WS_RECONNECT_DELAY);
return;
}
// Reset reconnect flag since validation succeeded
reconnectAfterValidation = false;
const wsUrl = `ws://${settings.serverHost}:${settings.serverPort}/extension-ws`;
console.log(`Connecting to WebSocket at ${wsUrl}`);
try {
ws = new WebSocket(wsUrl);
ws.onopen = () => {
console.log(`Chrome Extension: WebSocket connected to ${wsUrl}`);
// Start heartbeat to keep connection alive
heartbeatInterval = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
// Notify that connection is successful
chrome.runtime.sendMessage({
type: "WEBSOCKET_CONNECTED",
serverHost: settings.serverHost,
serverPort: settings.serverPort,
});
// Send the current URL to the server right after connection
// This ensures the server has the URL even if no navigation occurs
chrome.runtime.sendMessage(
{
type: "GET_CURRENT_URL",
tabId: chrome.devtools.inspectedWindow.tabId,
},
(response) => {
if (chrome.runtime.lastError) {
console.error(
"Chrome Extension: Error getting URL from background on connection:",
chrome.runtime.lastError
);
// If normal method fails, try fallback to chrome.tabs API directly
tryFallbackGetUrl();
return;
}
if (response && response.url) {
console.log(
"Chrome Extension: Sending initial URL to server:",
response.url
);
// Send the URL to the server via the background script
chrome.runtime.sendMessage({
type: "UPDATE_SERVER_URL",
tabId: chrome.devtools.inspectedWindow.tabId,
url: response.url,
source: "initial_connection",
});
} else {
// If response exists but no URL, try fallback
tryFallbackGetUrl();
}
}
);
// Fallback method to get URL directly
function tryFallbackGetUrl() {
console.log("Chrome Extension: Trying fallback method to get URL");
// Try to get the URL directly using the tabs API
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (chrome.runtime.lastError) {
console.error(
"Chrome Extension: Fallback URL retrieval failed:",
chrome.runtime.lastError
);
return;
}
if (tabs && tabs.length > 0 && tabs[0].url) {
console.log(
"Chrome Extension: Got URL via fallback method:",
tabs[0].url
);
// Send the URL to the server
chrome.runtime.sendMessage({
type: "UPDATE_SERVER_URL",
tabId: chrome.devtools.inspectedWindow.tabId,
url: tabs[0].url,
source: "fallback_method",
});
} else {
console.warn(
"Chrome Extension: Could not retrieve URL through fallback method"
);
}
});
}
};
ws.onerror = (error) => {
console.error(`Chrome Extension: WebSocket error for ${wsUrl}:`, error);
};
ws.onclose = (event) => {
console.log(`Chrome Extension: WebSocket closed for ${wsUrl}:`, event);
// Stop heartbeat
if (heartbeatInterval) {
clearInterval(heartbeatInterval);
heartbeatInterval = null;
}
// Don't reconnect if this was an intentional closure
if (intentionalClosure) {
console.log(
"Chrome Extension: Intentional WebSocket closure, not reconnecting"
);
return;
}
// Only attempt to reconnect if the closure wasn't intentional
// Code 1000 (Normal Closure) and 1001 (Going Away) are normal closures
// Code 1005 often happens with clean closures in Chrome
const isAbnormalClosure = !(event.code === 1000 || event.code === 1001);
// Check if this was an abnormal closure or if we need to reconnect after validation
if (isAbnormalClosure || reconnectAfterValidation) {
console.log(
`Chrome Extension: Will attempt to reconnect WebSocket (closure code: ${event.code})`
);
// Try to reconnect after delay
wsReconnectTimeout = setTimeout(() => {
console.log(
`Chrome Extension: Attempting to reconnect WebSocket to ${wsUrl}`
);
setupWebSocket();
}, WS_RECONNECT_DELAY);
} else {
console.log(
`Chrome Extension: Normal WebSocket closure, not reconnecting automatically`
);
}
};
ws.onmessage = async (event) => {
try {
const message = JSON.parse(event.data);
// Don't log heartbeat responses to reduce noise
if (message.type !== "heartbeat-response") {
console.log("Chrome Extension: Received WebSocket message:", message);
if (message.type === "server-shutdown") {
console.log("Chrome Extension: Received server shutdown signal");
// Clear any reconnection attempts
if (wsReconnectTimeout) {
clearTimeout(wsReconnectTimeout);
wsReconnectTimeout = null;
}
// Close the connection gracefully
ws.close(1000, "Server shutting down");
return;
}
}
if (message.type === "heartbeat-response") {
// Just a heartbeat response, no action needed
// Uncomment the next line for debug purposes only
// console.log("Chrome Extension: Received heartbeat response");
} else if (message.type === "take-screenshot") {
console.log("Chrome Extension: Taking screenshot...");
// Capture screenshot of the current tab
chrome.tabs.captureVisibleTab(null, { format: "png" }, (dataUrl) => {
if (chrome.runtime.lastError) {
console.error(
"Chrome Extension: Screenshot capture failed:",
chrome.runtime.lastError
);
ws.send(
JSON.stringify({
type: "screenshot-error",
error: chrome.runtime.lastError.message,
requestId: message.requestId,
})
);
return;
}
console.log("Chrome Extension: Screenshot captured successfully");
// Just send the screenshot data, let the server handle paths
const response = {
type: "screenshot-data",
data: dataUrl,
requestId: message.requestId,
// Only include path if it's configured in settings
...(settings.screenshotPath && { path: settings.screenshotPath }),
// Include auto-paste setting
autoPaste: settings.allowAutoPaste,
};
console.log("Chrome Extension: Sending screenshot data response", {
...response,
data: "[base64 data]",
});
ws.send(JSON.stringify(response));
});
} else if (message.type === "get-current-url") {
console.log("Chrome Extension: Received request for current URL");
// Get the current URL from the background script instead of inspectedWindow.eval
let retryCount = 0;
const maxRetries = 2;
const requestCurrentUrl = () => {
chrome.runtime.sendMessage(
{
type: "GET_CURRENT_URL",
tabId: chrome.devtools.inspectedWindow.tabId,
},
(response) => {
if (chrome.runtime.lastError) {
console.error(
"Chrome Extension: Error getting URL from background:",
chrome.runtime.lastError
);
// Retry logic
if (retryCount < maxRetries) {
retryCount++;
console.log(
`Retrying URL request (${retryCount}/${maxRetries})...`
);
setTimeout(requestCurrentUrl, 500); // Wait 500ms before retrying
return;
}
ws.send(
JSON.stringify({
type: "current-url-response",
url: null,
tabId: chrome.devtools.inspectedWindow.tabId,
error:
"Failed to get URL from background: " +
chrome.runtime.lastError.message,
requestId: message.requestId,
})
);
return;
}
if (response && response.success && response.url) {
console.log(
"Chrome Extension: Got URL from background:",
response.url
);
ws.send(
JSON.stringify({
type: "current-url-response",
url: response.url,
tabId: chrome.devtools.inspectedWindow.tabId,
requestId: message.requestId,
})
);
} else {
console.error(
"Chrome Extension: Invalid URL response from background:",
response
);
// Last resort - try to get URL directly from the tab
chrome.tabs.query(
{ active: true, currentWindow: true },
(tabs) => {
const url = tabs && tabs[0] && tabs[0].url;
console.log(
"Chrome Extension: Got URL directly from tab:",
url
);
ws.send(
JSON.stringify({
type: "current-url-response",
url: url || null,
tabId: chrome.devtools.inspectedWindow.tabId,
error:
response?.error ||
"Failed to get URL from background",
requestId: message.requestId,
})
);
}
);
}
}
);
};
requestCurrentUrl();
}
} catch (error) {
console.error(
"Chrome Extension: Error processing WebSocket message:",
error
);
}
};
} catch (error) {
console.error("Error creating WebSocket:", error);
// Try again after delay
wsReconnectTimeout = setTimeout(setupWebSocket, WS_RECONNECT_DELAY);
}
}
// Initialize WebSocket connection when DevTools opens
setupWebSocket();
// Clean up WebSocket when DevTools closes
window.addEventListener("unload", () => {
if (ws) {
ws.close();
}
if (wsReconnectTimeout) {
clearTimeout(wsReconnectTimeout);
}
});
```
--------------------------------------------------------------------------------
/browser-tools-mcp/mcp-server.ts:
--------------------------------------------------------------------------------
```typescript
#!/usr/bin/env node
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import path from "path";
import fs from "fs";
// Create the MCP server
const server = new McpServer({
name: "Browser Tools MCP",
version: "1.2.0",
});
// Track the discovered server connection
let discoveredHost = "127.0.0.1";
let discoveredPort = 3025;
let serverDiscovered = false;
// Function to get the default port from environment variable or default
function getDefaultServerPort(): number {
// Check environment variable first
if (process.env.BROWSER_TOOLS_PORT) {
const envPort = parseInt(process.env.BROWSER_TOOLS_PORT, 10);
if (!isNaN(envPort) && envPort > 0) {
return envPort;
}
}
// Try to read from .port file
try {
const portFilePath = path.join(__dirname, ".port");
if (fs.existsSync(portFilePath)) {
const port = parseInt(fs.readFileSync(portFilePath, "utf8").trim(), 10);
if (!isNaN(port) && port > 0) {
return port;
}
}
} catch (err) {
console.error("Error reading port file:", err);
}
// Default port if no configuration found
return 3025;
}
// Function to get default server host from environment variable or default
function getDefaultServerHost(): string {
// Check environment variable first
if (process.env.BROWSER_TOOLS_HOST) {
return process.env.BROWSER_TOOLS_HOST;
}
// Default to localhost
return "127.0.0.1";
}
// Server discovery function - similar to what you have in the Chrome extension
async function discoverServer(): Promise<boolean> {
console.log("Starting server discovery process");
// Common hosts to try
const hosts = [getDefaultServerHost(), "127.0.0.1", "localhost"];
// Ports to try (start with default, then try others)
const defaultPort = getDefaultServerPort();
const ports = [defaultPort];
// Add additional ports (fallback range)
for (let p = 3025; p <= 3035; p++) {
if (p !== defaultPort) {
ports.push(p);
}
}
console.log(`Will try hosts: ${hosts.join(", ")}`);
console.log(`Will try ports: ${ports.join(", ")}`);
// Try to find the server
for (const host of hosts) {
for (const port of ports) {
try {
console.log(`Checking ${host}:${port}...`);
// Use the identity endpoint for validation
const response = await fetch(`http://${host}:${port}/.identity`, {
signal: AbortSignal.timeout(1000), // 1 second timeout
});
if (response.ok) {
const identity = await response.json();
// Verify this is actually our server by checking the signature
if (identity.signature === "mcp-browser-connector-24x7") {
console.log(`Successfully found server at ${host}:${port}`);
// Save the discovered connection
discoveredHost = host;
discoveredPort = port;
serverDiscovered = true;
return true;
}
}
} catch (error: any) {
// Ignore connection errors during discovery
console.error(`Error checking ${host}:${port}: ${error.message}`);
}
}
}
console.error("No server found during discovery");
return false;
}
// Wrapper function to ensure server connection before making requests
async function withServerConnection<T>(
apiCall: () => Promise<T>
): Promise<T | any> {
// Attempt to discover server if not already discovered
if (!serverDiscovered) {
const discovered = await discoverServer();
if (!discovered) {
return {
content: [
{
type: "text",
text: "Failed to discover browser connector server. Please ensure it's running.",
},
],
isError: true,
};
}
}
// Now make the actual API call with discovered host/port
try {
return await apiCall();
} catch (error: any) {
// If the request fails, try rediscovering the server once
console.error(
`API call failed: ${error.message}. Attempting rediscovery...`
);
serverDiscovered = false;
if (await discoverServer()) {
console.error("Rediscovery successful. Retrying API call...");
try {
// Retry the API call with the newly discovered connection
return await apiCall();
} catch (retryError: any) {
console.error(`Retry failed: ${retryError.message}`);
return {
content: [
{
type: "text",
text: `Error after reconnection attempt: ${retryError.message}`,
},
],
isError: true,
};
}
} else {
console.error("Rediscovery failed. Could not reconnect to server.");
return {
content: [
{
type: "text",
text: `Failed to reconnect to server: ${error.message}`,
},
],
isError: true,
};
}
}
}
// We'll define our tools that retrieve data from the browser connector
server.tool("getConsoleLogs", "Check our browser logs", async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/console-logs`
);
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
});
});
server.tool(
"getConsoleErrors",
"Check our browsers console errors",
async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/console-errors`
);
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
});
}
);
server.tool("getNetworkErrors", "Check our network ERROR logs", async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/network-errors`
);
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
isError: true,
};
});
});
server.tool("getNetworkLogs", "Check ALL our network logs", async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/network-success`
);
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
});
});
server.tool(
"takeScreenshot",
"Take a screenshot of the current browser tab",
async () => {
return await withServerConnection(async () => {
try {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/capture-screenshot`,
{
method: "POST",
}
);
const result = await response.json();
if (response.ok) {
return {
content: [
{
type: "text",
text: "Successfully saved screenshot",
},
],
};
} else {
return {
content: [
{
type: "text",
text: `Error taking screenshot: ${result.error}`,
},
],
};
}
} catch (error: any) {
const errorMessage =
error instanceof Error ? error.message : String(error);
return {
content: [
{
type: "text",
text: `Failed to take screenshot: ${errorMessage}`,
},
],
};
}
});
}
);
server.tool(
"getSelectedElement",
"Get the selected element from the browser",
async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/selected-element`
);
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
});
}
);
server.tool("wipeLogs", "Wipe all browser logs from memory", async () => {
return await withServerConnection(async () => {
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/wipelogs`,
{
method: "POST",
}
);
const json = await response.json();
return {
content: [
{
type: "text",
text: json.message,
},
],
};
});
});
// Define audit categories as enum to match the server's AuditCategory enum
enum AuditCategory {
ACCESSIBILITY = "accessibility",
PERFORMANCE = "performance",
SEO = "seo",
BEST_PRACTICES = "best-practices",
PWA = "pwa",
}
// Add tool for accessibility audits, launches a headless browser instance
server.tool(
"runAccessibilityAudit",
"Run an accessibility audit on the current page",
{},
async () => {
return await withServerConnection(async () => {
try {
// Simplified approach - let the browser connector handle the current tab and URL
console.log(
`Sending POST request to http://${discoveredHost}:${discoveredPort}/accessibility-audit`
);
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/accessibility-audit`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
category: AuditCategory.ACCESSIBILITY,
source: "mcp_tool",
timestamp: Date.now(),
}),
}
);
// Log the response status
console.log(`Accessibility audit response status: ${response.status}`);
if (!response.ok) {
const errorText = await response.text();
console.error(`Accessibility audit error: ${errorText}`);
throw new Error(`Server returned ${response.status}: ${errorText}`);
}
const json = await response.json();
// flatten it by merging metadata with the report contents
if (json.report) {
const { metadata, report } = json;
const flattened = {
...metadata,
...report,
};
return {
content: [
{
type: "text",
text: JSON.stringify(flattened, null, 2),
},
],
};
} else {
// Return as-is if it's not in the new format
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
}
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
console.error("Error in accessibility audit:", errorMessage);
return {
content: [
{
type: "text",
text: `Failed to run accessibility audit: ${errorMessage}`,
},
],
};
}
});
}
);
// Add tool for performance audits, launches a headless browser instance
server.tool(
"runPerformanceAudit",
"Run a performance audit on the current page",
{},
async () => {
return await withServerConnection(async () => {
try {
// Simplified approach - let the browser connector handle the current tab and URL
console.log(
`Sending POST request to http://${discoveredHost}:${discoveredPort}/performance-audit`
);
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/performance-audit`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
category: AuditCategory.PERFORMANCE,
source: "mcp_tool",
timestamp: Date.now(),
}),
}
);
// Log the response status
console.log(`Performance audit response status: ${response.status}`);
if (!response.ok) {
const errorText = await response.text();
console.error(`Performance audit error: ${errorText}`);
throw new Error(`Server returned ${response.status}: ${errorText}`);
}
const json = await response.json();
// flatten it by merging metadata with the report contents
if (json.report) {
const { metadata, report } = json;
const flattened = {
...metadata,
...report,
};
return {
content: [
{
type: "text",
text: JSON.stringify(flattened, null, 2),
},
],
};
} else {
// Return as-is if it's not in the new format
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
}
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
console.error("Error in performance audit:", errorMessage);
return {
content: [
{
type: "text",
text: `Failed to run performance audit: ${errorMessage}`,
},
],
};
}
});
}
);
// Add tool for SEO audits, launches a headless browser instance
server.tool(
"runSEOAudit",
"Run an SEO audit on the current page",
{},
async () => {
return await withServerConnection(async () => {
try {
console.log(
`Sending POST request to http://${discoveredHost}:${discoveredPort}/seo-audit`
);
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/seo-audit`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
category: AuditCategory.SEO,
source: "mcp_tool",
timestamp: Date.now(),
}),
}
);
// Log the response status
console.log(`SEO audit response status: ${response.status}`);
if (!response.ok) {
const errorText = await response.text();
console.error(`SEO audit error: ${errorText}`);
throw new Error(`Server returned ${response.status}: ${errorText}`);
}
const json = await response.json();
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
console.error("Error in SEO audit:", errorMessage);
return {
content: [
{
type: "text",
text: `Failed to run SEO audit: ${errorMessage}`,
},
],
};
}
});
}
);
server.tool("runNextJSAudit", {}, async () => ({
content: [
{
type: "text",
text: `
You are an expert in SEO and web development with NextJS. Given the following procedures for analyzing my codebase, please perform a comprehensive - page by page analysis of our NextJS application to identify any issues or areas of improvement for SEO.
After each iteration of changes, reinvoke this tool to re-fetch our SEO audit procedures and then scan our codebase again to identify additional areas of improvement.
When no more areas of improvement are found, return "No more areas of improvement found, your NextJS application is optimized for SEO!".
Start by analyzing each of the following aspects of our codebase:
1. Meta tags - provides information about your website to search engines and social media platforms.
Pages should provide the following standard meta tags:
title
description
keywords
robots
viewport
charSet
Open Graph meta tags:
og:site_name
og:locale
og:title
og:description
og:type
og:url
og:image
og:image:alt
og:image:type
og:image:width
og:image:height
Article meta tags (actually it's also OpenGraph):
article:published_time
article:modified_time
article:author
Twitter meta tags:
twitter:card
twitter:site
twitter:creator
twitter:title
twitter:description
twitter:image
For applications using the pages router, set up metatags like this in pages/[slug].tsx:
import Head from "next/head";
export default function Page() {
return (
<Head>
<title>
Next.js SEO: The Complete Checklist to Boost Your Site Ranking
</title>
<meta
name="description"
content="Learn how to optimize your Next.js website for SEO by following this complete checklist."
/>
<meta
name="keywords"
content="nextjs seo complete checklist, nextjs seo tutorial"
/>
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charSet="utf-8" />
<meta property="og:site_name" content="Blog | Minh Vu" />
<meta property="og:locale" content="en_US" />
<meta
property="og:title"
content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking"
/>
<meta
property="og:description"
content="Learn how to optimize your Next.js website for SEO by following this complete checklist."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dminhvu.com/nextjs-seo" />
<meta
property="og:image"
content="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-png"
/>
<meta property="og:image:alt" content="Next.js SEO" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
property="article:published_time"
content="2024-01-11T11:35:00+07:00"
/>
<meta
property="article:modified_time"
content="2024-01-11T11:35:00+07:00"
/>
<meta
property="article:author"
content="https://www.linkedin.com/in/dminhvu02"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@dminhvu02" />
<meta name="twitter:creator" content="@dminhvu02" />
<meta
name="twitter:title"
content="Next.js SEO: The Complete Checklist to Boost Your Site Ranking"
/>
<meta
name="twitter:description"
content="Learn how to optimize your Next.js website for SEO by following this complete checklist."
/>
<meta
name="twitter:image"
content="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-png"
/>
</Head>
);
}
For applications using the app router, set up metatags like this in layout.tsx:
import type { Viewport, Metadata } from "next";
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
themeColor: "#ffffff"
};
export const metadata: Metadata = {
metadataBase: new URL("https://dminhvu.com"),
openGraph: {
siteName: "Blog | Minh Vu",
type: "website",
locale: "en_US"
},
robots: {
index: true,
follow: true,
"max-image-preview": "large",
"max-snippet": -1,
"max-video-preview": -1,
googleBot: "index, follow"
},
alternates: {
types: {
"application/rss+xml": "https://dminhvu.com/rss.xml"
}
},
applicationName: "Blog | Minh Vu",
appleWebApp: {
title: "Blog | Minh Vu",
statusBarStyle: "default",
capable: true
},
verification: {
google: "YOUR_DATA",
yandex: ["YOUR_DATA"],
other: {
"msvalidate.01": ["YOUR_DATA"],
"facebook-domain-verification": ["YOUR_DATA"]
}
},
icons: {
icon: [
{
url: "/favicon.ico",
type: "image/x-icon"
},
{
url: "/favicon-16x16.png",
sizes: "16x16",
type: "image/png"
}
// add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png
],
shortcut: [
{
url: "/favicon.ico",
type: "image/x-icon"
}
],
apple: [
{
url: "/apple-icon-57x57.png",
sizes: "57x57",
type: "image/png"
},
{
url: "/apple-icon-60x60.png",
sizes: "60x60",
type: "image/png"
}
// add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png
]
}
};
And like this for any page.tsx file:
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu",
description:
"dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.",
keywords: [
"elastic",
"python",
"javascript",
"react",
"machine learning",
"data science"
],
openGraph: {
url: "https://dminhvu.com",
type: "website",
title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu",
description:
"dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.",
images: [
{
url: "https://dminhvu.com/images/home/thumbnail.png",
width: 1200,
height: 630,
alt: "dminhvu"
}
]
},
twitter: {
card: "summary_large_image",
title: "Elastic Stack, Next.js, Python, JavaScript Tutorials | dminhvu",
description:
"dminhvu.com - Programming blog for everyone to learn Elastic Stack, Next.js, Python, JavaScript, React, Machine Learning, Data Science, and more.",
creator: "@dminhvu02",
site: "@dminhvu02",
images: [
{
url: "https://dminhvu.com/images/home/thumbnail.png",
width: 1200,
height: 630,
alt: "dminhvu"
}
]
},
alternates: {
canonical: "https://dminhvu.com"
}
};
Note that the charSet and viewport are automatically added by Next.js App Router, so you don't need to define them.
For applications using the app router, dynamic metadata can be defined by using the generateMetadata function, this is useful when you have dynamic pages like [slug]/page.tsx, or [id]/page.tsx:
import type { Metadata, ResolvingMetadata } from "next";
type Params = {
slug: string;
};
type Props = {
params: Params;
searchParams: { [key: string]: string | string[] | undefined };
};
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
const { slug } = params;
const post: Post = await fetch("YOUR_ENDPOINT", {
method: "GET",
next: {
revalidate: 60 * 60 * 24
}
}).then((res) => res.json());
return {
title: "{post.title} | dminhvu",
authors: [
{
name: post.author || "Minh Vu"
}
],
description: post.description,
keywords: post.keywords,
openGraph: {
title: "{post.title} | dminhvu",
description: post.description,
type: "article",
url: "https://dminhvu.com/{post.slug}",
publishedTime: post.created_at,
modifiedTime: post.modified_at,
authors: ["https://dminhvu.com/about"],
tags: post.categories,
images: [
{
url: "https://ik.imagekit.io/dminhvu/assets/{post.slug}/thumbnail.png?tr=f-png",
width: 1024,
height: 576,
alt: post.title,
type: "image/png"
}
]
},
twitter: {
card: "summary_large_image",
site: "@dminhvu02",
creator: "@dminhvu02",
title: "{post.title} | dminhvu",
description: post.description,
images: [
{
url: "https://ik.imagekit.io/dminhvu/assets/{post.slug}/thumbnail.png?tr=f-png",
width: 1024,
height: 576,
alt: post.title
}
]
},
alternates: {
canonical: "https://dminhvu.com/{post.slug}"
}
};
}
2. JSON-LD Schema
JSON-LD is a format for structured data that can be used by search engines to understand your content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities.
Our current recommendation for JSON-LD is to render structured data as a <script> tag in your layout.js or page.js components. For example:
export default async function Page({ params }) {
const { id } = await params
const product = await getProduct(id)
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* ... */}
</section>
)
}
You can type your JSON-LD with TypeScript using community packages like schema-dts:
import { Product, WithContext } from 'schema-dts'
const jsonLd: WithContext<Product> = {
'@context': 'https://schema.org',
'@type': 'Product',
name: 'Next.js Sticker',
image: 'https://nextjs.org/imgs/sticker.png',
description: 'Dynamic at the speed of static.',
}
3. Sitemap
Your website should provide a sitemap so that search engines can easily crawl and index your pages.
Generate Sitemap for Next.js Pages Router
For Next.js Pages Router, you can use next-sitemap to generate a sitemap for your Next.js website after building.
For example, running the following command will install next-sitemap and generate a sitemap for this blog:
npm install next-sitemap
npx next-sitemap
A sitemap will be generated at public/sitemap.xml:
public/sitemap.xml
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://dminhvu.com</loc>
<lastmod>2024-01-11T02:03:09.613Z</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<!-- other pages -->
</urlset>
Please visit the next-sitemap page for more information.
Generate Sitemap for Next.js App Router
For Next.js App Router, you can define the sitemap.ts file at app/sitemap.ts:
app/sitemap.ts
import {
getAllCategories,
getAllPostSlugsWithModifyTime
} from "@/utils/getData";
import { MetadataRoute } from "next";
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const defaultPages = [
{
url: "https://dminhvu.com",
lastModified: new Date(),
changeFrequency: "daily",
priority: 1
},
{
url: "https://dminhvu.com/about",
lastModified: new Date(),
changeFrequency: "monthly",
priority: 0.9
},
{
url: "https://dminhvu.com/contact",
lastModified: new Date(),
changeFrequency: "monthly",
priority: 0.9
}
// other pages
];
const postSlugs = await getAllPostSlugsWithModifyTime();
const categorySlugs = await getAllCategories();
const sitemap = [
...defaultPages,
...postSlugs.map((e: any) => ({
url: "https://dminhvu.com/{e.slug}",
lastModified: e.modified_at,
changeFrequency: "daily",
priority: 0.8
})),
...categorySlugs.map((e: any) => ({
url: "https://dminhvu.com/category/{e}",
lastModified: new Date(),
changeFrequency: "daily",
priority: 0.7
}))
];
return sitemap;
}
With this sitemap.ts file created, you can access the sitemap at https://dminhvu.com/sitemap.xml.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://dminhvu.com</loc>
<lastmod>2024-01-11T02:03:09.613Z</lastmod>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<!-- other pages -->
</urlset>
4. robots.txt
A robots.txt file should be added to tell search engines which pages to crawl and which pages to ignore.
robots.txt for Next.js Pages Router
For Next.js Pages Router, you can create a robots.txt file at public/robots.txt:
public/robots.txt
User-agent: *
Disallow:
Sitemap: https://dminhvu.com/sitemap.xml
You can prevent the search engine from crawling a page (usually search result pages, noindex pages, etc.) by adding the following line:
public/robots.txt
User-agent: *
Disallow: /search?q=
Disallow: /admin
robots.txt for Next.js App Router
For Next.js App Router, you don't need to manually define a robots.txt file. Instead, you can define the robots.ts file at app/robots.ts:
app/robots.ts
import { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: ["/"],
disallow: ["/search?q=", "/admin/"]
},
sitemap: ["https://dminhvu.com/sitemap.xml"]
};
}
With this robots.ts file created, you can access the robots.txt file at https://dminhvu.com/robots.txt.
User-agent: *
Allow: /
Disallow: /search?q=
Disallow: /admin
Sitemap: https://dminhvu.com/sitemap.xml
5. Link tags
Link Tags for Next.js Pages Router
For example, the current page has the following link tags if I use the Pages Router:
pages/_app.tsx
import Head from "next/head";
export default function Page() {
return (
<Head>
{/* other parts */}
<link
rel="alternate"
type="application/rss+xml"
href="https://dminhvu.com/rss.xml"
/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
{/* add apple-touch-icon-72x72.png, apple-touch-icon-76x76.png, apple-touch-icon-114x114.png, apple-touch-icon-120x120.png, apple-touch-icon-144x144.png, apple-touch-icon-152x152.png, apple-touch-icon-180x180.png */}
<link
rel="icon"
type="image/png"
href="/favicon-16x16.png"
sizes="16x16"
/>
{/* add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png */}
</Head>
);
}
pages/[slug].tsx
import Head from "next/head";
export default function Page() {
return (
<Head>
{/* other parts */}
<link rel="canonical" href="https://dminhvu.com/nextjs-seo" />
</Head>
);
}
Link Tags for Next.js App Router
For Next.js App Router, the link tags can be defined using the export const metadata or generateMetadata similar to the meta tags section.
The code below is exactly the same as the meta tags for Next.js App Router section above.
app/layout.tsx
export const metadata: Metadata = {
// other parts
alternates: {
types: {
"application/rss+xml": "https://dminhvu.com/rss.xml"
}
},
icons: {
icon: [
{
url: "/favicon.ico",
type: "image/x-icon"
},
{
url: "/favicon-16x16.png",
sizes: "16x16",
type: "image/png"
}
// add favicon-32x32.png, favicon-96x96.png, android-chrome-192x192.png
],
shortcut: [
{
url: "/favicon.ico",
type: "image/x-icon"
}
],
apple: [
{
url: "/apple-icon-57x57.png",
sizes: "57x57",
type: "image/png"
},
{
url: "/apple-icon-60x60.png",
sizes: "60x60",
type: "image/png"
}
// add apple-icon-72x72.png, apple-icon-76x76.png, apple-icon-114x114.png, apple-icon-120x120.png, apple-icon-144x144.png, apple-icon-152x152.png, apple-icon-180x180.png
]
}
};
app/page.tsx
export const metadata: Metadata = {
// other parts
alternates: {
canonical: "https://dminhvu.com"
}
};
6. Script optimization
Script Optimization for General Scripts
Next.js provides a built-in component called <Script> to add external scripts to your website.
For example, you can add Google Analytics to your website by adding the following script tag:
pages/_app.tsx
import Head from "next/head";
import Script from "next/script";
export default function Page() {
return (
<Head>
{/* other parts */}
{process.env.NODE_ENV === "production" && (
<>
<Script async strategy="afterInteractive" id="analytics">
{'
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
'}
</Script>
</>
)}
</Head>
);
}
Script Optimization for Common Third-Party Integrations
Next.js App Router introduces a new library called @next/third-parties for:
Google Tag Manager
Google Analytics
Google Maps Embed
YouTube Embed
To use the @next/third-parties library, you need to install it:
npm install @next/third-parties
Then, you can add the following code to your app/layout.tsx:
app/layout.tsx
import { GoogleTagManager } from "@next/third-parties/google";
import { GoogleAnalytics } from "@next/third-parties/google";
import Head from "next/head";
export default function Page() {
return (
<html lang="en" className="scroll-smooth" suppressHydrationWarning>
{process.env.NODE_ENV === "production" && (
<>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
{/* other scripts */}
</>
)}
{/* other parts */}
</html>
);
}
Please note that you don't need to include both GoogleTagManager and GoogleAnalytics if you only use one of them.
7. Image optimization
Image Optimization
This part can be applied to both Pages Router and App Router.
Image optimization is also an important part of SEO as it helps your website load faster.
Faster image rendering speed will contribute to the Google PageSpeed score, which can improve user experience and SEO.
You can use next/image to optimize images in your Next.js website.
For example, the following code will optimize this post thumbnail:
import Image from "next/image";
export default function Page() {
return (
<Image
src="https://ik.imagekit.io/dminhvu/assets/nextjs-seo/thumbnail.png?tr=f-webp"
alt="Next.js SEO"
width={1200}
height={630}
/>
);
}
Remember to use a CDN to serve your media (images, videos, etc.) to improve the loading speed.
For the image format, use WebP if possible because it has a smaller size than PNG and JPEG.
Given the provided procedures, begin by analyzing all of our Next.js pages.
Check to see what metadata already exists, look for any robot.txt files, and take a closer look at some of the other aspects of our project to determine areas of improvement.
Once you've performed this comprehensive analysis, return back a report on what we can do to improve our application.
Do not actually make the code changes yet, just return a comprehensive plan that you will ask for approval for.
If feedback is provided, adjust the plan accordingly and ask for approval again.
If the user approves of the plan, go ahead and proceed to implement all the necessary code changes to completely optimize our application.
`,
},
],
}));
server.tool(
"runDebuggerMode",
"Run debugger mode to debug an issue in our application",
async () => ({
content: [
{
type: "text",
text: `
Please follow this exact sequence to debug an issue in our application:
1. Reflect on 5-7 different possible sources of the problem
2. Distill those down to 1-2 most likely sources
3. Add additional logs to validate your assumptions and track the transformation of data structures throughout the application control flow before we move onto implementing the actual code fix
4. Use the "getConsoleLogs", "getConsoleErrors", "getNetworkLogs" & "getNetworkErrors" tools to obtain any newly added web browser logs
5. Obtain the server logs as well if accessible - otherwise, ask me to copy/paste them into the chat
6. Deeply reflect on what could be wrong + produce a comprehensive analysis of the issue
7. Suggest additional logs if the issue persists or if the source is not yet clear
8. Once a fix is implemented, ask for approval to remove the previously added logs
Note: DO NOT run any of our audits (runAccessibilityAudit, runPerformanceAudit, runBestPracticesAudit, runSEOAudit, runNextJSAudit) when in debugging mode unless explicitly asked to do so or unless you switch to audit mode.
`,
},
],
})
);
server.tool(
"runAuditMode",
"Run audit mode to optimize our application for SEO, accessibility and performance",
async () => ({
content: [
{
type: "text",
text: `
I want you to enter "Audit Mode". Use the following MCP tools one after the other in this exact sequence:
1. runAccessibilityAudit
2. runPerformanceAudit
3. runBestPracticesAudit
4. runSEOAudit
5. runNextJSAudit (only if our application is ACTUALLY using NextJS)
After running all of these tools, return back a comprehensive analysis of the audit results.
Do NOT use runNextJSAudit tool unless you see that our application is ACTUALLY using NextJS.
DO NOT use the takeScreenshot tool EVER during audit mode. ONLY use it if I specifically ask you to take a screenshot of something.
DO NOT check console or network logs to get started - your main priority is to run the audits in the sequence defined above.
After returning an in-depth analysis, scan through my code and identify various files/parts of my codebase that we want to modify/improve based on the results of our audits.
After identifying what changes may be needed, do NOT make the actual changes. Instead, return back a comprehensive, step-by-step plan to address all of these changes and ask for approval to execute this plan. If feedback is received, make a new plan and ask for approval again. If approved, execute the ENTIRE plan and after all phases/steps are complete, re-run the auditing tools in the same 4 step sequence again before returning back another analysis for additional changes potentially needed.
Keep repeating / iterating through this process with the four tools until our application is as optimized as possible for SEO, accessibility and performance.
`,
},
],
})
);
// Add tool for Best Practices audits, launches a headless browser instance
server.tool(
"runBestPracticesAudit",
"Run a best practices audit on the current page",
{},
async () => {
return await withServerConnection(async () => {
try {
console.log(
`Sending POST request to http://${discoveredHost}:${discoveredPort}/best-practices-audit`
);
const response = await fetch(
`http://${discoveredHost}:${discoveredPort}/best-practices-audit`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
source: "mcp_tool",
timestamp: Date.now(),
}),
}
);
// Check for errors
if (!response.ok) {
const errorText = await response.text();
throw new Error(`Server returned ${response.status}: ${errorText}`);
}
const json = await response.json();
// flatten it by merging metadata with the report contents
if (json.report) {
const { metadata, report } = json;
const flattened = {
...metadata,
...report,
};
return {
content: [
{
type: "text",
text: JSON.stringify(flattened, null, 2),
},
],
};
} else {
// Return as-is if it's not in the new format
return {
content: [
{
type: "text",
text: JSON.stringify(json, null, 2),
},
],
};
}
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
console.error("Error in Best Practices audit:", errorMessage);
return {
content: [
{
type: "text",
text: `Failed to run Best Practices audit: ${errorMessage}`,
},
],
};
}
});
}
);
// Start receiving messages on stdio
(async () => {
try {
// Attempt initial server discovery
console.error("Attempting initial server discovery on startup...");
await discoverServer();
if (serverDiscovered) {
console.error(
`Successfully discovered server at ${discoveredHost}:${discoveredPort}`
);
} else {
console.error(
"Initial server discovery failed. Will try again when tools are used."
);
}
const transport = new StdioServerTransport();
// Ensure stdout is only used for JSON messages
const originalStdoutWrite = process.stdout.write.bind(process.stdout);
process.stdout.write = (chunk: any, encoding?: any, callback?: any) => {
// Only allow JSON messages to pass through
if (typeof chunk === "string" && !chunk.startsWith("{")) {
return true; // Silently skip non-JSON messages
}
return originalStdoutWrite(chunk, encoding, callback);
};
await server.connect(transport);
} catch (error) {
console.error("Failed to initialize MCP server:", error);
process.exit(1);
}
})();
```
--------------------------------------------------------------------------------
/browser-tools-server/browser-connector.ts:
--------------------------------------------------------------------------------
```typescript
#!/usr/bin/env node
import express from "express";
import cors from "cors";
import bodyParser from "body-parser";
import { tokenizeAndEstimateCost } from "llm-cost";
import { WebSocketServer, WebSocket } from "ws";
import fs from "fs";
import path from "path";
import { IncomingMessage } from "http";
import { Socket } from "net";
import os from "os";
import { exec } from "child_process";
import {
runPerformanceAudit,
runAccessibilityAudit,
runSEOAudit,
AuditCategory,
LighthouseReport,
} from "./lighthouse/index.js";
import * as net from "net";
import { runBestPracticesAudit } from "./lighthouse/best-practices.js";
/**
* Converts a file path to the appropriate format for the current platform
* Handles Windows, WSL, macOS and Linux path formats
*
* @param inputPath - The path to convert
* @returns The converted path appropriate for the current platform
*/
function convertPathForCurrentPlatform(inputPath: string): string {
const platform = os.platform();
// If no path provided, return as is
if (!inputPath) return inputPath;
console.log(`Converting path "${inputPath}" for platform: ${platform}`);
// Windows-specific conversion
if (platform === "win32") {
// Convert forward slashes to backslashes
return inputPath.replace(/\//g, "\\");
}
// Linux/Mac-specific conversion
if (platform === "linux" || platform === "darwin") {
// Check if this is a Windows UNC path (starts with \\)
if (inputPath.startsWith("\\\\") || inputPath.includes("\\")) {
// Check if this is a WSL path (contains wsl.localhost or wsl$)
if (inputPath.includes("wsl.localhost") || inputPath.includes("wsl$")) {
// Extract the path after the distribution name
// Handle both \\wsl.localhost\Ubuntu\path and \\wsl$\Ubuntu\path formats
const parts = inputPath.split("\\").filter((part) => part.length > 0);
console.log("Path parts:", parts);
// Find the index after the distribution name
const distNames = [
"Ubuntu",
"Debian",
"kali",
"openSUSE",
"SLES",
"Fedora",
];
// Find the distribution name in the path
let distIndex = -1;
for (const dist of distNames) {
const index = parts.findIndex(
(part) => part === dist || part.toLowerCase() === dist.toLowerCase()
);
if (index !== -1) {
distIndex = index;
break;
}
}
if (distIndex !== -1 && distIndex + 1 < parts.length) {
// Reconstruct the path as a native Linux path
const linuxPath = "/" + parts.slice(distIndex + 1).join("/");
console.log(
`Converted Windows WSL path "${inputPath}" to Linux path "${linuxPath}"`
);
return linuxPath;
}
// If we couldn't find a distribution name but it's clearly a WSL path,
// try to extract everything after wsl.localhost or wsl$
const wslIndex = parts.findIndex(
(part) =>
part === "wsl.localhost" ||
part === "wsl$" ||
part.toLowerCase() === "wsl.localhost" ||
part.toLowerCase() === "wsl$"
);
if (wslIndex !== -1 && wslIndex + 2 < parts.length) {
// Skip the WSL prefix and distribution name
const linuxPath = "/" + parts.slice(wslIndex + 2).join("/");
console.log(
`Converted Windows WSL path "${inputPath}" to Linux path "${linuxPath}"`
);
return linuxPath;
}
}
// For non-WSL Windows paths, just normalize the slashes
const normalizedPath = inputPath
.replace(/\\\\/g, "/")
.replace(/\\/g, "/");
console.log(
`Converted Windows UNC path "${inputPath}" to "${normalizedPath}"`
);
return normalizedPath;
}
// Handle Windows drive letters (e.g., C:\path\to\file)
if (/^[A-Z]:\\/i.test(inputPath)) {
// Convert Windows drive path to Linux/Mac compatible path
const normalizedPath = inputPath
.replace(/^[A-Z]:\\/i, "/")
.replace(/\\/g, "/");
console.log(
`Converted Windows drive path "${inputPath}" to "${normalizedPath}"`
);
return normalizedPath;
}
}
// Return the original path if no conversion was needed or possible
return inputPath;
}
// Function to get default downloads folder
function getDefaultDownloadsFolder(): string {
const homeDir = os.homedir();
// Downloads folder is typically the same path on Windows, macOS, and Linux
const downloadsPath = path.join(homeDir, "Downloads", "mcp-screenshots");
return downloadsPath;
}
// We store logs in memory
const consoleLogs: any[] = [];
const consoleErrors: any[] = [];
const networkErrors: any[] = [];
const networkSuccess: any[] = [];
const allXhr: any[] = [];
// Store the current URL from the extension
let currentUrl: string = "";
// Store the current tab ID from the extension
let currentTabId: string | number | null = null;
// Add settings state
let currentSettings = {
logLimit: 50,
queryLimit: 30000,
showRequestHeaders: false,
showResponseHeaders: false,
model: "claude-3-sonnet",
stringSizeLimit: 500,
maxLogSize: 20000,
screenshotPath: getDefaultDownloadsFolder(),
// Add server host configuration
serverHost: process.env.SERVER_HOST || "0.0.0.0", // Default to all interfaces
};
// Add new storage for selected element
let selectedElement: any = null;
// Add new state for tracking screenshot requests
interface ScreenshotCallback {
resolve: (value: {
data: string;
path?: string;
autoPaste?: boolean;
}) => void;
reject: (reason: Error) => void;
}
const screenshotCallbacks = new Map<string, ScreenshotCallback>();
// Function to get available port starting with the given port
async function getAvailablePort(
startPort: number,
maxAttempts: number = 10
): Promise<number> {
let currentPort = startPort;
let attempts = 0;
while (attempts < maxAttempts) {
try {
// Try to create a server on the current port
// We'll use a raw Node.js net server for just testing port availability
await new Promise<void>((resolve, reject) => {
const testServer = net.createServer();
// Handle errors (e.g., port in use)
testServer.once("error", (err: any) => {
if (err.code === "EADDRINUSE") {
console.log(`Port ${currentPort} is in use, trying next port...`);
currentPort++;
attempts++;
resolve(); // Continue to next iteration
} else {
reject(err); // Different error, propagate it
}
});
// If we can listen, the port is available
testServer.once("listening", () => {
// Make sure to close the server to release the port
testServer.close(() => {
console.log(`Found available port: ${currentPort}`);
resolve();
});
});
// Try to listen on the current port
testServer.listen(currentPort, currentSettings.serverHost);
});
// If we reach here without incrementing the port, it means the port is available
return currentPort;
} catch (error: any) {
console.error(`Error checking port ${currentPort}:`, error);
// For non-EADDRINUSE errors, try the next port
currentPort++;
attempts++;
}
}
// If we've exhausted all attempts, throw an error
throw new Error(
`Could not find an available port after ${maxAttempts} attempts starting from ${startPort}`
);
}
// Start with requested port and find an available one
const REQUESTED_PORT = parseInt(process.env.PORT || "3025", 10);
let PORT = REQUESTED_PORT;
// Create application and initialize middleware
const app = express();
app.use(cors());
// Increase JSON body parser limit to 50MB to handle large screenshots
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));
// Helper to recursively truncate strings in any data structure
function truncateStringsInData(data: any, maxLength: number): any {
if (typeof data === "string") {
return data.length > maxLength
? data.substring(0, maxLength) + "... (truncated)"
: data;
}
if (Array.isArray(data)) {
return data.map((item) => truncateStringsInData(item, maxLength));
}
if (typeof data === "object" && data !== null) {
const result: any = {};
for (const [key, value] of Object.entries(data)) {
result[key] = truncateStringsInData(value, maxLength);
}
return result;
}
return data;
}
// Helper to safely parse and process JSON strings
function processJsonString(jsonString: string, maxLength: number): string {
try {
// Try to parse the string as JSON
const parsed = JSON.parse(jsonString);
// Process any strings within the parsed JSON
const processed = truncateStringsInData(parsed, maxLength);
// Stringify the processed data
return JSON.stringify(processed);
} catch (e) {
// If it's not valid JSON, treat it as a regular string
return truncateStringsInData(jsonString, maxLength);
}
}
// Helper to process logs based on settings
function processLogsWithSettings(logs: any[]) {
return logs.map((log) => {
const processedLog = { ...log };
if (log.type === "network-request") {
// Handle headers visibility
if (!currentSettings.showRequestHeaders) {
delete processedLog.requestHeaders;
}
if (!currentSettings.showResponseHeaders) {
delete processedLog.responseHeaders;
}
}
return processedLog;
});
}
// Helper to calculate size of a log entry
function calculateLogSize(log: any): number {
return JSON.stringify(log).length;
}
// Helper to truncate logs based on character limit
function truncateLogsToQueryLimit(logs: any[]): any[] {
if (logs.length === 0) return logs;
// First process logs according to current settings
const processedLogs = processLogsWithSettings(logs);
let currentSize = 0;
const result = [];
for (const log of processedLogs) {
const logSize = calculateLogSize(log);
// Check if adding this log would exceed the limit
if (currentSize + logSize > currentSettings.queryLimit) {
console.log(
`Reached query limit (${currentSize}/${currentSettings.queryLimit}), truncating logs`
);
break;
}
// Add log and update size
result.push(log);
currentSize += logSize;
console.log(`Added log of size ${logSize}, total size now: ${currentSize}`);
}
return result;
}
// Endpoint for the extension to POST data
app.post("/extension-log", (req, res) => {
console.log("\n=== Received Extension Log ===");
console.log("Request body:", {
dataType: req.body.data?.type,
timestamp: req.body.data?.timestamp,
hasSettings: !!req.body.settings,
});
const { data, settings } = req.body;
// Update settings if provided
if (settings) {
console.log("Updating settings:", settings);
currentSettings = {
...currentSettings,
...settings,
};
}
if (!data) {
console.log("Warning: No data received in log request");
res.status(400).json({ status: "error", message: "No data provided" });
return;
}
console.log(`Processing ${data.type} log entry`);
switch (data.type) {
case "page-navigated":
// Handle page navigation event via HTTP POST
// Note: This is also handled in the WebSocket message handler
// as the extension may send navigation events through either channel
console.log("Received page navigation event with URL:", data.url);
currentUrl = data.url;
// Also update the tab ID if provided
if (data.tabId) {
console.log("Updating tab ID from page navigation event:", data.tabId);
currentTabId = data.tabId;
}
console.log("Updated current URL:", currentUrl);
break;
case "console-log":
console.log("Adding console log:", {
level: data.level,
message:
data.message?.substring(0, 100) +
(data.message?.length > 100 ? "..." : ""),
timestamp: data.timestamp,
});
consoleLogs.push(data);
if (consoleLogs.length > currentSettings.logLimit) {
console.log(
`Console logs exceeded limit (${currentSettings.logLimit}), removing oldest entry`
);
consoleLogs.shift();
}
break;
case "console-error":
console.log("Adding console error:", {
level: data.level,
message:
data.message?.substring(0, 100) +
(data.message?.length > 100 ? "..." : ""),
timestamp: data.timestamp,
});
consoleErrors.push(data);
if (consoleErrors.length > currentSettings.logLimit) {
console.log(
`Console errors exceeded limit (${currentSettings.logLimit}), removing oldest entry`
);
consoleErrors.shift();
}
break;
case "network-request":
const logEntry = {
url: data.url,
method: data.method,
status: data.status,
timestamp: data.timestamp,
};
console.log("Adding network request:", logEntry);
// Route network requests based on status code
if (data.status >= 400) {
networkErrors.push(data);
if (networkErrors.length > currentSettings.logLimit) {
console.log(
`Network errors exceeded limit (${currentSettings.logLimit}), removing oldest entry`
);
networkErrors.shift();
}
} else {
networkSuccess.push(data);
if (networkSuccess.length > currentSettings.logLimit) {
console.log(
`Network success logs exceeded limit (${currentSettings.logLimit}), removing oldest entry`
);
networkSuccess.shift();
}
}
break;
case "selected-element":
console.log("Updating selected element:", {
tagName: data.element?.tagName,
id: data.element?.id,
className: data.element?.className,
});
selectedElement = data.element;
break;
default:
console.log("Unknown log type:", data.type);
}
console.log("Current log counts:", {
consoleLogs: consoleLogs.length,
consoleErrors: consoleErrors.length,
networkErrors: networkErrors.length,
networkSuccess: networkSuccess.length,
});
console.log("=== End Extension Log ===\n");
res.json({ status: "ok" });
});
// Update GET endpoints to use the new function
app.get("/console-logs", (req, res) => {
const truncatedLogs = truncateLogsToQueryLimit(consoleLogs);
res.json(truncatedLogs);
});
app.get("/console-errors", (req, res) => {
const truncatedLogs = truncateLogsToQueryLimit(consoleErrors);
res.json(truncatedLogs);
});
app.get("/network-errors", (req, res) => {
const truncatedLogs = truncateLogsToQueryLimit(networkErrors);
res.json(truncatedLogs);
});
app.get("/network-success", (req, res) => {
const truncatedLogs = truncateLogsToQueryLimit(networkSuccess);
res.json(truncatedLogs);
});
app.get("/all-xhr", (req, res) => {
// Merge and sort network success and error logs by timestamp
const mergedLogs = [...networkSuccess, ...networkErrors].sort(
(a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
);
const truncatedLogs = truncateLogsToQueryLimit(mergedLogs);
res.json(truncatedLogs);
});
// Add new endpoint for selected element
app.post("/selected-element", (req, res) => {
const { data } = req.body;
selectedElement = data;
res.json({ status: "ok" });
});
app.get("/selected-element", (req, res) => {
res.json(selectedElement || { message: "No element selected" });
});
app.get("/.port", (req, res) => {
res.send(PORT.toString());
});
// Add new identity endpoint with a unique signature
app.get("/.identity", (req, res) => {
res.json({
port: PORT,
name: "browser-tools-server",
version: "1.2.0",
signature: "mcp-browser-connector-24x7",
});
});
// Add function to clear all logs
function clearAllLogs() {
console.log("Wiping all logs...");
consoleLogs.length = 0;
consoleErrors.length = 0;
networkErrors.length = 0;
networkSuccess.length = 0;
allXhr.length = 0;
selectedElement = null;
console.log("All logs have been wiped");
}
// Add endpoint to wipe logs
app.post("/wipelogs", (req, res) => {
clearAllLogs();
res.json({ status: "ok", message: "All logs cleared successfully" });
});
// Add endpoint for the extension to report the current URL
app.post("/current-url", (req, res) => {
console.log(
"Received current URL update request:",
JSON.stringify(req.body, null, 2)
);
if (req.body && req.body.url) {
const oldUrl = currentUrl;
currentUrl = req.body.url;
// Update the current tab ID if provided
if (req.body.tabId) {
const oldTabId = currentTabId;
currentTabId = req.body.tabId;
console.log(`Updated current tab ID: ${oldTabId} -> ${currentTabId}`);
}
// Log the source of the update if provided
const source = req.body.source || "unknown";
const tabId = req.body.tabId || "unknown";
const timestamp = req.body.timestamp
? new Date(req.body.timestamp).toISOString()
: "unknown";
console.log(
`Updated current URL via dedicated endpoint: ${oldUrl} -> ${currentUrl}`
);
console.log(
`URL update details: source=${source}, tabId=${tabId}, timestamp=${timestamp}`
);
res.json({
status: "ok",
url: currentUrl,
tabId: currentTabId,
previousUrl: oldUrl,
updated: oldUrl !== currentUrl,
});
} else {
console.log("No URL provided in current-url request");
res.status(400).json({ status: "error", message: "No URL provided" });
}
});
// Add endpoint to get the current URL
app.get("/current-url", (req, res) => {
console.log("Current URL requested, returning:", currentUrl);
res.json({ url: currentUrl });
});
interface ScreenshotMessage {
type: "screenshot-data" | "screenshot-error";
data?: string;
path?: string;
error?: string;
autoPaste?: boolean;
}
export class BrowserConnector {
private wss: WebSocketServer;
private activeConnection: WebSocket | null = null;
private app: express.Application;
private server: any;
private urlRequestCallbacks: Map<string, (url: string) => void> = new Map();
constructor(app: express.Application, server: any) {
this.app = app;
this.server = server;
// Initialize WebSocket server using the existing HTTP server
this.wss = new WebSocketServer({
noServer: true,
path: "/extension-ws",
});
// Register the capture-screenshot endpoint
this.app.post(
"/capture-screenshot",
async (req: express.Request, res: express.Response) => {
console.log(
"Browser Connector: Received request to /capture-screenshot endpoint"
);
console.log("Browser Connector: Request body:", req.body);
console.log(
"Browser Connector: Active WebSocket connection:",
!!this.activeConnection
);
await this.captureScreenshot(req, res);
}
);
// Set up accessibility audit endpoint
this.setupAccessibilityAudit();
// Set up performance audit endpoint
this.setupPerformanceAudit();
// Set up SEO audit endpoint
this.setupSEOAudit();
// Set up Best Practices audit endpoint
this.setupBestPracticesAudit();
// Handle upgrade requests for WebSocket
this.server.on(
"upgrade",
(request: IncomingMessage, socket: Socket, head: Buffer) => {
if (request.url === "/extension-ws") {
this.wss.handleUpgrade(request, socket, head, (ws: WebSocket) => {
this.wss.emit("connection", ws, request);
});
}
}
);
this.wss.on("connection", (ws: WebSocket) => {
console.log("Chrome extension connected via WebSocket");
this.activeConnection = ws;
ws.on("message", (message: string | Buffer | ArrayBuffer | Buffer[]) => {
try {
const data = JSON.parse(message.toString());
// Log message without the base64 data
console.log("Received WebSocket message:", {
...data,
data: data.data ? "[base64 data]" : undefined,
});
// Handle URL response
if (data.type === "current-url-response" && data.url) {
console.log("Received current URL from browser:", data.url);
currentUrl = data.url;
// Also update the tab ID if provided
if (data.tabId) {
console.log(
"Updating tab ID from WebSocket message:",
data.tabId
);
currentTabId = data.tabId;
}
// Call the callback if exists
if (
data.requestId &&
this.urlRequestCallbacks.has(data.requestId)
) {
const callback = this.urlRequestCallbacks.get(data.requestId);
if (callback) callback(data.url);
this.urlRequestCallbacks.delete(data.requestId);
}
}
// Handle page navigation event via WebSocket
// Note: This is intentionally duplicated from the HTTP handler in /extension-log
// as the extension may send navigation events through either channel
if (data.type === "page-navigated" && data.url) {
console.log("Page navigated to:", data.url);
currentUrl = data.url;
// Also update the tab ID if provided
if (data.tabId) {
console.log(
"Updating tab ID from page navigation event:",
data.tabId
);
currentTabId = data.tabId;
}
}
// Handle screenshot response
if (data.type === "screenshot-data" && data.data) {
console.log("Received screenshot data");
console.log("Screenshot path from extension:", data.path);
console.log("Auto-paste setting from extension:", data.autoPaste);
// Get the most recent callback since we're not using requestId anymore
const callbacks = Array.from(screenshotCallbacks.values());
if (callbacks.length > 0) {
const callback = callbacks[0];
console.log("Found callback, resolving promise");
// Pass both the data, path and autoPaste to the resolver
callback.resolve({
data: data.data,
path: data.path,
autoPaste: data.autoPaste,
});
screenshotCallbacks.clear(); // Clear all callbacks
} else {
console.log("No callbacks found for screenshot");
}
}
// Handle screenshot error
else if (data.type === "screenshot-error") {
console.log("Received screenshot error:", data.error);
const callbacks = Array.from(screenshotCallbacks.values());
if (callbacks.length > 0) {
const callback = callbacks[0];
callback.reject(
new Error(data.error || "Screenshot capture failed")
);
screenshotCallbacks.clear(); // Clear all callbacks
}
} else {
console.log("Unhandled message type:", data.type);
}
} catch (error) {
console.error("Error processing WebSocket message:", error);
}
});
ws.on("close", () => {
console.log("Chrome extension disconnected");
if (this.activeConnection === ws) {
this.activeConnection = null;
}
});
});
// Add screenshot endpoint
this.app.post(
"/screenshot",
(req: express.Request, res: express.Response): void => {
console.log(
"Browser Connector: Received request to /screenshot endpoint"
);
console.log("Browser Connector: Request body:", req.body);
try {
console.log("Received screenshot capture request");
const { data, path: outputPath } = req.body;
if (!data) {
console.log("Screenshot request missing data");
res.status(400).json({ error: "Missing screenshot data" });
return;
}
// Use provided path or default to downloads folder
const targetPath = outputPath || getDefaultDownloadsFolder();
console.log(`Using screenshot path: ${targetPath}`);
// Remove the data:image/png;base64, prefix
const base64Data = data.replace(/^data:image\/png;base64,/, "");
// Create the full directory path if it doesn't exist
fs.mkdirSync(targetPath, { recursive: true });
console.log(`Created/verified directory: ${targetPath}`);
// Generate a unique filename using timestamp
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
const filename = `screenshot-${timestamp}.png`;
const fullPath = path.join(targetPath, filename);
console.log(`Saving screenshot to: ${fullPath}`);
// Write the file
fs.writeFileSync(fullPath, base64Data, "base64");
console.log("Screenshot saved successfully");
res.json({
path: fullPath,
filename: filename,
});
} catch (error: unknown) {
console.error("Error saving screenshot:", error);
if (error instanceof Error) {
res.status(500).json({ error: error.message });
} else {
res.status(500).json({ error: "An unknown error occurred" });
}
}
}
);
}
private async handleScreenshot(req: express.Request, res: express.Response) {
if (!this.activeConnection) {
return res.status(503).json({ error: "Chrome extension not connected" });
}
try {
const result = await new Promise((resolve, reject) => {
// Set up one-time message handler for this screenshot request
const messageHandler = (
message: string | Buffer | ArrayBuffer | Buffer[]
) => {
try {
const response: ScreenshotMessage = JSON.parse(message.toString());
if (response.type === "screenshot-error") {
reject(new Error(response.error));
return;
}
if (
response.type === "screenshot-data" &&
response.data &&
response.path
) {
// Remove the data:image/png;base64, prefix
const base64Data = response.data.replace(
/^data:image\/png;base64,/,
""
);
// Ensure the directory exists
const dir = path.dirname(response.path);
fs.mkdirSync(dir, { recursive: true });
// Generate a unique filename using timestamp
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
const filename = `screenshot-${timestamp}.png`;
const fullPath = path.join(response.path, filename);
// Write the file
fs.writeFileSync(fullPath, base64Data, "base64");
resolve({
path: fullPath,
filename: filename,
});
}
} catch (error) {
reject(error);
} finally {
this.activeConnection?.removeListener("message", messageHandler);
}
};
// Add temporary message handler
this.activeConnection?.on("message", messageHandler);
// Request screenshot
this.activeConnection?.send(
JSON.stringify({ type: "take-screenshot" })
);
// Set timeout
setTimeout(() => {
this.activeConnection?.removeListener("message", messageHandler);
reject(new Error("Screenshot timeout"));
}, 30000); // 30 second timeout
});
res.json(result);
} catch (error: unknown) {
if (error instanceof Error) {
res.status(500).json({ error: error.message });
} else {
res.status(500).json({ error: "An unknown error occurred" });
}
}
}
// Updated method to get URL for audits with improved connection tracking and waiting
private async getUrlForAudit(): Promise<string | null> {
try {
console.log("getUrlForAudit called");
// Use the stored URL if available immediately
if (currentUrl && currentUrl !== "" && currentUrl !== "about:blank") {
console.log(`Using existing URL immediately: ${currentUrl}`);
return currentUrl;
}
// Wait for a URL to become available (retry loop)
console.log("No valid URL available yet, waiting for navigation...");
// Wait up to 10 seconds for a URL to be set (20 attempts x 500ms)
const maxAttempts = 50;
const waitTime = 500; // ms
for (let attempt = 0; attempt < maxAttempts; attempt++) {
// Check if URL is available now
if (currentUrl && currentUrl !== "" && currentUrl !== "about:blank") {
console.log(`URL became available after waiting: ${currentUrl}`);
return currentUrl;
}
// Wait before checking again
console.log(
`Waiting for URL (attempt ${attempt + 1}/${maxAttempts})...`
);
await new Promise((resolve) => setTimeout(resolve, waitTime));
}
// If we reach here, no URL became available after waiting
console.log("Timed out waiting for URL, returning null");
return null;
} catch (error) {
console.error("Error in getUrlForAudit:", error);
return null; // Return null to trigger an error
}
}
// Public method to check if there's an active connection
public hasActiveConnection(): boolean {
return this.activeConnection !== null;
}
// Add new endpoint for programmatic screenshot capture
async captureScreenshot(req: express.Request, res: express.Response) {
console.log("Browser Connector: Starting captureScreenshot method");
console.log("Browser Connector: Request headers:", req.headers);
console.log("Browser Connector: Request method:", req.method);
if (!this.activeConnection) {
console.log(
"Browser Connector: No active WebSocket connection to Chrome extension"
);
return res.status(503).json({ error: "Chrome extension not connected" });
}
try {
console.log("Browser Connector: Starting screenshot capture...");
const requestId = Date.now().toString();
console.log("Browser Connector: Generated requestId:", requestId);
// Create promise that will resolve when we get the screenshot data
const screenshotPromise = new Promise<{
data: string;
path?: string;
autoPaste?: boolean;
}>((resolve, reject) => {
console.log(
`Browser Connector: Setting up screenshot callback for requestId: ${requestId}`
);
// Store callback in map
screenshotCallbacks.set(requestId, { resolve, reject });
console.log(
"Browser Connector: Current callbacks:",
Array.from(screenshotCallbacks.keys())
);
// Set timeout to clean up if we don't get a response
setTimeout(() => {
if (screenshotCallbacks.has(requestId)) {
console.log(
`Browser Connector: Screenshot capture timed out for requestId: ${requestId}`
);
screenshotCallbacks.delete(requestId);
reject(
new Error(
"Screenshot capture timed out - no response from Chrome extension"
)
);
}
}, 10000);
});
// Send screenshot request to extension
const message = JSON.stringify({
type: "take-screenshot",
requestId: requestId,
});
console.log(
`Browser Connector: Sending WebSocket message to extension:`,
message
);
this.activeConnection.send(message);
// Wait for screenshot data
console.log("Browser Connector: Waiting for screenshot data...");
const {
data: base64Data,
path: customPath,
autoPaste,
} = await screenshotPromise;
console.log("Browser Connector: Received screenshot data, saving...");
console.log("Browser Connector: Custom path from extension:", customPath);
console.log("Browser Connector: Auto-paste setting:", autoPaste);
// Always prioritize the path from the Chrome extension
let targetPath = customPath;
// If no path provided by extension, fall back to defaults
if (!targetPath) {
targetPath =
currentSettings.screenshotPath || getDefaultDownloadsFolder();
}
// Convert the path for the current platform
targetPath = convertPathForCurrentPlatform(targetPath);
console.log(`Browser Connector: Using path: ${targetPath}`);
if (!base64Data) {
throw new Error("No screenshot data received from Chrome extension");
}
try {
fs.mkdirSync(targetPath, { recursive: true });
console.log(`Browser Connector: Created directory: ${targetPath}`);
} catch (err) {
console.error(
`Browser Connector: Error creating directory: ${targetPath}`,
err
);
throw new Error(
`Failed to create screenshot directory: ${
err instanceof Error ? err.message : String(err)
}`
);
}
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
const filename = `screenshot-${timestamp}.png`;
const fullPath = path.join(targetPath, filename);
console.log(`Browser Connector: Full screenshot path: ${fullPath}`);
// Remove the data:image/png;base64, prefix if present
const cleanBase64 = base64Data.replace(/^data:image\/png;base64,/, "");
// Save the file
try {
fs.writeFileSync(fullPath, cleanBase64, "base64");
console.log(`Browser Connector: Screenshot saved to: ${fullPath}`);
} catch (err) {
console.error(
`Browser Connector: Error saving screenshot to: ${fullPath}`,
err
);
throw new Error(
`Failed to save screenshot: ${
err instanceof Error ? err.message : String(err)
}`
);
}
// Check if running on macOS before executing AppleScript
if (os.platform() === "darwin" && autoPaste === true) {
console.log(
"Browser Connector: Running on macOS with auto-paste enabled, executing AppleScript to paste into Cursor"
);
// Create the AppleScript to copy the image to clipboard and paste into Cursor
// This version is more robust and includes debugging
const appleScript = `
-- Set path to the screenshot
set imagePath to "${fullPath}"
-- Copy the image to clipboard
try
set the clipboard to (read (POSIX file imagePath) as «class PNGf»)
on error errMsg
log "Error copying image to clipboard: " & errMsg
return "Failed to copy image to clipboard: " & errMsg
end try
-- Activate Cursor application
try
tell application "Cursor"
activate
end tell
on error errMsg
log "Error activating Cursor: " & errMsg
return "Failed to activate Cursor: " & errMsg
end try
-- Wait for the application to fully activate
delay 3
-- Try to interact with Cursor
try
tell application "System Events"
tell process "Cursor"
-- Get the frontmost window
if (count of windows) is 0 then
return "No windows found in Cursor"
end if
set cursorWindow to window 1
-- Try Method 1: Look for elements of class "Text Area"
set foundElements to {}
-- Try different selectors to find the text input area
try
-- Try with class
set textAreas to UI elements of cursorWindow whose class is "Text Area"
if (count of textAreas) > 0 then
set foundElements to textAreas
end if
end try
if (count of foundElements) is 0 then
try
-- Try with AXTextField role
set textFields to UI elements of cursorWindow whose role is "AXTextField"
if (count of textFields) > 0 then
set foundElements to textFields
end if
end try
end if
if (count of foundElements) is 0 then
try
-- Try with AXTextArea role in nested elements
set allElements to UI elements of cursorWindow
repeat with anElement in allElements
try
set childElements to UI elements of anElement
repeat with aChild in childElements
try
if role of aChild is "AXTextArea" or role of aChild is "AXTextField" then
set end of foundElements to aChild
end if
end try
end repeat
end try
end repeat
end try
end if
-- If no elements found with specific attributes, try a broader approach
if (count of foundElements) is 0 then
-- Just try to use the Command+V shortcut on the active window
-- This assumes Cursor already has focus on the right element
keystroke "v" using command down
delay 1
keystroke "here is the screenshot"
delay 1
-- Try multiple methods to press Enter
key code 36 -- Use key code for Return key
delay 0.5
keystroke return -- Use keystroke return as alternative
return "Used fallback method: Command+V on active window"
else
-- We found a potential text input element
set inputElement to item 1 of foundElements
-- Try to focus and paste
try
set focused of inputElement to true
delay 0.5
-- Paste the image
keystroke "v" using command down
delay 1
-- Type the text
keystroke "here is the screenshot"
delay 1
-- Try multiple methods to press Enter
key code 36 -- Use key code for Return key
delay 0.5
keystroke return -- Use keystroke return as alternative
return "Successfully pasted screenshot into Cursor text element"
on error errMsg
log "Error interacting with found element: " & errMsg
-- Fallback to just sending the key commands
keystroke "v" using command down
delay 1
keystroke "here is the screenshot"
delay 1
-- Try multiple methods to press Enter
key code 36 -- Use key code for Return key
delay 0.5
keystroke return -- Use keystroke return as alternative
return "Used fallback after element focus error: " & errMsg
end try
end if
end tell
end tell
on error errMsg
log "Error in System Events block: " & errMsg
return "Failed in System Events: " & errMsg
end try
`;
// Execute the AppleScript
exec(`osascript -e '${appleScript}'`, (error, stdout, stderr) => {
if (error) {
console.error(
`Browser Connector: Error executing AppleScript: ${error.message}`
);
console.error(`Browser Connector: stderr: ${stderr}`);
// Don't fail the response; log the error and proceed
} else {
console.log(`Browser Connector: AppleScript executed successfully`);
console.log(`Browser Connector: stdout: ${stdout}`);
}
});
} else {
if (os.platform() === "darwin" && !autoPaste) {
console.log(
`Browser Connector: Running on macOS but auto-paste is disabled, skipping AppleScript execution`
);
} else {
console.log(
`Browser Connector: Not running on macOS, skipping AppleScript execution`
);
}
}
res.json({
path: fullPath,
filename: filename,
});
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : String(error);
console.error(
"Browser Connector: Error capturing screenshot:",
errorMessage
);
res.status(500).json({
error: errorMessage,
});
}
}
// Add shutdown method
public shutdown() {
return new Promise<void>((resolve) => {
console.log("Shutting down WebSocket server...");
// Send close message to client if connection is active
if (
this.activeConnection &&
this.activeConnection.readyState === WebSocket.OPEN
) {
console.log("Notifying client to close connection...");
try {
this.activeConnection.send(
JSON.stringify({ type: "server-shutdown" })
);
} catch (err) {
console.error("Error sending shutdown message to client:", err);
}
}
// Set a timeout to force close after 2 seconds
const forceCloseTimeout = setTimeout(() => {
console.log("Force closing connections after timeout...");
if (this.activeConnection) {
this.activeConnection.terminate(); // Force close the connection
this.activeConnection = null;
}
this.wss.close();
resolve();
}, 2000);
// Close active WebSocket connection if exists
if (this.activeConnection) {
this.activeConnection.close(1000, "Server shutting down");
this.activeConnection = null;
}
// Close WebSocket server
this.wss.close(() => {
clearTimeout(forceCloseTimeout);
console.log("WebSocket server closed gracefully");
resolve();
});
});
}
// Sets up the accessibility audit endpoint
private setupAccessibilityAudit() {
this.setupAuditEndpoint(
AuditCategory.ACCESSIBILITY,
"/accessibility-audit",
runAccessibilityAudit
);
}
// Sets up the performance audit endpoint
private setupPerformanceAudit() {
this.setupAuditEndpoint(
AuditCategory.PERFORMANCE,
"/performance-audit",
runPerformanceAudit
);
}
// Set up SEO audit endpoint
private setupSEOAudit() {
this.setupAuditEndpoint(AuditCategory.SEO, "/seo-audit", runSEOAudit);
}
// Add a setup method for Best Practices audit
private setupBestPracticesAudit() {
this.setupAuditEndpoint(
AuditCategory.BEST_PRACTICES,
"/best-practices-audit",
runBestPracticesAudit
);
}
/**
* Generic method to set up an audit endpoint
* @param auditType The type of audit (accessibility, performance, SEO)
* @param endpoint The endpoint path
* @param auditFunction The audit function to call
*/
private setupAuditEndpoint(
auditType: string,
endpoint: string,
auditFunction: (url: string) => Promise<LighthouseReport>
) {
// Add server identity validation endpoint
this.app.get("/.identity", (req, res) => {
res.json({
signature: "mcp-browser-connector-24x7",
version: "1.2.0",
});
});
this.app.post(endpoint, async (req: any, res: any) => {
try {
console.log(`${auditType} audit request received`);
// Get URL using our helper method
const url = await this.getUrlForAudit();
if (!url) {
console.log(`No URL available for ${auditType} audit`);
return res.status(400).json({
error: `URL is required for ${auditType} audit. Make sure you navigate to a page in the browser first, and the browser-tool extension tab is open.`,
});
}
// If we're using the stored URL (not from request body), log it now
if (!req.body?.url && url === currentUrl) {
console.log(`Using stored URL for ${auditType} audit:`, url);
}
// Check if we're using the default URL
if (url === "about:blank") {
console.log(`Cannot run ${auditType} audit on about:blank`);
return res.status(400).json({
error: `Cannot run ${auditType} audit on about:blank`,
});
}
console.log(`Preparing to run ${auditType} audit for: ${url}`);
// Run the audit using the provided function
try {
const result = await auditFunction(url);
console.log(`${auditType} audit completed successfully`);
// Return the results
res.json(result);
} catch (auditError) {
console.error(`${auditType} audit failed:`, auditError);
const errorMessage =
auditError instanceof Error
? auditError.message
: String(auditError);
res.status(500).json({
error: `Failed to run ${auditType} audit: ${errorMessage}`,
});
}
} catch (error) {
console.error(`Error in ${auditType} audit endpoint:`, error);
const errorMessage =
error instanceof Error ? error.message : String(error);
res.status(500).json({
error: `Error in ${auditType} audit endpoint: ${errorMessage}`,
});
}
});
}
}
// Use an async IIFE to allow for async/await in the initial setup
(async () => {
try {
console.log(`Starting Browser Tools Server...`);
console.log(`Requested port: ${REQUESTED_PORT}`);
// Find an available port
try {
PORT = await getAvailablePort(REQUESTED_PORT);
if (PORT !== REQUESTED_PORT) {
console.log(`\n====================================`);
console.log(`NOTICE: Requested port ${REQUESTED_PORT} was in use.`);
console.log(`Using port ${PORT} instead.`);
console.log(`====================================\n`);
}
} catch (portError) {
console.error(`Failed to find an available port:`, portError);
process.exit(1);
}
// Create the server with the available port
const server = app.listen(PORT, currentSettings.serverHost, () => {
console.log(`\n=== Browser Tools Server Started ===`);
console.log(
`Aggregator listening on http://${currentSettings.serverHost}:${PORT}`
);
if (PORT !== REQUESTED_PORT) {
console.log(
`NOTE: Using fallback port ${PORT} instead of requested port ${REQUESTED_PORT}`
);
}
// Log all available network interfaces for easier discovery
const networkInterfaces = os.networkInterfaces();
console.log("\nAvailable on the following network addresses:");
Object.keys(networkInterfaces).forEach((interfaceName) => {
const interfaces = networkInterfaces[interfaceName];
if (interfaces) {
interfaces.forEach((iface) => {
if (!iface.internal && iface.family === "IPv4") {
console.log(` - http://${iface.address}:${PORT}`);
}
});
}
});
console.log(`\nFor local access use: http://localhost:${PORT}`);
});
// Handle server startup errors
server.on("error", (err: any) => {
if (err.code === "EADDRINUSE") {
console.error(
`ERROR: Port ${PORT} is still in use, despite our checks!`
);
console.error(
`This might indicate another process started using this port after our check.`
);
} else {
console.error(`Server error:`, err);
}
process.exit(1);
});
// Initialize the browser connector with the existing app AND server
const browserConnector = new BrowserConnector(app, server);
// Handle shutdown gracefully with improved error handling
process.on("SIGINT", async () => {
console.log("\nReceived SIGINT signal. Starting graceful shutdown...");
try {
// First shutdown WebSocket connections
await browserConnector.shutdown();
// Then close the HTTP server
await new Promise<void>((resolve, reject) => {
server.close((err) => {
if (err) {
console.error("Error closing HTTP server:", err);
reject(err);
} else {
console.log("HTTP server closed successfully");
resolve();
}
});
});
// Clear all logs
clearAllLogs();
console.log("Shutdown completed successfully");
process.exit(0);
} catch (error) {
console.error("Error during shutdown:", error);
// Force exit in case of error
process.exit(1);
}
});
// Also handle SIGTERM
process.on("SIGTERM", () => {
console.log("\nReceived SIGTERM signal");
process.emit("SIGINT");
});
} catch (error) {
console.error("Failed to start server:", error);
process.exit(1);
}
})().catch((err) => {
console.error("Unhandled error during server startup:", err);
process.exit(1);
});
```