Chrome DevTools會在元素面板中收聽多個相同元素的選擇

Question

在我的Google Chrome DevTools擴展程序中，我嘗試在DevTools面板“Elements”中收聽選擇。 特別是，應該可以聽取已經選擇的元素的選擇。

我當前的實現方法圍繞chrome.devtools.panels.elements.onSelectionChanged函數。 函數名稱已經表明只能對當前未選擇的元素做出反應。 因此，我嘗試使用幫助變量$0重置或刪除當前選擇，以便能夠再次偵聽相同的元素 - 遺憾的是沒有成功。

我的目標是以某種方式聽取元素面板中的每個點擊/選擇。 總之，我正在尋找一個onSelection偵聽器而不是onSelectonChange偵聽器。

編輯＃1

這是我嘗試過的代碼：

chrome.devtools.panels.elements.createSidebarPane(
    "Selector",
    function(sidebar) {
        // It fires if I'm selecting a specific DOM element via the elements panel the first time
        // It won't fire if I'm selecting the same DOM element again
        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
            chrome.devtools.inspectedWindow.eval(`(${getSelector})()`,
            selector => {
                console.log(selector)
                // Here I tried to reset the current selection...
                // I've already debugged it: I can assign a value to $0, 
                // but this implies that the value remains constant even 
                // after a new selection.
                chrome.devtools.inspectedWindow.eval('$0 = undefined')
            })
        })
    }
)

我想知道是否有辦法以編程方式更改選擇器...

Answer 1

我實際上找到了解決方案。

看起來我忽略了Chrome DevTools文檔中的函數inspect(<domElement>) 。 使用此功能，可以以編程方式更改輔助變量$0 。 我在每個chrome.devtools.panels.elements.onSelectionChanged.addListener()函數調用結束時調用inspect(document.body) ，因此所有其他DOM元素再次變為可選（多次）。

注意：理想情況下，您應該在該DOM元素上調用inspect(<domElement>) ，您知道您不想多次選擇它。

我希望我可以幫助有同樣問題的人。