mirror of
https://github.com/aaronjmars/opendia.git
synced 2025-12-29 16:16:00 +00:00
fix
This commit is contained in:
Aaron Elijah Mars
parent
4c4c9f7e3a
commit
28540634d7
@ -1,495 +0,0 @@
|
||||
// MCP Server connection configuration
|
||||
const MCP_SERVER_URL = "ws://localhost:3000";
|
||||
let mcpSocket = null;
|
||||
let reconnectInterval = null;
|
||||
let reconnectAttempts = 0;
|
||||
|
||||
// Initialize WebSocket connection to MCP server
|
||||
function connectToMCPServer() {
|
||||
if (
|
||||
mcpSocket &&
|
||||
(mcpSocket.readyState === WebSocket.OPEN ||
|
||||
mcpSocket.readyState === WebSocket.CONNECTING)
|
||||
) {
|
||||
console.log("Already connected or connecting to MCP server");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Attempting to connect to MCP server at", MCP_SERVER_URL);
|
||||
|
||||
try {
|
||||
mcpSocket = new WebSocket(MCP_SERVER_URL);
|
||||
|
||||
mcpSocket.onopen = () => {
|
||||
console.log("Connected to MCP server");
|
||||
clearInterval(reconnectInterval);
|
||||
reconnectInterval = null;
|
||||
reconnectAttempts = 0;
|
||||
|
||||
// Register available browser functions
|
||||
mcpSocket.send(
|
||||
JSON.stringify({
|
||||
type: "register",
|
||||
tools: getAvailableTools(),
|
||||
})
|
||||
);
|
||||
|
||||
// Notify popup of connection
|
||||
try {
|
||||
chrome.runtime.sendMessage({ type: "statusUpdate", connected: true });
|
||||
} catch (e) {
|
||||
// Popup might not be open
|
||||
}
|
||||
};
|
||||
|
||||
mcpSocket.onmessage = async (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
await handleMCPRequest(message);
|
||||
} catch (error) {
|
||||
console.error("Error handling message:", error);
|
||||
}
|
||||
};
|
||||
|
||||
mcpSocket.onclose = (event) => {
|
||||
console.log("Disconnected from MCP server", event.code, event.reason);
|
||||
|
||||
// Notify popup of disconnection
|
||||
try {
|
||||
chrome.runtime.sendMessage({ type: "statusUpdate", connected: false });
|
||||
} catch (e) {
|
||||
// Popup might not be open
|
||||
}
|
||||
|
||||
// Reset socket reference
|
||||
mcpSocket = null;
|
||||
|
||||
// Attempt to reconnect with exponential backoff
|
||||
if (!reconnectInterval) {
|
||||
const delay = Math.min(5000 * Math.pow(1.5, reconnectAttempts), 30000);
|
||||
reconnectAttempts++;
|
||||
console.log(`Reconnecting in ${delay / 1000} seconds...`);
|
||||
reconnectInterval = setTimeout(() => {
|
||||
reconnectInterval = null;
|
||||
connectToMCPServer();
|
||||
}, delay);
|
||||
}
|
||||
};
|
||||
|
||||
mcpSocket.onerror = (error) => {
|
||||
console.error("MCP connection error:", error);
|
||||
console.error("Make sure the MCP server is running on port 3000");
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Failed to create WebSocket:", error);
|
||||
// Try again in 5 seconds
|
||||
if (!reconnectInterval) {
|
||||
reconnectInterval = setTimeout(() => {
|
||||
reconnectInterval = null;
|
||||
connectToMCPServer();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Define available browser tools for MCP
|
||||
function getAvailableTools() {
|
||||
return [
|
||||
{
|
||||
name: "browser_navigate",
|
||||
description: "Navigate to a URL in the active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
url: { type: "string", description: "URL to navigate to" },
|
||||
},
|
||||
required: ["url"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_get_tabs",
|
||||
description: "Get all open tabs",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_create_tab",
|
||||
description: "Create a new tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
url: { type: "string", description: "URL for the new tab" },
|
||||
active: {
|
||||
type: "boolean",
|
||||
description: "Whether to make the tab active",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_close_tab",
|
||||
description: "Close a tab by ID",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
tabId: { type: "number", description: "ID of the tab to close" },
|
||||
},
|
||||
required: ["tabId"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_execute_script",
|
||||
description: "Execute JavaScript in the active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
code: { type: "string", description: "JavaScript code to execute" },
|
||||
},
|
||||
required: ["code"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_get_page_content",
|
||||
description: "Get the content of the active page",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
selector: {
|
||||
type: "string",
|
||||
description: "CSS selector to get specific content",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_take_screenshot",
|
||||
description: "Take a screenshot of the active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
format: {
|
||||
type: "string",
|
||||
enum: ["png", "jpeg"],
|
||||
description: "Image format",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_get_bookmarks",
|
||||
description: "Get browser bookmarks",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query for bookmarks" },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_add_bookmark",
|
||||
description: "Add a bookmark",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
title: { type: "string", description: "Bookmark title" },
|
||||
url: { type: "string", description: "Bookmark URL" },
|
||||
},
|
||||
required: ["title", "url"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_get_history",
|
||||
description: "Search browser history",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query" },
|
||||
maxResults: {
|
||||
type: "number",
|
||||
description: "Maximum number of results",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_get_cookies",
|
||||
description: "Get cookies for a domain",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
domain: { type: "string", description: "Domain to get cookies for" },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_fill_form",
|
||||
description: "Fill a form on the current page",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
formData: {
|
||||
type: "object",
|
||||
description: "Key-value pairs of form field names/IDs and values",
|
||||
},
|
||||
},
|
||||
required: ["formData"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "browser_click_element",
|
||||
description: "Click an element on the page",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
selector: {
|
||||
type: "string",
|
||||
description: "CSS selector of element to click",
|
||||
},
|
||||
},
|
||||
required: ["selector"],
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// Handle MCP requests
|
||||
async function handleMCPRequest(message) {
|
||||
const { id, method, params } = message;
|
||||
|
||||
try {
|
||||
let result;
|
||||
|
||||
switch (method) {
|
||||
case "browser_navigate":
|
||||
result = await navigateToUrl(params.url);
|
||||
break;
|
||||
case "browser_get_tabs":
|
||||
result = await getTabs();
|
||||
break;
|
||||
case "browser_create_tab":
|
||||
result = await createTab(params);
|
||||
break;
|
||||
case "browser_close_tab":
|
||||
result = await closeTab(params.tabId);
|
||||
break;
|
||||
case "browser_execute_script":
|
||||
result = await executeScript(params.code);
|
||||
break;
|
||||
case "browser_get_page_content":
|
||||
result = await getPageContent(params.selector);
|
||||
break;
|
||||
case "browser_take_screenshot":
|
||||
result = await takeScreenshot(params.format);
|
||||
break;
|
||||
case "browser_get_bookmarks":
|
||||
result = await getBookmarks(params.query);
|
||||
break;
|
||||
case "browser_add_bookmark":
|
||||
result = await addBookmark(params);
|
||||
break;
|
||||
case "browser_get_history":
|
||||
result = await getHistory(params);
|
||||
break;
|
||||
case "browser_get_cookies":
|
||||
result = await getCookies(params.domain);
|
||||
break;
|
||||
case "browser_fill_form":
|
||||
result = await fillForm(params.formData);
|
||||
break;
|
||||
case "browser_click_element":
|
||||
result = await clickElement(params.selector);
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unknown method: ${method}`);
|
||||
}
|
||||
|
||||
// Send success response
|
||||
mcpSocket.send(
|
||||
JSON.stringify({
|
||||
id,
|
||||
result,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
// Send error response
|
||||
mcpSocket.send(
|
||||
JSON.stringify({
|
||||
id,
|
||||
error: {
|
||||
message: error.message,
|
||||
code: -32603,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Browser function implementations
|
||||
async function navigateToUrl(url) {
|
||||
const [activeTab] = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
await chrome.tabs.update(activeTab.id, { url });
|
||||
return { success: true, tabId: activeTab.id };
|
||||
}
|
||||
|
||||
async function getTabs() {
|
||||
const tabs = await chrome.tabs.query({});
|
||||
return tabs.map((tab) => ({
|
||||
id: tab.id,
|
||||
title: tab.title,
|
||||
url: tab.url,
|
||||
active: tab.active,
|
||||
windowId: tab.windowId,
|
||||
}));
|
||||
}
|
||||
|
||||
async function createTab(params) {
|
||||
const tab = await chrome.tabs.create({
|
||||
url: params.url || "about:blank",
|
||||
active: params.active !== false,
|
||||
});
|
||||
return { id: tab.id, windowId: tab.windowId };
|
||||
}
|
||||
|
||||
async function closeTab(tabId) {
|
||||
await chrome.tabs.remove(tabId);
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
async function executeScript(code) {
|
||||
const [activeTab] = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
const results = await chrome.scripting.executeScript({
|
||||
target: { tabId: activeTab.id },
|
||||
func: new Function(code),
|
||||
});
|
||||
return results[0].result;
|
||||
}
|
||||
|
||||
async function getPageContent(selector) {
|
||||
const [activeTab] = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
const results = await chrome.scripting.executeScript({
|
||||
target: { tabId: activeTab.id },
|
||||
func: (sel) => {
|
||||
if (sel) {
|
||||
const element = document.querySelector(sel);
|
||||
return element ? element.innerText : null;
|
||||
}
|
||||
return document.body.innerText;
|
||||
},
|
||||
args: [selector],
|
||||
});
|
||||
return results[0].result;
|
||||
}
|
||||
|
||||
async function takeScreenshot(format = "png") {
|
||||
const dataUrl = await chrome.tabs.captureVisibleTab(null, { format });
|
||||
return { dataUrl, format };
|
||||
}
|
||||
|
||||
async function getBookmarks(query) {
|
||||
if (query) {
|
||||
return await chrome.bookmarks.search(query);
|
||||
}
|
||||
return await chrome.bookmarks.getTree();
|
||||
}
|
||||
|
||||
async function addBookmark(params) {
|
||||
const bookmark = await chrome.bookmarks.create({
|
||||
title: params.title,
|
||||
url: params.url,
|
||||
});
|
||||
return bookmark;
|
||||
}
|
||||
|
||||
async function getHistory(params) {
|
||||
const historyItems = await chrome.history.search({
|
||||
text: params.query || "",
|
||||
maxResults: params.maxResults || 100,
|
||||
});
|
||||
return historyItems;
|
||||
}
|
||||
|
||||
async function getCookies(domain) {
|
||||
const cookies = await chrome.cookies.getAll({ domain });
|
||||
return cookies;
|
||||
}
|
||||
|
||||
async function fillForm(formData) {
|
||||
const [activeTab] = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
const results = await chrome.scripting.executeScript({
|
||||
target: { tabId: activeTab.id },
|
||||
func: (data) => {
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
const element = document.querySelector(`[name="${key}"], #${key}`);
|
||||
if (element) {
|
||||
element.value = value;
|
||||
element.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
}
|
||||
}
|
||||
return { success: true, filled: Object.keys(data).length };
|
||||
},
|
||||
args: [formData],
|
||||
});
|
||||
return results[0].result;
|
||||
}
|
||||
|
||||
async function clickElement(selector) {
|
||||
const [activeTab] = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
const results = await chrome.scripting.executeScript({
|
||||
target: { tabId: activeTab.id },
|
||||
func: (sel) => {
|
||||
const element = document.querySelector(sel);
|
||||
if (element) {
|
||||
element.click();
|
||||
return { success: true, clicked: sel };
|
||||
}
|
||||
throw new Error(`Element not found: ${sel}`);
|
||||
},
|
||||
args: [selector],
|
||||
});
|
||||
return results[0].result;
|
||||
}
|
||||
|
||||
// Initialize connection when extension loads
|
||||
connectToMCPServer();
|
||||
|
||||
// Heartbeat to keep connection alive
|
||||
setInterval(() => {
|
||||
if (mcpSocket && mcpSocket.readyState === WebSocket.OPEN) {
|
||||
mcpSocket.send(JSON.stringify({ type: "ping", timestamp: Date.now() }));
|
||||
}
|
||||
}, 30000); // Every 30 seconds
|
||||
|
||||
// Handle messages from popup
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
if (request.action === "getStatus") {
|
||||
sendResponse({
|
||||
connected: mcpSocket && mcpSocket.readyState === WebSocket.OPEN,
|
||||
});
|
||||
} else if (request.action === "reconnect") {
|
||||
connectToMCPServer();
|
||||
sendResponse({ success: true });
|
||||
} else if (request.action === "test") {
|
||||
if (mcpSocket && mcpSocket.readyState === WebSocket.OPEN) {
|
||||
mcpSocket.send(JSON.stringify({ type: "test", timestamp: Date.now() }));
|
||||
}
|
||||
sendResponse({ success: true });
|
||||
}
|
||||
return true; // Keep the message channel open
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
// Content script for interacting with web pages
|
||||
console.log('MCP Browser Bridge content script loaded');
|
||||
|
||||
// Listen for messages from the background script
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
if (request.action === 'getPageInfo') {
|
||||
sendResponse({
|
||||
title: document.title,
|
||||
url: window.location.href,
|
||||
content: document.body.innerText
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "Browser MCP Bridge",
|
||||
"version": "1.0.0",
|
||||
"description": "Exposes browser functions through Model Context Protocol",
|
||||
"permissions": [
|
||||
"tabs",
|
||||
"activeTab",
|
||||
"storage",
|
||||
"bookmarks",
|
||||
"history",
|
||||
"downloads",
|
||||
"cookies",
|
||||
"webNavigation",
|
||||
"scripting",
|
||||
"nativeMessaging",
|
||||
"contextMenus",
|
||||
"notifications",
|
||||
"alarms",
|
||||
"clipboardRead",
|
||||
"clipboardWrite"
|
||||
],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
},
|
||||
"action": {
|
||||
"default_popup": "popup.html",
|
||||
"default_title": "MCP Browser Bridge"
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": ["<all_urls>"],
|
||||
"js": ["content.js"],
|
||||
"run_at": "document_idle"
|
||||
}
|
||||
],
|
||||
"externally_connectable": {
|
||||
"ids": ["*"],
|
||||
"matches": ["http://localhost/*"]
|
||||
}
|
||||
}
|
||||
@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MCP Browser Bridge</title>
|
||||
<style>
|
||||
body {
|
||||
width: 350px;
|
||||
padding: 16px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.status-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.connected {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.disconnected {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.info {
|
||||
background-color: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
button {
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
.log {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
margin-top: 12px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>MCP Browser Bridge</h2>
|
||||
|
||||
<div class="status">
|
||||
<div class="status-indicator" id="statusIndicator"></div>
|
||||
<span id="statusText">Checking connection...</span>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<strong>Server:</strong> <span id="serverUrl">ws://localhost:3000</span
|
||||
><br />
|
||||
<strong>Available Tools:</strong> <span id="toolCount">0</span>
|
||||
</div>
|
||||
|
||||
<button id="reconnectBtn">Reconnect</button>
|
||||
<button id="testBtn">Test Connection</button>
|
||||
|
||||
<div class="log" id="log">
|
||||
<div>Waiting for activity...</div>
|
||||
</div>
|
||||
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,92 +0,0 @@
|
||||
// Popup script for status display
|
||||
let logContainer = document.getElementById("log");
|
||||
let statusIndicator = document.getElementById("statusIndicator");
|
||||
let statusText = document.getElementById("statusText");
|
||||
let toolCount = document.getElementById("toolCount");
|
||||
|
||||
// Get initial tool count
|
||||
const tools = 13; // Number of tools we expose
|
||||
toolCount.textContent = tools;
|
||||
|
||||
// Check connection status
|
||||
function checkStatus() {
|
||||
if (chrome.runtime?.id) {
|
||||
chrome.runtime.sendMessage({ action: "getStatus" }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error("Runtime error:", chrome.runtime.lastError);
|
||||
updateStatus(false);
|
||||
addLog("Error: Extension background script not responding");
|
||||
} else {
|
||||
updateStatus(response?.connected || false);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
updateStatus(false);
|
||||
addLog("Error: Extension context invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// Check status on load and periodically
|
||||
checkStatus();
|
||||
setInterval(checkStatus, 2000);
|
||||
|
||||
// Update UI based on connection status
|
||||
function updateStatus(connected) {
|
||||
if (connected) {
|
||||
statusIndicator.className = "status-indicator connected";
|
||||
statusText.textContent = "Connected to MCP server";
|
||||
} else {
|
||||
statusIndicator.className = "status-indicator disconnected";
|
||||
statusText.textContent = "Disconnected from MCP server";
|
||||
}
|
||||
}
|
||||
|
||||
// Reconnect button
|
||||
document.getElementById("reconnectBtn").addEventListener("click", () => {
|
||||
if (chrome.runtime?.id) {
|
||||
chrome.runtime.sendMessage({ action: "reconnect" }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
addLog("Error: " + chrome.runtime.lastError.message);
|
||||
} else {
|
||||
addLog("Attempting to reconnect...");
|
||||
setTimeout(checkStatus, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Test button
|
||||
document.getElementById("testBtn").addEventListener("click", () => {
|
||||
if (chrome.runtime?.id) {
|
||||
chrome.runtime.sendMessage({ action: "test" }, (response) => {
|
||||
if (chrome.runtime.lastError) {
|
||||
addLog("Error: " + chrome.runtime.lastError.message);
|
||||
} else {
|
||||
addLog("Sending test message...");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add log entry
|
||||
function addLog(message) {
|
||||
const entry = document.createElement("div");
|
||||
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
||||
logContainer.appendChild(entry);
|
||||
|
||||
// Keep only last 20 entries
|
||||
while (logContainer.children.length > 20) {
|
||||
logContainer.removeChild(logContainer.firstChild);
|
||||
}
|
||||
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
}
|
||||
|
||||
// Listen for updates from background script
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
if (message.type === "statusUpdate") {
|
||||
updateStatus(message.connected);
|
||||
} else if (message.type === "log") {
|
||||
addLog(message.message);
|
||||
}
|
||||
});
|
||||
@ -1,4 +0,0 @@
|
||||
# MCP Server Configuration
|
||||
PORT=3000
|
||||
HEALTH_PORT=3001
|
||||
NODE_ENV=development
|
||||
1230
mcp-server/package-lock.json
generated
1230
mcp-server/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,17 +0,0 @@
|
||||
{
|
||||
"name": "browser-mcp-server",
|
||||
"version": "1.0.0",
|
||||
"description": "MCP server for browser automation",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": "^8.16.0",
|
||||
"express": "^4.18.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.2"
|
||||
}
|
||||
}
|
||||
@ -1,418 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const WebSocket = require("ws");
|
||||
const express = require("express");
|
||||
|
||||
// WebSocket server for Chrome Extension
|
||||
const wss = new WebSocket.Server({ port: 3000 });
|
||||
let chromeExtensionSocket = null;
|
||||
let availableTools = [];
|
||||
|
||||
// Tool call tracking
|
||||
const pendingCalls = new Map();
|
||||
|
||||
// Simple MCP protocol implementation over stdio
|
||||
async function handleMCPRequest(request) {
|
||||
const { method, params, id } = request;
|
||||
|
||||
// Handle notifications (no id means it's a notification)
|
||||
if (!id && method && method.startsWith("notifications/")) {
|
||||
console.error(`Received notification: ${method}`);
|
||||
return null; // No response needed for notifications
|
||||
}
|
||||
|
||||
// Handle requests that don't need implementation
|
||||
if (id === undefined || id === null) {
|
||||
return null; // No response for notifications
|
||||
}
|
||||
|
||||
try {
|
||||
let result;
|
||||
|
||||
switch (method) {
|
||||
case "initialize":
|
||||
// RESPOND IMMEDIATELY - don't wait for extension
|
||||
console.error(`MCP client initializing: ${params?.clientInfo?.name || "unknown"}`);
|
||||
result = {
|
||||
protocolVersion: "2024-11-05",
|
||||
capabilities: {
|
||||
tools: {},
|
||||
},
|
||||
serverInfo: {
|
||||
name: "browser-mcp-server",
|
||||
version: "1.0.0",
|
||||
},
|
||||
instructions: "Browser automation tools via Chrome Extension bridge. Extension may take a moment to connect."
|
||||
};
|
||||
break;
|
||||
|
||||
case "tools/list":
|
||||
// Return tools even if extension not connected yet
|
||||
if (availableTools.length > 0) {
|
||||
result = {
|
||||
tools: availableTools.map((tool) => ({
|
||||
name: tool.name,
|
||||
description: tool.description,
|
||||
inputSchema: tool.inputSchema,
|
||||
})),
|
||||
};
|
||||
} else {
|
||||
// Return static tools with note that extension is connecting
|
||||
result = {
|
||||
tools: getStaticTools().map(tool => ({
|
||||
...tool,
|
||||
description: tool.description + " (Extension connecting...)"
|
||||
}))
|
||||
};
|
||||
}
|
||||
break;
|
||||
|
||||
case "tools/call":
|
||||
if (!chromeExtensionSocket || chromeExtensionSocket.readyState !== WebSocket.OPEN) {
|
||||
// Extension not connected - return helpful error
|
||||
result = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: "❌ Chrome Extension not connected. Please install and activate the browser extension, then try again.\n\nSetup instructions:\n1. Go to chrome://extensions/\n2. Enable Developer mode\n3. Click 'Load unpacked' and select the extension folder\n4. Ensure the extension is active",
|
||||
},
|
||||
],
|
||||
isError: true
|
||||
};
|
||||
} else {
|
||||
// Extension connected - try the tool call
|
||||
try {
|
||||
const toolResult = await callBrowserTool(
|
||||
params.name,
|
||||
params.arguments || {}
|
||||
);
|
||||
result = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: JSON.stringify(toolResult, null, 2),
|
||||
},
|
||||
],
|
||||
isError: false
|
||||
};
|
||||
} catch (error) {
|
||||
result = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: `❌ Tool execution failed: ${error.message}`,
|
||||
},
|
||||
],
|
||||
isError: true
|
||||
};
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case "resources/list":
|
||||
// Return empty resources list
|
||||
result = { resources: [] };
|
||||
break;
|
||||
|
||||
case "prompts/list":
|
||||
// Return empty prompts list
|
||||
result = { prompts: [] };
|
||||
break;
|
||||
|
||||
default:
|
||||
throw new Error(`Unknown method: ${method}`);
|
||||
}
|
||||
|
||||
return { jsonrpc: "2.0", id, result };
|
||||
} catch (error) {
|
||||
return {
|
||||
jsonrpc: "2.0",
|
||||
id,
|
||||
error: {
|
||||
code: -32603,
|
||||
message: error.message,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Static tool definitions for when extension isn't connected
|
||||
function getStaticTools() {
|
||||
return [
|
||||
{
|
||||
name: "browser_navigate",
|
||||
description: "Navigate to a URL in the active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
url: { type: "string", description: "URL to navigate to" }
|
||||
},
|
||||
required: ["url"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_get_tabs",
|
||||
description: "Get all open browser tabs",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_create_tab",
|
||||
description: "Create a new browser tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
url: { type: "string", description: "URL for new tab" },
|
||||
active: { type: "boolean", description: "Make tab active" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_close_tab",
|
||||
description: "Close a tab by ID",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
tabId: { type: "integer", description: "Tab ID to close" }
|
||||
},
|
||||
required: ["tabId"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_execute_script",
|
||||
description: "Execute JavaScript in active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
code: { type: "string", description: "JavaScript code" }
|
||||
},
|
||||
required: ["code"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_get_page_content",
|
||||
description: "Get page text content",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
selector: { type: "string", description: "CSS selector (optional)" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_take_screenshot",
|
||||
description: "Take screenshot of active tab",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
format: { type: "string", enum: ["png", "jpeg"], description: "Image format" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_get_bookmarks",
|
||||
description: "Get browser bookmarks",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_add_bookmark",
|
||||
description: "Add a bookmark",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
title: { type: "string", description: "Bookmark title" },
|
||||
url: { type: "string", description: "Bookmark URL" }
|
||||
},
|
||||
required: ["title", "url"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_get_history",
|
||||
description: "Search browser history",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query" },
|
||||
maxResults: { type: "integer", description: "Max results" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_get_cookies",
|
||||
description: "Get cookies for domain",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
domain: { type: "string", description: "Domain name" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_fill_form",
|
||||
description: "Fill form on current page",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
formData: { type: "object", description: "Form field data" }
|
||||
},
|
||||
required: ["formData"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "browser_click_element",
|
||||
description: "Click element on page",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
selector: { type: "string", description: "CSS selector" }
|
||||
},
|
||||
required: ["selector"]
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
// Call browser tool through Chrome Extension
|
||||
async function callBrowserTool(toolName, args) {
|
||||
if (
|
||||
!chromeExtensionSocket ||
|
||||
chromeExtensionSocket.readyState !== WebSocket.OPEN
|
||||
) {
|
||||
throw new Error(
|
||||
"Chrome Extension not connected. Make sure the extension is installed and active."
|
||||
);
|
||||
}
|
||||
|
||||
const callId = Date.now().toString();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
pendingCalls.set(callId, { resolve, reject });
|
||||
|
||||
chromeExtensionSocket.send(
|
||||
JSON.stringify({
|
||||
id: callId,
|
||||
method: toolName,
|
||||
params: args,
|
||||
})
|
||||
);
|
||||
|
||||
// Timeout after 30 seconds
|
||||
setTimeout(() => {
|
||||
if (pendingCalls.has(callId)) {
|
||||
pendingCalls.delete(callId);
|
||||
reject(new Error("Tool call timeout"));
|
||||
}
|
||||
}, 30000);
|
||||
});
|
||||
}
|
||||
|
||||
// Handle tool responses from Chrome Extension
|
||||
function handleToolResponse(message) {
|
||||
const pending = pendingCalls.get(message.id);
|
||||
if (pending) {
|
||||
pendingCalls.delete(message.id);
|
||||
if (message.error) {
|
||||
pending.reject(new Error(message.error.message));
|
||||
} else {
|
||||
pending.resolve(message.result);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Chrome Extension connections
|
||||
wss.on("connection", (ws) => {
|
||||
console.error("Chrome Extension connected");
|
||||
chromeExtensionSocket = ws;
|
||||
|
||||
// Set up ping/pong for keepalive
|
||||
const pingInterval = setInterval(() => {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.ping();
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
ws.on("message", (data) => {
|
||||
try {
|
||||
const message = JSON.parse(data);
|
||||
|
||||
if (message.type === "register") {
|
||||
availableTools = message.tools;
|
||||
console.error(`Registered ${availableTools.length} browser tools`);
|
||||
} else if (message.type === "ping") {
|
||||
// Respond to ping with pong
|
||||
ws.send(JSON.stringify({ type: "pong", timestamp: Date.now() }));
|
||||
} else if (message.id) {
|
||||
// Handle tool response
|
||||
handleToolResponse(message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing message:", error);
|
||||
}
|
||||
});
|
||||
|
||||
ws.on("close", () => {
|
||||
console.error("Chrome Extension disconnected");
|
||||
chromeExtensionSocket = null;
|
||||
clearInterval(pingInterval);
|
||||
});
|
||||
|
||||
ws.on("error", (error) => {
|
||||
console.error("WebSocket error:", error);
|
||||
});
|
||||
|
||||
ws.on("pong", () => {
|
||||
// Extension is alive
|
||||
});
|
||||
});
|
||||
|
||||
// Read from stdin
|
||||
let inputBuffer = "";
|
||||
process.stdin.on("data", async (chunk) => {
|
||||
inputBuffer += chunk.toString();
|
||||
|
||||
// Process complete lines
|
||||
const lines = inputBuffer.split("\n");
|
||||
inputBuffer = lines.pop() || "";
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.trim()) {
|
||||
try {
|
||||
const request = JSON.parse(line);
|
||||
const response = await handleMCPRequest(request);
|
||||
|
||||
// Only send response if one was generated (not for notifications)
|
||||
if (response) {
|
||||
process.stdout.write(JSON.stringify(response) + "\n");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing request:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: HTTP endpoint for health checks
|
||||
const app = express();
|
||||
app.get("/health", (req, res) => {
|
||||
res.json({
|
||||
status: "ok",
|
||||
chromeExtensionConnected: chromeExtensionSocket !== null,
|
||||
availableTools: availableTools.length,
|
||||
});
|
||||
});
|
||||
|
||||
app.listen(3001, () => {
|
||||
console.error(
|
||||
"Health check endpoint available at http://localhost:3001/health"
|
||||
);
|
||||
});
|
||||
|
||||
console.error("Browser MCP Server started");
|
||||
console.error("Waiting for Chrome Extension connection on ws://localhost:3000");
|
||||
Loading…
x
Reference in New Issue
Block a user