Inspect Element for Chrome Extension?
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 the开发者_运维知识库se 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.
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.
Here is a very basic implementation to get you started:
Injected css (through manifest):
.el-selection {outline: 1px solid blue;}
Injected content script:
$(window).mouseenter(function(event) {
$(event.target).addClass("el-selection");
});
$(window).mouseleave(function(event) {
$(event.target).removeClass("el-selection");
});
$(window).click(function(event) {
console.log("selected: ", event.target);
return false;
});
You can always use FireBug Lite for something like this. It is a JavaScript version, and thus, it doesn't matter what browser you're using it from. Just include this script in the HTML <head>:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Hope that helps.
加载中,请稍侯......
精彩评论