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>) ，您知道您不想多次选择它。

我希望我可以帮助有同样问题的人。