Question

在我的Google Chrome DevTools扩展程序中，我尝试收听DevTools面板“元素”中的选择。特别是，应该可以听取已选择元素的选择。

我当前的实现方法围绕函数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。我在每个inspect(document.body)函数调用的末尾调用chrome.devtools.panels.elements.onSelectionChanged.addListener()，因此所有其他DOM元素都可以再次选择（几次）。

注意：理想情况下，您应该在不想多次选择的DOM元素上调用inspect(<domElement>)。

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

Chrome DevTools会在元素面板中监听同一元素的多个选择

1 个答案: