动态 html iframe 中的内容脚本和操作 chrome 函数

Question

我一直在开发一个 chrome 扩展程序，它从我的服务器获取 html 内容，在页面中创建一个 iframe 并将 html 注入其中。因此，没有“src”属性，因此，我的内容脚本没有被注入。

ma​​nifest.js：

"background": { "scripts":["background.js"] },
"content_scripts":
 [
  {"js": ["toolbar.js"], "matches": ["http://*/*"]},
  {"js": ["frame.js"], "matches": ["<all_urls>"], "all_frames":true}
 ],
"web_accessible_resources": [ "loader.gif","frame.js" ],
"permissions": [ "browsingData", "history", "storage", "tabs", "management", "<all_urls>" ]

background.js：

chrome.extension.onMessage.addListener(function(details)
{
  if(details.message.sendBack)
  {
    chrome.tabs.sendMessage(details.sender.tab.id,details.message.data);
  }
});

frame.js：

some function...
if...()
{
  chrome.extension.sendMessage({ sendBack: true,data: data });
}

toolbar.js：

function setContent(data)
{
  iframe.contentDocument.open('text/html');
  iframe.contentDocument.write(data);
  iframe.contentDocument.close();
}

现在，iframe 拥有一个工具栏，其中包含与浏览器相关的功能，例如清除历史记录等。在 HTML 中，有一个锚点，onclick 应该向扩展程序发送消息，发送“clearHistory”命令。这些功能需要 chrome-extension 访问 chrome.history 和 chrome.management，所以我需要在 html 对象和父扩展之间传递消息。

问题是 iframe 没有注入 frame.js 脚本，即使它的 src 设置为某个本地文件。也许我做错了什么，但我找不到注入脚本的方法。我什至不确定注入脚本会允许这种机制。

我试图获取脚本的相对 url (chrome.tab.getURL) 并且脚本实际上被注入了，但是 console.log(chrome) 没有显示扩展对象或我可以使用的任何方法（我相信这是由于手动注入）

你怎么看？

Answer 1

iframe 的内容来自您的服务器，对吗？如果是这样，那么不要使用iframe.contentDocument 来写框架。让您的服务器直接为 iframe 提供服务。例如：

$("body").append ('<iframe src="http://YOUR_SERVER.com/YOUR_PATH?urlParams=ifAny" id="extIframe1"></iframe>');

Chrome extensions don't work well on JS-generated iframes.

然后将清单行调整为：

{"js": ["frame.js"], "matches": ["http://YOUR_SERVER.com/YOUR_PATH*"], "all_frames":true}