javascript - 检查 Chrome 扩展的元素？

Question

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

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

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

有谁知道可以让您知道鼠标悬停在哪里的 API？

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

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 表达式，您必须自己制作，尽管您可能会发现 firebug's implementation of it有用的资源。