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([=10=]) 作为实时表达式或直接在控制台中使用。

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

Answer 2

可以说，它生活在自己的世界里。当我调试 chrome 扩展时，我通常右击它：

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

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

Chrome dev tools doesn't show the event listener added via extension content script

javascript

google-chrome-extension