从Chrome的扩展内容脚本访问iframe中的内容从Chrome的扩展内容脚本访问iframe中的

2019-06-14 14:23发布

我在做一个插件做一些转换到该接口。 我不断收到unsafe javascript attempt to access frame with url.... Domains, protocols and ports must match (典型的跨站点问题)

但作为一个扩展它应该有访问iframe的内容http://code.google.com/chrome/extensions/content_scripts.html ...

隐而不宣人知道如何访问它的内容,使他们能够能够捕捉?

Answer 1:

一般有访问不同,原产地没有直接的方法window对象。 如果你想在不同的帧内容脚本之间的安全通信,则必须将消息发送到后台页面这反过来将消息发送回标签。

下面是一个例子:

部分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

var isTop = true;
chrome.runtime.onMessage.addListener(function(details) {
    alert('Message from frame: ' + details.data);
});

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});
}

背景脚本“bg.js”:

chrome.runtime.onMessage.addListener(function(message, sender) {
    if (message.sendBack) {
        chrome.tabs.sendMessage(sender.tab.id, message.data);
    }
});

一种替代的方法是使用chrome.tabs.executeScriptbg.js在主内容脚本来触发的功能。

相关文件

  • 消息传递 c.runtime.sendMessage / c.tabs.sendMessage / c.runtime.onMessage
  • MessageSenderTab类型。
  • 内容脚本
  • chrome.tabs.executeScript


Answer 2:

据我所知,这是一个老问题,但我最近花了半天时间,以解决这个问题。 通常一个iframe的创建看起来就像这样:

var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL('iframe-content-page.html');

该框架将有一个页面不同的起源,你将无法获得其DOM。 但如果你只是对CSS的隔离创建的iframe,你可以用另一种方式做到这一点:

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/*"
]

之后,你可以使用iframe.contentDocument来访问iframe的DOM



文章来源: access iframe content from a chrome's extension content script