检查元素的Chrome扩展程序?

我需要更多或更少的执行检查元素或更重要的是能够突出和节省鼠标悬停特定DOM元素的能力。 这是与“元素”的谷歌Chrome开发者工具“HTML”选项卡中萤火选项卡或代名词。

我并不需要显示DOM或喜欢这些工具,我只是需要知道XPath或DOM对象是什么,然后能够突出(如这些工具)对网页本身窗格。 当选择这些工具目前在显示阴影的元素。

我想这样做,最好是在Chrome。 有什么办法增加一个监听器? 我使用了与chrome.contextMenus.create但是这并没有给你访问该页面,或者告诉你你在哪里。 在那里selectedText是没用的,回去在稍后的日期相同的DOM元素。

有谁知道一个API,它可以让你知道在哪里鼠标悬停的?

注意:我没有访问该页面。 即作为扩展这样做的原因是因为我检查第三方网页,而不是我有控制权。

--------------解决方案-------------

这是相当大的工作。 与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(通过清单):

.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;
});

您可以随时使用Firebug精简版这样的事情。 这是一个JavaScript版本,因此浏览器是什么你使用它,从它并不重要。 只是包括在HTML这个脚本<head>

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

希望有所帮助。

分类:JavaScript的 时间:2015-03-14 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.790 (s). 10 q(s)