getSelectedElement
Retrieve the currently selected HTML element in the browser for monitoring, interaction, or analysis, enabling precise data extraction in AI-driven applications.
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)Registers the MCP tool 'getSelectedElement' and defines its handler function, which forwards the request to the browser connector server's '/selected-element' endpoint and returns the JSON 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), }, ], }; }); } );
- Defines the HTTP GET endpoint '/selected-element' that returns the currently stored selected element data from memory (global 'selectedElement' variable) or a 'No element selected' message.app.get("/selected-element", (req, res) => { res.json(selectedElement || { message: "No element selected" }); });
- In the '/extension-log' POST handler, updates the global 'selectedElement' variable when receiving a log entry of type 'selected-element' from the Chrome extension.case "selected-element": console.log("Updating selected element:", { tagName: data.element?.tagName, id: data.element?.id, className: data.element?.className, }); selectedElement = data.element; break;
- chrome-extension/devtools.js:689-734 (helper)Listens for element selection changes in DevTools Elements panel and captures the selected element ($0) properties (tag, id, class, text, attributes, dimensions, innerHTML), then sends it to the server as a 'selected-element' log via sendToBrowserConnector.// 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(); });
- Global in-memory storage variable that holds the latest selected element data received from the Chrome extension.let selectedElement: any = null;