getSelectedElement
Retrieve the currently selected element in a browser for monitoring and interaction. Enables AI applications to capture and analyze browser data via MCP.
Instructions
Get the selected element from the browser
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- browser-tools-mcp/mcp-server.ts:301-320 (registration)MCP tool registration for 'getSelectedElement'. The handler fetches data from the browser connector server's /selected-element endpoint and formats it as MCP response.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), }, ], }; }); } );
- HTTP GET handler for /selected-element endpoint that returns the currently stored selected element data from the DevTools extension or null message.app.get("/selected-element", (req, res) => { res.json(selectedElement || { message: "No element selected" }); });
- In /extension-log POST handler, stores incoming selected element data from Chrome extension into the global selectedElement variable.case "selected-element": console.log("Updating selected element:", { tagName: data.element?.tagName, id: data.element?.id, className: data.element?.className, }); selectedElement = data.element; break;
- Global variable that stores the most recent selected element data received from the Chrome DevTools extension.let selectedElement: any = null;
- chrome-extension/devtools.js:690-728 (helper)Chrome DevTools extension listener for element selection changes. Captures details of the selected element ($0) and sends it via POST to the server /extension-log endpoint.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, }); } );