檢查 Chrome 擴展的元素？

Question

我需要能夠或多或少地執行檢查元素或更多地能夠在鼠標懸停時突出顯示和保存特定的 DOM 元素。 這與 Google Chrome 開發者工具的“元素”標簽或 FireBug 中的“HTML”標簽是同義詞。

我不需要像這些工具那樣顯示 DOM 或窗格，我只需要知道 XPATH 或 DOM object 是什么，然后能夠在網頁本身上突出顯示（就像這些工具一樣）。 這些工具當前在選擇時會在元素上顯示陰影。

我想最好在 Chrome 中執行此操作。 有沒有辦法添加監聽器？ 我玩過 chrome.contextMenus.create 但這不會讓你訪問頁面，或者告訴你你在哪里。 那里的 selectedText 對 go 稍后返回到相同的 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 對它的實現是一個有用的資源。

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

Answer 3

你總是可以使用 FireBug Lite 來做這樣的事情。 它是 JavaScript 版本，因此，您使用的瀏覽器無關緊要。 只需將此腳本包含在 HTML <head>中：

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

希望有幫助。

檢查 Chrome 擴展的元素？

問題描述

3 個解決方案

解決方案1
7 已采納 2011-06-30 16:20:31

解決方案2
2 2011-06-30 16:22:15

解決方案3
1 2011-06-30 17:49:41

檢查 Chrome 擴展的元素？

問題描述

3 個解決方案

解決方案1 7 已采納 2011-06-30 16:20:31

解決方案2 2 2011-06-30 16:22:15

解決方案3 1 2011-06-30 17:49:41

解決方案1
7 已采納 2011-06-30 16:20:31

解決方案2
2 2011-06-30 16:22:15

解決方案3
1 2011-06-30 17:49:41