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

Question

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

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

清单.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 开发工具：在这种情况下，这里没有点击事件

标签： javascriptgoogle-chrome-extension

Answer 1

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

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

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