Получить доступ к контенту iframe из скрипта расширения chrome

Question

Я делаю плагин, чтобы сделать некоторые преобразования в интерфейсе. Я продолжаю получать 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.executeScript в bg.js вызвать функцию в скрипте основного контента.

Соответствующая документация

• Передача сообщений c.runtime.sendMessage ^/ c.tabs.sendMessage ^/ c.runtime.onMessage
• MessageSender а также Tab типы.
• Контентные скрипты
• chrome.tabs.executeScript

Answer 2

Я понимаю, что это старый вопрос, но недавно я потратил полдня, чтобы его решить. Обычно создание iframe выглядит примерно так:

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

Этот фрейм будет иметь разное происхождение со страницей, и вы не сможете получить его 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/*"
]

После этого вы можете использовать iframe.contentDocument для доступа к DOM iframe.