如何在我的扩展程序中使用 iframe 嵌入 youtube 频道页面？

Question

我正在创建扩展程序以使用标签组织 youtube 频道。它有像这样的 url 有角度的前端

moz-extension://f78b3bd9-a210-41c5-9d8d-9b7ab3717f6e/index.html#/channel/UCtinbF-Q-fVthA0qrFQTgXQ

我想使用 iframe 嵌入频道页面，但安全策略不允许我这样做。

X-Frame-Options 拒绝加载：https://www.youtube.com/ 不允许跨域框架。

所以我尝试修改 X-Frame-Options，但它并没有改变任何东西（没有添加标题）。

我做了什么：

1 添加了 manifest.json 的权限：

"网络请求", "://.youtube.com/", "://www.youtube.com/*"

2 在 background.js 中写了一些代码

function addFramePermissions(e) {
    console.log("Loading url: " + e.url);

    var allowedHeaders = [];

    for (var header of e.responseHeaders) {
        if (header.name.toLowerCase() !== "x-frame-options") {
            allowedHeaders.push(header);
        } else {
            console.log('x-frame-options found!!!');
        }
    }

    e.responseHeaders = allowedHeaders;

    return { responseHeaders: e.responseHeaders };
}


browser.webRequest.onHeadersReceived.addListener(
    addFramePermissions,
    {
        urls: [
            "*://*.youtube.com/*",
            "*://youtube.com/*"
        ]
    },
    ["blocking", "responseHeaders"]
);

代码到达函数，我可以看到“x-frame-options found!!!”在控制台中，但 Firefox 的网络监视器显示 x-frame-options 存在值 SAMEORIGIN

Answer 1

我在 Chrome 中运行了我的扩展程序，Chrome 说我忘记在权限中添加“webRequestBlocking”。谢谢，Chrome！