使用 Chrome 扩展修改具有本地源的 iframe 的元素答案

【问题标题】：Modifying elements of an iframe with local source with Chrome extension使用 Chrome 扩展修改具有本地源的 iframe 的元素
【发布时间】：2015-09-11 12:54:48
【问题描述】：

我现在正在处理 Chrome 扩展，但我遇到了权限/安全问题。我有一个本地 HTML 模板文件，我将其插入到某些网页上的浮动 iframe 中。我从AJAX / cookie 中检索到某些信息，我想将这些信息插入到模板中。当我这样做时，我遇到了一个错误：

一些相关代码：

$(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/"
]

【问题讨论】：

chrome 扩展只允许你访问每个框架，它不允许每个框架相互访问，这些限制仍然属于典型的浏览器要求。尝试查看 postmessage 以获得跨帧通信的解决方案。

标签： jquery google-chrome iframe google-chrome-extension

【解决方案1】：

所以，几天后，我找到了适合我的解决方案。为此，我最终没有在iframe 上取得任何成功。

由于我的模板是一个本地文件，我了解到我可以简单地将模板 $.load() 放到一个绝对位置 div 中，并免去 postMessage 错误和其他 iframe 怪癖的麻烦。

作为参考，如果有人在尝试在 iframe 中使用本地 html 时遇到类似问题，我这样做的方式是：

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

然后我可以直接修改同一域上hoverwindow.html 的元素而不会出现问题。

【讨论】：