Изменение элементов iframe с локальным источником с расширением Chrome

Question

Я сейчас работаю над расширением Chrome, но я сталкиваюсь с проблемами разрешения/безопасности. У меня есть файл шаблона HTML, который я вставляю в плавающий iframe на определенных веб-страницах. У меня есть определенная информация, полученная от AJAX/cookies, которую я хочу вставить в шаблон. Когда я делаю это, я встретил с ошибкой:

Некоторые соответствующий код:

$(this).after('<div id=\"flowframe\"><iframe src=\"'+chrome.extension.getURL('hoverwindow.html')+'\"></iframe></div>'); 
$('iframe').contents().find('#description').html(data.description); 

Вторая строка бросает ошибку:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement' 
Blocked a frame with origin "http://ugradcalendar.uwaterloo.ca" from accessing a frame with origin "chrome-extension://kdjcjbijngfephllebpnahpodnbcnhlo". 
The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "chrome-extension". Protocols must match. 

Я думаю, что мой манифест настроен должным образом , но я не совсем уверен:

... 
"web_accessible_resources": ["loading.gif", "hoverwindow.html"], 
"content_scripts": [ 
{ 
    "matches": ["http://ugradcalendar.uwaterloo.ca/*"], 
    "css": ["extension-styling.css"], 
    "js": ["jquery-1.11.3.js","js.cookie.js","script.js"], 
    "all_frames": true 
} 
], 
"permissions": [ 
    "activeTab", 
    "cookies", 
    "http://uwflow.com/", 
    "https://uwflow.com/", 
    "http://ugradcalendar.uwaterloo.ca/", 
    "https://ugradcalendar.uwaterloo.ca/" 
] 

Answer 1

Итак, пару дней спустя, и я нашел решение, которое работает на меня. Для этого я не добился успеха с iframe.

Поскольку мой шаблон был локальный файл, я узнал, что я мог бы просто $.load() шаблона в абсолютное положение div и спасти себя от головной боли postMessage ошибок и других iframe причуд.

Для справки, в случае, если кто-нибудь работает в аналогичной проблемой, пытаясь использовать местные html в iframe, как я сделал это:

$('body').after('<div id=\"flowframe\"></div>'); 
$('#flowframe').load(chrome.extension.getURL("hoverwindow.html")); 

Тогда я могу напрямую изменять элементы hoverwindow.html на тот же домен без проблем.