铬分机 - 未捕获的抛出：DOMException：访问一个跨来源帧阻止与原点的帧

Question

之前有人将这篇文章作为另一篇文章中，像这样的重复：SecurityError: Blocked a frame with origin from accessing a cross-origin frame这个职位是不同的，因为它是如何避免这个错误在Chrome web扩展的背景下，这意味着有可能是唯一的解决方案。

我端起一个Firefox扩展昆腾Chrome浏览器。扩展注入的iFrame到用户的当前页面。眼下，扩建工程没有在Firefox量子的问题，你可以在这里找到：https://addons.mozilla.org/en-US/firefox/addon/tl-dr-auto-summarizer/?src=search

iframe的来源是被称为是在扩展中捆绑的“inject.html”一个HTML文件。

这里是缩短（以避免使交过长）代码喷射的iFrame。此代码是在用户的当前标签内容脚本中：

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);

下面是对于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'"

}

注入的iFrame后，我设置了“点击”的侦听iFrame中的按钮，一旦iFrame的加载。我这个使用下面的代码示例做。然而，虽然下面的代码在Firefox量子工程，它引发Chrome的例外。

iFrame.onload = () => {

                //The error occurs on the following line.

                var closeButton = iFrame.contentWindow.document.getElementById("close-btn");

                closeButton.addEventListener("click", () => {
                    //Do Stuff
                });

                var copyButton = iFrame.contentWindow.document.getElementById("copy-btn");

                copyButton.addEventListener("click", () => {
                    //Do stuff
                });

            }

我得到以下异常：

未捕获的抛出：DOMException：访问一个跨来源帧阻止与原籍“http://example.com”的帧。在HTMLIFrameElement.iFrame.onload（文件：/// C：/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js：58：56）

我如何才能避免这个错误？

如果你想知道，我能够使用Promise API和Chrome扩展的内部browser命名的原因是因为我使用由Mozilla提供的填充工具，可以让我使用的承诺和browser命名空间。

以下是一个被点击其工具栏图标时，扩展显示弹出的代码：

//Enable the polyfill for the content script and execute it in the current tab

browser.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);
}

最后，这里是内容脚本的全码：

https://pastebin.com/Yrs68zAB

Answer 1

你可以尝试上传的代码，您是否想在IFRAME什么，web服务器，并设置标题。

'Access-Control-Allow-Origin: *'

火狐通常工作与本地文件较好，这可以解释你的错误

origin "http://example.com" from accessing a cross-origin frame. at file:///C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js

Answer 2

对于浏览器 - 我包括在我的iframe的脚本标记。然后，我可以用iframe中加载脚本的内部使用<button element>.addEventListener("click", function() {}。对于帧到主机的通信，我用window.parent.postMessage和其它这样的方法。为了加载的iframe，我增加了以下我manifest.json：

  "web_accessible_resources": [
    "inject-content/inject.html",
    "inject-content/cleanslate.css"
  ]