Cant access iframe object from the loaded page

Question

I have an iframe created dynamically like

var iframe = document.createElement('iframe');
iframe.src = chrome.runtime.getURL('frame.html');
document.body.appendChild(iframe);

and now i want to close the iframe from a button click inside the loaded webpage.So for that i added a button in my loaded iframe html

<img class="icon-close" id="btn-close" src="icons/close.png">

and js code for clicking event looks like

btn_close.addEventListener('click', function() {
        var frame=parent.document.getElementById(window.name);
        console.log(frame);
});

But when i run this, i am getting an error like

Uncaught DOMException: Blocked a frame with origin from accessing a cross-origin frame

How can i solve this issue.Thanks in advance