getSelectedElement
Retrieve the currently highlighted webpage element for AI applications to analyze browser content through Chrome extension integration.
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 and handler for getSelectedElement. Fetches data from the browser connector server's /selected-element endpoint and returns it as MCP content.
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), }, ], }; }); } ); - GET endpoint /selected-element that returns the currently stored selectedElement object or a no-selection message.
app.get("/selected-element", (req, res) => { res.json(selectedElement || { message: "No element selected" }); }); - Handler in /extension-log POST for type 'selected-element', stores the element data in 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 to store the currently selected DOM element data.
let selectedElement: any = null; - chrome-extension/devtools.js:732-734 (helper)Chrome DevTools Elements panel selection listener that triggers captureAndSendElement() when $0 changes.
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => { captureAndSendElement(); }); - chrome-extension/devtools.js:690-729 (helper)Function that evaluates JS in inspected window to extract data from selected element $0 and sends it to the browser connector.
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, }); } ); }