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。 此外，我可以訪問事件偵聽器：