logo标签列表

Chrome扩展程序中的检查元素是什么？

javascriptjquerygoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
13

我需要类似于“Google Chrome开发者工具”中的“元素”选项卡或者“FireBug”中的“HTML”选项卡，可以突出显示并保存特定的DOM元素，即能够对鼠标悬停在其上的元素进行高亮处理。

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

我希望在Chrome中实现这个功能。有没有办法添加监听器？我尝试了chrome.contextMenus.create但它无法访问页面，也无法告诉你自己所处的位置。其中的selectedText无法让我回到以后同一个DOM元素。

有没有人知道是否有API可以允许你知道鼠标所在位置呢?

备注：我无法访问该页面。也就是说，作为一个扩展程序的原因是因为我正在检查一个第三方页面，而不是我控制的页面。

感谢大家的意见，但有件事我没有注意到并将在编辑中加入，那就是我无法控制页面。这就是为什么我想将其作为扩展来完成的原因。我无法在页面本身上进行操作。我不能控制内容，因此需要像“firebug”一样工作。 - Mech
你可以在页面上使用内容脚本来实现这一点。请参考：http://code.google.com/chrome/extensions/dev/content_scripts.html - serg
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的实现很有用。
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;
});
1

你可以随时使用FireBug Lite来完成这样的任务。它是一个JavaScript版本，因此，无论你从哪个浏览器使用它都没有问题。只需在HTML的<head>中包含此脚本即可：

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

希望有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接