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

我制作了一个Chrome扩展程序，用我的YouTube订阅页面的加载我的新标签页（我遇到了X-frame-options问题），并希望隔离文档的特定元素，＃ #content是确切（即订阅Feed）。 是否可以减去以下所有内容:not(#content)或将#content切割出来并将其放入另一个

中都是可行的。 这是我的代码：

Background.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", "" ] } 

就像现在一样，YouTube加载了，但我无法在获取该文档，因为它记录了以下错误：

 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解决方案"all_frames":true在manifest.json文件中为"all_frames":true ，但这似乎无法解决它。 有任何想法吗？ 谢谢！

Answer 1

从这里的描述和你现在问过的chrome扩展相关问题，我建议你从官方指南中学到更多，因为你似乎对事件页面和内容脚本感到困惑（你应该知道all_frames只适用于内容脚本） 。

请查看同源政策 ，您应该知道Chrome扩展程序不允许您访问iframe的contentDocument。

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

1. 只需向youtube发送ajax请求即可
2. 解析返回的html响应并提取#content部分
3. 然后将它附加到canvas上

代码如下：

的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

的script.js

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

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

最后 ，我认为最好的方法是从youtube找到一些公共第三方api，我没有使用它，但似乎Youtube | Google Developer可能有所帮助。