Chrome DevTools listen to multiple selections of the same element in the elements panel

问题

In my Google Chrome DevTools Extension I try to listen to the selections in the DevTools panel "Elements". In particular, it should be possible to listen to the selection of the already selected element.

My current implementation method revolves around the function chrome.devtools.panels.elements.onSelectionChanged. The function name already suggests that it is only possible to react to elements that are not currently selected. Therefore I tried to reset or remove the current selection with the help variable $0, to be able to listen to the same element again - unfortunately without success.

My goal is to somehow listen to every click/selection in the elements panel. In summary, I am looking for an onSelection listener instead of an onSelectonChange listener.

EDIT #1

Here's my code I've tried:

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')
            })
        })
    }
)

I am wondering if there is a way to change the selector programmatically...

回答1:

I found a solution actually.

It looks like I overlooked the function inspect(<domElement>) in the Chrome DevTools documentation. With this function it is possible to programmatically change the auxiliary variable $0. I call inspect(document.body) at the end of each chrome.devtools.panels.elements.onSelectionChanged.addListener() function call, thus all other DOM elements become selectable again (several times).

Note: Ideally you should call inspect(<domElement>) on that DOM element where you know you don't want to select it multiple times.

I hope that I could help someone with the same problem.

来源：https://stackoverflow.com/questions/56121027/chrome-devtools-listen-to-multiple-selections-of-the-same-element-in-the-element