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

Question

我将一个 onclick 事件侦听器添加到来自扩展内容脚本的页面 DOM 的元素。

当我触发元素事件监听器时，我可以看到它记录到控制台，完美。 但我想知道为什么该事件没有出现在开发工具元素事件侦听器选项卡上。 或者它是否显示在其他地方？
在 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"
            ]
        }
    ]
}

内容.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。 此外，我可以访问事件侦听器：