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

【问题标题】：Chrome dev tools doesn't show the event listener added via extension content scriptChrome 开发工具不显示通过扩展内容脚本添加的事件侦听器
【发布时间】：2021-03-20 01:05:30
【问题描述】：

我从扩展内容脚本的页面 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 开发工具：在这种情况下这里没有点击事件

【问题讨论】：

你选择了元素吗？我不记得这是否有必要。
是的，在元素选项卡上，我选择了元素（以蓝色突出显示）。

标签： javascript google-chrome-extension

【解决方案1】：

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

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

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

【讨论】：

哇，很高兴知道！这是故意的，因为扩展程序生活在“不同的世界”中吗？或者只是没有实施。

【解决方案2】：

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

然后，我单击检查弹出窗口，我可以看到控制台、断点、HTML、CSS 和 Javascript。另外，我可以访问事件监听器：

【讨论】：

在这种情况下，我将代码注入到主 DOM。不是弹出窗口的意思。