javascript 检查 Chrome 扩展的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6537717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inspect Element for Chrome Extension?
提问by Mech Software
I need the ability to more or less perform an inspect element or more to the point be able to highlight and save particular DOM elements on mouseover. This is synonymous with the "Elements" tab of the Google Chrome developer tools or "HTML" tab in FireBug.
我需要能够或多或少地执行检查元素，或者更多地能够在鼠标悬停时突出显示和保存特定的 DOM 元素。这与 Google Chrome 开发人员工具的“元素”选项卡或 FireBug 中的“HTML”选项卡同义。
I do not need to show the DOM or a pane like these tools I simply need to know what the XPATH or DOM object is and then be able to highlight that (like these tools do) on the webpage itself. These tools currently display shading over elements when selected.
我不需要像这些工具那样显示 DOM 或窗格，我只需要知道 XPATH 或 DOM 对象是什么，然后能够在网页本身上突出显示（就像这些工具一样）。这些工具当前在选择时在元素上显示阴影。
I want to do this preferably in Chrome. Is there any way to add a listener? I played with the chrome.contextMenus.create but this does not give you access to the page, or tell you where you're at. The selectedText in there is useless to go back at a later date to the same DOM element.
我想最好在 Chrome 中执行此操作。有没有办法添加监听器？我玩过 chrome.contextMenus.create 但这并没有让你访问页面，或者告诉你你在哪里。那里的 selectedText 在以后返回到同一个 DOM 元素是没有用的。
Does anyone know of an API that allows you to know where the mouse is over?
有谁知道可以让您知道鼠标在哪里的 API？
Note: I do not have access to the page. i.e. the reason for this as an extension is because I am inspecting a 3rd party page, not one I have control over.
注意：我无权访问该页面。即作为扩展的原因是因为我正在检查第 3 方页面，而不是我可以控制的页面。
采纳答案by bcoughlan
It's quite a big job. With jQuery you can style the element that the mouse is hovered over like this:
这是一项相当大的工作。使用 jQuery，您可以像这样设置鼠标悬停在上面的元素的样式：
$("*").not("body, html").hover(function(e) {
$(this).css("border", "1px solid #000");
e.stopPropagation();
}, function(e) {
$(this).css("border", "0px");
e.stopPropagation();
});
To get the xPath expresson is something you would have to make yourself, though you might find firebug's implementation of ita useful resource.
要获得 xPath 表达式，您必须自己制作，但您可能会发现firebug 对其的实现是一个有用的资源。
回答by serg
Here is a very basic implementation to get you started:
这是一个非常基本的实现，可以帮助您入门：
Injected css (through manifest):
注入的 css（通过清单）：
.el-selection {outline: 1px solid blue;}
Injected content script:
注入内容脚本：
$(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;
});
回答by Oliver Spryn
You can always use FireBug Lite for something like this. It is a JavaScript version, and thus, it doesn't matter what browser you're using it from. Just include this script in the HTML <head>:
你总是可以使用 FireBug Lite 来做这样的事情。它是一个 JavaScript 版本，因此，您使用的是哪种浏览器并不重要。只需在 HTML 中包含此脚本<head>：
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Hope that helps.
希望有帮助。
