You are watching: Blocked a frame with origin from accessing a cross-origin frame

Chrome extension - Uncaught DOMException: blocked a structure with origin from accessing a cross-origin frame

Before someone marks this short article as a duplicate of an additional post, such as this: SecurityError: blocked a frame with origin from accessing a cross-origin framework this post is different since it is around avoiding this error in the context of a Chrome web extension, which way there might be distinctive solutions.

I to be porting a Firefox Quantum expansion to Chrome. The expansion injects an iFrame into the user"s present web page. Best now, the expansion works without difficulties in Firefox Quantum, girlfriend can uncover it here: https://addons.mozilla.org/en-US/firefox/addon/tl-dr-auto-summarizer/?src=search

The resource of the iFrame is a HTML record called "inject.html" the is bundled within the extension.

Here is the shortened (to protect against making the article excessively long) password that injects the iFrame. This password is in ~ a content script in the user"s existing tab:

var iFrame = document.createElement("iFrame");iFrame.id = "contentFrame";iFrame.classList.add("cleanslate");iFrame.style.cssText = "width: 100% !important; height: 100% !important; border: none !important;";iFrame.src = browser.extension.getURL("inject-content/inject.html");document.body.appendChild(iFrame);Here is the manifest.json

"manifest_version": 2, "name": "TL;DR - Summarizer", "version": "3.0", "description": "Summarizes webpages", "permissions": < "activeTab", "tabs", "*://*.smmry.com/*" >, "icons": "48": "icons/border-48.png" , "browser_action": "browser_style": true, "default_popup": "popup/choose_length_page.html", "default_icon": "16": "icons/summarizer-icon-16.png", "32": "icons/summarizer-icon-32.png" , "web_accessible_resources": < "inject-content/inject.html", "inject-content/cleanslate.css" >, "content_security_policy": "script-src "self" "sha256-AeZmmPP/9ueCrodQPplotiV3Pw0YW4QqifjUL7NE248="; object-src "self""After injecting the iFrame, I collection the "click" listeners because that the buttons in ~ the iFrame, as soon as the iFrame has actually loaded. I carry out this using the complying with code sample. However, while the adhering to code functions in Firefox Quantum, that throws an exemption in Chrome.

iFrame.onload = () => //The error wake up on the adhering to line.

See more: How Long Is 50M - How Long Does It Take To Walk 50 Meters

Var closeButton = iFrame.contentWindow.document.getElementById("close-btn"); closeButton.addEventListener("click", () => //Do ingredient ); var copyButton = iFrame.contentWindow.document.getElementById("copy-btn"); copyButton.addEventListener("click", () => //Do stuff ); I obtain the adhering to exception:

Uncaught DOMException: clogged a framework with beginning "http://example.com" native accessing a cross-origin frame.at HTMLIFrameElement.iFrame.onload (file:///C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js:58:56)

How can I avoid this error?

In instance anyone is wondering, the factor I am able to usage the Promise API and also the internet browser namespace within of a Chrome expansion is since I am utilizing a polyfill noted by Mozilla that permits me to use promises and the web browser namespace.

Here is the code for the popup the the extension display screens when its toolbar symbol is clicked:

//Enable the polyfill for the content script and execute that in the present tabbrowser.tabs.executeScript( file: "/polyfills/browser-polyfill.js" ).then(loadContentScript).catch((error) => logError(error));function loadContentScript() browser.tabs.executeScript( file: "/inject-content/inject.js" ).then(listenForClicks).catch((error) => logError(error));function listenForClicks() document.addEventListener("click", e => if (!e.target.classList.contains("btn")) return; else browser.tabs.query( active: true, currentWindow: true ) .then(tabs => browser.tabs.sendMessage(tabs<0>.id, summaryLength: e.target.id, targetURL: tabs<0>.url ); ); );function logError(error) console.log(error);Lastly, here is the complete code of the contents script: