13

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

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

我想最好在 Chrome 中执行此操作。有没有办法添加监听器？我玩过 chrome.contextMenus.create 但这不会让你访问页面，或者告诉你你在哪里。那里的 selectedText 无法在以后返回到同一个 DOM 元素。

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

注意：我无权访问该页面。即作为扩展的原因是因为我正在检查第 3 方页面，而不是我可以控制的页面。

4

3 回答 3

7

这是一项相当大的工作。使用 jQuery，您可以像这样为鼠标悬停的元素设置样式：

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

要获得 xPath 表达式，您必须自己制作，尽管您可能会发现firebug 的实现是一个有用的资源。

于 2011-06-30T16:20:31.023 回答
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;
});
于 2011-06-30T16:22:15.120 回答
1

你总是可以使用 FireBug Lite 来做这样的事情。它是一个 JavaScript 版本，因此，您使用的浏览器无关紧要。只需在 HTML 中包含此脚本<head>：

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

希望有帮助。

于 2011-06-30T17:49:41.740 回答