getSelectedElement
Retrieve the currently highlighted element from a web page for DOM analysis, enabling AI applications to inspect and interact with browser content.
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 selected element data from the browser connector server via HTTP GET /selected-element 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 endpoint handler that returns the currently stored selected element data from memory or a fallback message if none selected.
app.get("/selected-element", (req, res) => { res.json(selectedElement || { message: "No element selected" }); }); - In POST /extension-log handler, updates the global selectedElement when receiving 'selected-element' type data from Chrome DevTools 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:690-729 (helper)Chrome DevTools extension function that captures the selected element ($0) details using eval and sends it to the browser connector server as 'selected-element' log type.
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, }); } ); } - chrome-extension/devtools.js:732-734 (helper)Event listener in Chrome DevTools extension that triggers captureAndSendElement whenever the user selects a new element in the Elements panel.
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => { captureAndSendElement(); });