Question

I need the ability to more or less perform an inspect element or more to the point be able to highlight and save particular DOM elements on mouseover. This is synonymous with the “Elements” tab of the Google Chrome developer tools or “HTML” tab in FireBug.

I do not need to show the DOM or a pane like these tools I simply need to know what the XPATH or DOM object is and then be able to highlight that (like these tools do) on the webpage itself. These tools currently display shading over elements when selected.

I want to do this preferably in Chrome. Is there any way to add a listener? I played with the chrome.contextMenus.create but this does not give you access to the page, or tell you where you’re at. The selectedText in there is useless to go back at a later date to the same DOM element.

Does anyone know of an API that allows you to know where the mouse is over?

Note: I do not have access to the page. i.e. the reason for this as an extension is because I am inspecting a 3rd party page, not one I have control over.

Answer 1

It’s quite a big job. With jQuery you can style the element that the mouse is hovered over like this:

$("*").not("body, html").hover(function(e) {
   $(this).css("border", "1px solid #000"); 
   e.stopPropagation();
}, function(e) {
   $(this).css("border", "0px"); 
   e.stopPropagation();
});

To get the xPath expresson is something you would have to make yourself, though you might find firebug’s implementation of it a useful resource.