我创建了一个 chrome 扩展，它使用内容脚本在页面中创建一个浮动 iFrame，这反过来也加载了另一个内容脚本。
根据这个答案，这似乎是将我的内容与实际页面中的 CSS 隔离的最佳方法。
我的 iFrame 中的内容脚本有一个监听器（即 chrome.extension.onMessage.addListener），用于监听扩展创建的消息。
这在大多数情况下都有效。
似乎正在发生的事情是，在我的 iFrame 完全加载之前，扩展程序正在发送消息，并且侦听器还需要设置更改。
一旦我的原始内容脚本完成，我会在回调函数中从后台脚本发送消息，但这并不能保证 iFrame 中的侦听器可用。
如果我在发送消息之前进行任意延迟（即半秒），它似乎可以工作，但这是一个非常丑陋的黑客攻击。
有没有更好的方法在 iFrame 中设置我的监听器？
这是我的代码：
//background script
window.addEventListener("load", chrome.webRequest.onCompleted.addListener(onCompleted, { urls: ['http://acme.com/*'], types: ['main_frame', 'sub_frame']});, false);
function onCompleted(details) {
chrome.tabs.executeScript(details.tabId, {file: "page_content_script.js"}, function() {chrome.tabs.sendMessage(tab_id, {url: details.url});});
}
//page_content_script.js
my_iframe = document.createElement("iframe");
my_div = document.createElement("div");
my_iframe.id = "my_iframe";
my_div.id = "my_div";
//my_div.style = "style div as needed here to make it appear a dialog"
my_iframe.src = chrome.extension.getURL('iframe_content.html');
my_div.appendChild(my_iframe);
document.body.appendChild(my_div)
//iframe content
<!doctype html>
<html>
<head>
<script src="iframe_content_script.js"></script>
</head>
<body>
some stuff here
</body>
//iframe_content_script.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log('message received!');
}