Question

I have a content script that runs from my chrome extension.
this script injects an iframe to the body of the current page.
i want to have the possibility to close the iframe from within the iframe.
how do i do this?
when i searched this issue on the web, almost each solution uses the window.parent.document property which for some reason is undefined in my case. any ideas?

EDIT – Code Sample:

in the HTML of the iframe:

<script type="text/javascript">
        function frameClose() {
            var windowFrames = window.parent.frames;
            for (var i = 0; i < windowFrames.length; i++) {
                var aFrame = windowFrames[i];
                if (aFrame.name == 'myFrame') {
                    alert('in frame');
                    // WHAT TO DO HERE?
                    // window.parent.document is undefined
                    // aFrame.parentNode.removeChild(aFrame); - THIS DOES NOT WORK ALSO
                    break;
                }
            }
        }
    </script>

this is how i inject the iframe:

Extension.js

chrome.browserAction.onClicked.addListener(function(tab) {

    chrome.tabs.executeScript(null, {
        file : "/js/PushIFrame.js"
    }, function() {
        if (chrome.extension.lastError) {
        }
    });
});

and in PushIFrame.js i have:

chrome.extension.sendMessage({
    action: "pushFrame",
    source: pushIframe(document)
});

function pushIframe(document) {
    var existingFrame = document.getElementById('bmarkFrame');
    if (existingFrame == null) {
        var temp = document.createElement('iframe');
        temp.id = 'myFrame';
        temp.name = 'myFrame';
        temp.setAttribute('scrolling', 'no');
        temp.setAttribute('allowtransparency', 'true');
        temp.style.border = 'none';
        temp.style.height = '100%';
        temp.style.width = '100%';
        temp.style.position = 'fixed';
        temp.style.zIndex = 99999999;
        temp.style.top = 0;
        temp.style.left = 0;
        temp.style.display = 'block';
        temp.src = 'https://www.mysite.com/';

        document.body.appendChild(temp);
    }
    else {
        existingFrame.style.display = 'block';
    }
}

Answer 1

Let the content script (say PushIframe.js) bind a message event to the main frame. Then, whenever you want to hide the iframe, call parent.postMessage to notify the main frame. This message is received by the content script, from where you can hide the frame (as defined in your function pushIframe).

// PushIframe.js:
addEventListener('message', function(ev) {
    if (ev.data === 'closeIframe') {
        pushIframe(document); // Your code
    }
});

// Iframe:
<script>
function frameClose() {
    parent.postMessage('closeIframe', '*');
}
</script>