Question

我已经制作了一个Chrome扩展程序，用<iframe>我的YouTube订阅页面加载了我的新标签页（我遇到了X-frame-options问题）并想要隔离一个特定元素文档，#content确切地说（即订阅Feed）。是否可以减去:not(#content)或切割#content并将其放入另一个<div>的所有内容都是可行的。这是我的代码：

Background.html

<html> 
    <head>   
        <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="window.js"></script>
    </head>
    <body>
        <iframe id="left"  name="left"></iframe>
        <div id="canvas"></div>
    </body>
</html>

Window.js

$(document).ready(function(){
    var $left = $('#left');    
    $left.on('load', function() {
        $(this).contents().find('#content').clone().appendTo('#canvas');
    });    
    $left.attr('src', 'https://www.youtube.com/feed/subscriptions');    
});

的script.js

chrome.webRequest.onHeadersReceived.addListener(
    function(info) {
        var headers = info.responseHeaders;
        for (var i = headers.length - 1; i >= 0; --i) {
            var header = headers[i].name.toLowerCase();
            if (header == 'x-frame-options' || header == 'frame-options') {
                headers.splice(i, 1); // Remove header
            }
        }
        return {
            responseHeaders: headers
        };
    }, {
        urls: ['*://*/*'], // Pattern to match all http(s) pages
        types: ['sub_frame']
    }, ['blocking', 'responseHeaders']
);

的manifest.json

{
    "manifest_version": 2,
    "version": "1.0",

    "background": "background.html",

    "chrome_url_overrides" : {
        "newtab": "background.html"
    },
    "permissions": [
        "background",
        "contextMenus",
        "webRequest",
        "webRequestBlocking",
        "tabs",
        "<all_urls>"
    ]   
}

就像现在一样，YouTube加载了，但我无法在<iframe>中暂停文档，因为它记录了以下错误：

Uncaught SecurityError: Failed to read the 'contentDocument' property from 
'HTMLIFrameElement': Blocked a frame with origin "chrome-extension://ID" from 
accessing a frame with origin "https://www.youtube.com".  The frame requesting 
access has a protocol of "chrome-extension", the frame being accessed has a 
protocol of "https". Protocols must match.

我试图将div#content隔离，以便于从我的新标签页导航。我见过建议在"all_frames":true文件中使用manifest.json的解决方案，但似乎并没有解决它。有任何想法吗？谢谢！

Answer 1

根据此处的说明以及您最近询问的Chrome扩展程序相关问题，我们建议您从Official Guide了解更多信息，因为您似乎对Event page和{{3}感到困惑（你应该知道all_frames只适用于内容脚本）。

查看content scripts，您应该知道Chrome扩展程序不允许您访问iframe的contentDocument。

由于您的目的是从youtube中提取#content部分，然后将其附加到新标签页中的画布，为什么不呢？

只需向youtube发送ajax请求
解析返回的html响应并解压缩#content部分
然后将其附加到画布

代码如下：

的manifest.json

{
    "name": "Your extension name",
    "manifest_version": 2,
    "version": "1.0",
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    }, 
    "permissions": [
        "https://www.youtube.com/feed/subscriptions/*"
    ]
}

newtab.html

<!DOCTYPE html>
<html> 
    <head>   
    </head>
    <body>
        <div id="canvas"></div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

的script.js

$.post("https://www.youtube.com/feed/subscriptions", function(html) {
   $(html).find("#content").appendTo('#canvas');
});

请注意，youtube页面中的原始图片src看起来像src="//..."，您应该在Chrome扩展程序中的//之前添加正确的域名。 youtube有很多要加载的脚本，你还需要处理那部分逻辑。

最后一点，我认为最好的方法是从youtube找到一些公共第三方API，我没有使用它，但似乎Same-origin Policy可能会有所帮助。

授予Chrome扩展程序访问iframe内容的权限

1 个答案: