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