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

Question

在我的 Google Chrome DevTools Extension 中，我尝试听取 DevTools 面板中的选择 "Elements"。特别是，应该可以监听已经选择的元素的选择。

我目前的实现方式是围绕chrome.devtools.panels.elements.onSelectionChanged这个功能展开的。函数名称已经暗示它只能对当前未选择的元素做出反应。因此，我尝试使用帮助变量 [=13=] 重置或删除当前选择，以便能够再次收听相同的元素 - 不幸的是没有成功。

我的目标是以某种方式收听元素面板中的每个 click/selection。总之，我正在寻找 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 [=11=], 
                // but this implies that the value remains constant even 
                // after a new selection.
                chrome.devtools.inspectedWindow.eval('[=11=] = undefined')
            })
        })
    }
)

我想知道是否有办法以编程方式更改选择器...

Answer 1

我居然找到了解决办法

看来我忽略了 Chrome DevTools 文档中的函数 inspect(<domElement>)。使用此功能，可以通过编程方式更改辅助变量 [=11=]。我在每次 chrome.devtools.panels.elements.onSelectionChanged.addListener() 函数调用结束时调用 inspect(document.body)，因此所有其他 DOM 元素再次 selectable（多次）。

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

希望能帮到有同样问题的人。

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

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

javascript

google-chrome

google-chrome-extension

google-chrome-devtools