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

Question

我正在创建扩展以使用标签组织 YouTube 频道。它有 angular 前端 url 像这样

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

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

Load denied by X-Frame-Options: https://www.youtube.com/ does not permit cross-origin framing.

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

我做了什么：

1 添加了对 manifest.json 的权限：

"webRequest", "://.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！