授予 Chrome 扩展程序访问 iframe 内容的权限
Posted
技术标签:
【中文标题】授予 Chrome 扩展程序访问 iframe 内容的权限【英文标题】：Give Chrome extension access to iframe contents 【发布时间】：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 的解决方案，但这似乎并没有解决它。有任何想法吗？谢谢！
【问题讨论】：
另见***.com/q/8917593/32453 【参考方案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应该会有所帮助。以上是关于授予 Chrome 扩展程序访问 iframe 内容的权限的主要内容，如果未能解决你的问题，请参考以下文章
在 iFrame 中激活 Zurb Foundation 的 Joyride，来自 Chrome 扩展内容脚本