Question

我需要能够或多或少地执行一个或更多的检查元素，以便能够在鼠标悬停时突出显示并保存特定的DOM元素。这与Google Chrome开发人员工具的“元素”标签或FireBug中的“HTML”标签同义。

我不需要显示DOM或像这些工具一样的窗格我只需要知道XPATH或DOM对象是什么，然后就可以在网页本身上突出显示（就像这些工具一样）。这些工具当前在选中时会在元素上显示阴影。

我想在Chrome中最好这样做。有没有办法添加一个监听器？我玩了chrome.contextMenus.create，但是这不会让你访问该页面，或者告诉你你在哪里。那里的selectedText无用，以后再返回同一个DOM元素。

有没有人知道一个API，可以让你知道鼠标在哪里？

注意：我无法访问该页面。即，这是因为我正在检查第三方网页，而不是我可以控制的网页。

Answer 1

这是一项相当大的工作。使用jQuery，您可以设置鼠标悬停的元素，如下所示：

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

要获得xPath expresson是你必须自己做的事情，尽管你可能会发现firebug's implementation of it是一个有用的资源。

Answer 2

这是一个非常基本的实现，可以帮助您入门：

注入css（通过清单）：

.el-selection {outline: 1px solid blue;}

注入内容脚本：

$(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;
});

Answer 3

您可以随时使用FireBug Lite。它是一个JavaScript版本，因此，您使用它的浏览器并不重要。只需在HTML <head>中包含此脚本：

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

希望有所帮助。

检查Element for Chrome Extension？

3 个答案: