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

【问题标题】：Give Chrome extension access to iframe contents授予 Chrome 扩展程序访问 iframe 内容的权限
【发布时间】：2016-06-04 21:50:48
【问题描述】：

我制作了一个 Chrome 扩展程序，它使用我的 YouTube 订阅页面的 <iframe> 加载我的新标签页（我解决了 X-frame-options 问题）并且想要隔离文档的特定元素 #content确切地说（即订阅源）。无论是减去: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#contentisolated 以便从我的新标签页导航。我已经看到建议在manifest.json 文件中使用"all_frames":true 的解决方案，但这似乎并没有解决它。有任何想法吗？谢谢！

【问题讨论】：

另见stackoverflow.com/q/8917593/32453

标签： javascript jquery html iframe google-chrome-extension

【解决方案1】：

从这里的描述和你这几天问的chrome扩展相关问题，我建议你从Official Guide了解更多，因为你似乎对Event page和content scripts感到困惑（你应该知道all_frames仅适用于内容脚本）。

看看Same-origin Policy你应该知道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 上找到一些公开的 3rd 方 api，我没有使用它，但似乎 Youtube | Google Developer 可能会有所帮助。

【讨论】：

谢谢！我正在调查。
我将如何加载 YouTube 拥有的众多脚本？现在我正在尝试加载页面，然后删除除#content 和带有script 或link 标签的元素之外的所有内容。然而它仍然没有样式加载。我将如何解决这个问题？此外，即使我尝试加载请求并且不删除任何内容，它也会在没有应用样式且没有 body 或 html 标记的情况下加载。
考虑到工作量，建议大家多了解一下Youtube | Google Developer，对于订阅，看来Implementation and Migration: Subscriptions应该会有所帮助。