动态生成的iframe内容上的Eventlistener不会触发

Question

I have a chrome extension that injects an iframe into a loaded page. The content of the iframe is programmatically generated. It includes a button to which a click event listener is added. But it does not always seem to fire. Most of the times it works, but one case in which it doesn't work is when the extension is freshly loaded (as in installed). Below is the gist of my code, do you see any issue?

content.js:

var frame = document.createElement("iframe");

frame.onload = function() {
    var doc = frame.contentDocument || frame.contentWindow.document;

    var closeButton = doc.createElement("input");
    closeButton.type = "button";
    closeButton.value = "X";
    closeButton.addEventListener("click", function() {
        document.body.removeChild(frame);
    });

    doc.body.appendChild(closeButton);
};

document.body.appendChild(frame);

manifest.json

{
    "name": "eventlistener-bug",
    "version": "0.1",
    "content_scripts": [{
        "run_at": "document_idle",
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
    }],
    "permissions": ["http://*/*", "https://*/*"],
    "manifest_version": 2
}

Answer 1

So far, it looks like this is a bug in chrome. It has been reported and accepted: https://bugs.chromium.org/p/chromium/issues/detail?id=745771

A fix is planned for version 61.

Possible workarounds are re-adding the event listener, eg in a mouseover event handler for the iframe.