Html 从 chrome 的扩展内容脚本访问 iframe 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11325415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
access iframe content from a chrome's extension content script
提问by fmsf
I'm doing a plugin to do some transformations to the interface. I keep getting unsafe javascript attempt to access frame with url.... Domains, protocols and ports must match(typical cross site issue)
我正在做一个插件来对界面进行一些转换。我不断收到unsafe javascript attempt to access frame with url.... Domains, protocols and ports must match（典型的跨站点问题）
But being an extension it should have access to the iframe's content http://code.google.com/chrome/extensions/content_scripts.html...
但作为一个扩展，它应该可以访问 iframe 的内容http://code.google.com/chrome/extensions/content_scripts.html...
Doesn anyone know how to access it's contents so they can be capturable?
有谁知道如何访问它的内容以便他们可以被捕获？
回答by Rob W
There's generally no direct way of accessing a different-origin windowobject. If you want to securelycommunicate between content scripts in different frames, you have to send a message to the background page which in turn sends the message back to the tab.
通常没有直接的方法来访问不同来源的window对象。如果您想在不同框架中的内容脚本之间安全地通信，您必须向后台页面发送一条消息，后台页面又将消息发送回选项卡。
Here is an example:
下面是一个例子：
Part of manifest.json:
部分manifest.json：
"background": {"scripts":["bg.js"]},
"content_scripts": [
{"js": ["main.js"], "matches": ["<all_urls>"]},
{"js": ["sub.js"], "matches": ["<all_urls>"], "all_frames":true}
]
main.js:
main.js：
var isTop = true;
chrome.runtime.onMessage.addListener(function(details) {
alert('Message from frame: ' + details.data);
});
sub.js:
sub.js：
if (!window.isTop) { // true or undefined
// do something...
var data = 'test';
// Send message to top frame, for example:
chrome.runtime.sendMessage({sendBack:true, data:data});
}
Background script 'bg.js':
后台脚本'bg.js'：
chrome.runtime.onMessage.addListener(function(message, sender) {
if (message.sendBack) {
chrome.tabs.sendMessage(sender.tab.id, message.data);
}
});
An alternative method is to use chrome.tabs.executeScriptin bg.jsto trigger a function in the main content script.
另一种方法是使用chrome.tabs.executeScriptinbg.js来触发主内容脚本中的函数。
Relevant documentation
相关文件
回答by Eugene Titarchuk
I understand that this is an old question but I recently spent half a day in order to solve it. Usually creating of a iframe looks something like that:
我知道这是一个老问题，但我最近花了半天时间来解决它。通常创建一个 iframe 看起来像这样：
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL('iframe-content-page.html');
This frame will have different origin with a page and you will not be able to obtain its DOM. But if you create iframe just for css isolation you can do this in another way:
此框架将与页面具有不同的来源，您将无法获取其 DOM。但是如果你创建 iframe 只是为了 css 隔离，你可以用另一种方式来做到这一点：
var iframe = document.createElement('iframe');
document.getElementById("iframe-parent").appendChild(iframe);
iframe.contentDocument.write(getFrameHtml('html/iframe-content-page.html'));
.......
function getFrameHtml(htmlFileName) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", chrome.extension.getURL(html/htmlFileName), false);
xmlhttp.send();
return xmlhttp.responseText;
}
.......
"web_accessible_resources": [
"html/htmlFileName.html",
"styles/*",
"fonts/*"
]
After that you can use iframe.contentDocument to access to iframe's DOM
之后你可以使用 iframe.contentDocument 来访问 iframe 的 DOM
