Javascript 由于跨站点错误，无法从chrome扩展插件的弹出窗口中打开YouTube

我有一个chrome扩展，可以从弹出窗口获取当前正在播放的YouTube视频对象。以下是我将遵循的步骤：

用户点击我们网站上的视频链接。（成功）

网站向分机发送信号，使用内部消息打开弹出窗口。（成功）

YouTube弹出窗口打开，另一个弹出窗口打开，重定向到我们网站上的空白页面。（成功）

空白页中插入了一个托管在扩展内部的脚本。（成功）

此脚本从其他弹出窗口获取YouTube视频。（失败：跨站点访问错误）

我看到许多扩展在访问其他域站点之前要求用户权限。我试过这个方法：

当用户单击我们网站上的视频链接时，它会执行以下功能：

function go() 
   {
   var event = document.createEvent('Event');
   event.initEvent('openmyapp');
   document.dispatchEvent(event);
   }

扩展的内容脚本侦听此事件，如下所示：

document.addEventListener("openmyapp", function (data) {
    if (cscript)
        cscript.injectApp();    // <-- This is successfully injecting the app.
    (window.browser || window.chrome).runtime.sendMessage(extensionId, 'site_pop',
        function (granted) {
            console.log(granted);
        });
});

它正在打开YouTube和应用程序弹出窗口，但未请求许可

---

如何解决此问题？

如果使用

iframe

删除

X-Frame-Options

并且如果使用XHR add

访问控制允许来源：

// manifest.json

"permissions": [
  "webRequest", "webRequestBlocking", ".*://*.youtube.com/*"
]

// background.js
chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    let newHeaders = {};

    for (let key in details.responseHeaders) {
      if (key.toLowerCase() == 'x-frame-options')
        continue;
      newHeaders[key] = details.responseHeader[key]
    }
    
    // add xhr permission
    newHeaders['Access-Control-Allow-Origin'] = '*';

    return { newHeaders };
  },
  // filters
  {
    urls: ["*://*.youtube.com/*"],
  },
  // extraInfoSpec
  ["blocking", "responseHeaders"]
);

---

访问控制允许来源：

作为响应头通常被认为是个坏主意。我不知道如何允许一个扩展来实现这一点

// manifest.json

"permissions": [
  "webRequest", "webRequestBlocking", ".*://*.youtube.com/*"
]

// background.js
chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    let newHeaders = {};

    for (let key in details.responseHeaders) {
      if (key.toLowerCase() == 'x-frame-options')
        continue;
      newHeaders[key] = details.responseHeader[key]
    }
    
    // add xhr permission
    newHeaders['Access-Control-Allow-Origin'] = '*';

    return { newHeaders };
  },
  // filters
  {
    urls: ["*://*.youtube.com/*"],
  },
  // extraInfoSpec
  ["blocking", "responseHeaders"]
);