Chrome 扩展程序 - 未捕获的 DOMException：阻止具有源的帧访问跨源帧

问：

在有人将此帖子标记为另一篇帖子的副本之前，例如： SecurityError：阻止具有源的帧访问跨域帧 这篇文章是不同的，因为它是关于在 Chrome 网络扩展程序的上下文中避免此错误，这意味着可能有独特的解决方案。

我正在将 Firefox Quantum 扩展移植到 Chrome。该扩展将 iFrame 注入到用户的当前网页中。目前，该扩展程序在 Firefox Quantum 中可以正常工作，您可以在此处找到它： 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 Quantum 中有效，但它在 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 （file:///C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js:58:56）

如何避免此错误？

如果有人想知道，我之所以能够在 Chrome 扩展中使用 API 和命名空间，是因为我使用了 Mozilla 提供的 polyfill，它允许我使用 promise 和命名空间。Promisebrowserbrowser

以下是单击扩展工具栏图标时显示的弹出窗口的代码：

//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