Javascript 检查滤芯是否有镀铬加长件？

我需要能够或多或少地执行一个inspect元素，或者能够在mouseover上突出显示和保存特定的DOM元素。这是谷歌Chrome开发者工具的“元素”选项卡或FireBug中的“HTML”选项卡的同义词

我不需要显示DOM或类似于这些工具的窗格，我只需要知道XPATH或DOM对象是什么，然后能够在网页本身上突出显示（像这些工具一样）。选择后，这些工具当前会在图元上显示着色

我想做这个最好在铬。有没有办法添加一个侦听器？我玩了chrome.contextMenus.create，但这不会让你访问页面，也不会告诉你你在哪里。其中的selectedText在以后返回到同一DOM元素是没有用的

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

---

注意：我没有访问该页面的权限。i、 e.之所以将其作为扩展，是因为我正在检查第三方页面，而不是我可以控制的页面。

这是一项相当大的工作。使用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，您必须自己制作，尽管您可能会找到一个有用的资源。

以下是一个非常基本的实现：

注入的css（通过清单）：

注入内容脚本：

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

---

您可以始终使用FireBug Lite来实现类似的功能。它是一个JavaScript版本，因此，无论您从哪个浏览器使用它都无关紧要。只需将此脚本包含在HTML

中：

---

希望这能有所帮助。

谢谢大家的意见，但有一件事我没有注意到，并将在此编辑，那就是我无法控制页面。这就是为什么我想把它作为一个扩展。我不能在页面上这样做。我不控制内容，因此需要像“萤火虫”一样工作。你可以在页面本身上这样做，而且应该这样做。它被称为内容脚本：

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

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