Chrome 开发工具不显示通过扩展内容脚本添加的事件侦听器

Question

我从扩展内容脚本中向页面 DOM 中的元素添加了一个 onclick 事件侦听器。

当我触发元素事件监听器时，我可以看到它记录到控制台，完美。但我想知道为什么该事件没有出现在开发工具元素事件侦听器选项卡上。还是显示在其他地方？
在 chrome 和 firefox 上试过这个。

manifest.json

{
    "manifest_version": 2,
    "name": "Test Extension",
    "version": "0.0",
    "background": {
        "persistent": false,
        "scripts": [
            "background.js"
        ]
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

content.js

const div = document.getElementById("id")

div.addEventListener("click", function () {
   console.log("extension click")
})

Chrome 开发工具：这里没有点击事件

Answer 1

它未在 devtools 中实现，请参阅并标注 https://crbug.com/1190426。

同时，您可以将控制台上下文切换到您的扩展程序，并将 getEventListeners($0) 用作实时表达式或直接在控制台中使用。

可以右键单击实时表达式结果并将其保存到变量中以供进一步检查。

Answer 2

可以这么说，它生活在自己的世界里。我在调试 Chrome 扩展时，通常会右键单击它：

然后，我点击 Inspect Popup，我可以看到控制台、断点、HTML、CSS 和 Javascript。此外，我可以访问事件侦听器：