Search code examples
javascriptgoogle-chrome-extension

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

I added an onclick event listener to an element from the page DOM from a extension content script.

When I trigger the element event listener I can see that it logs to the console, perfect. But I wanted to know why the event doesn't appear on the dev tools element event listeners tab. Or does it show somewhere else?
Tried this on chrome and 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 dev tools: in this case no click event here
enter image description here

Solution

  • It's not implemented in devtools, see and star https://crbug.com/1190426.

    Meanwhile you can switch the console context to your extension and use getEventListeners($0) either as a live expression or directly in console.

    enter image description here

    enter image description here

    The live expression result can be right-clicked and saved to a variable for further inspection.