从 Chrome 扩展内容脚本将 iframe 调整为动态内容

Question

在我的扩展程序中，我有一个内容脚本，它在当前网页（例如 www.google.com）内创建一个包含 <iframe> 的 <div>。我将一个页面加载到 iframe 中，但内容必须是动态的，所以我首先使用 sendRequest 将一堆 HTML 发布到背景页面。然后 iframe 页面查询背景页面（同样使用 sendRequest），获取 HTML 并将其添加到页面正文中。

问题是添加动态内容时 iframe 的大小不正确，因此它有滚动条。我想做这样的事情：

iframe.addEventListener("DOMContentLoaded", function(event) {
    div.style.height = iframe.style.height = iframe.contentDocument.body.scrollHeight;
    div.style.width = iframe.style.width = iframe.contentDocument.body.scrollWidth;
}, false);

不幸的是，我有两个问题。首先，DOMContentLoaded 事件永远不会被触发（为什么？）。其次，我大概无法访问iframe.contentDocument，因为 iframe 是从不同的域加载的。

我可以让 iframe 使用 sendRequest 将其大小发布到托管页面可以使用的位置。但是，我也使用相同的代码将 iframe 插入到弹出窗口中，因此没有简单的方法来发送请求（因为它将使用chrome.tabs.sendRequest 用于内容脚本，但chrome.extension.sendRequest 用于弹出窗口）。

关于如何做到这一点的任何想法？

Answer 1

多查了一下，找到了解决办法。 iframe 一旦加载了动态内容，就会调用：

var size = { height: document.body.scrollHeight, width: document.body.scrollWidth };
top.postMessage(JSON.stringify(size), "*");

父窗口包含：

window.addEventListener("message", function(event) {
    var size = JSON.parse(event.data);
    iframe.style.height = div.style.height = size.height + "px";
    iframe.style.width = div.style.width = size.width + "px";
});