Chrome 扩展：IFrame 并监听其中的点击答案

【问题标题】：Chrome Extension: IFrame and listening to clicks within itChrome 扩展：IFrame 并监听其中的点击
【发布时间】：2012-01-20 15:45:43
【问题描述】：

我想在网站正文中插入一个 iframe（frame.html，它是我的扩展程序的一部分），然后能够接收其中两个按钮的点击事件。

遇到同源策略等问题

我确信有一个相对优雅的解决方法，但我没有找到它。

【问题讨论】：

您确定需要使用 iframe 吗？如果不是绝对必要，您只需将 html 直接插入网站即可避免这样的麻烦。
该网站有很多自定义 CSS，它们会破坏我尝试插入的内容的精细布局。即使我现在可以让它看起来不错，也不能保证网站的 css 不会改变并再次搞砸。不热衷于玩猫捉老鼠。
老实说，我可以肯定这是不可能的。您可能会考虑诉诸 CSS“包罗万象”，它基本上会从所有元素中删除所有可能的样式。我知道这看起来很老套（而且很乏味），但在这种情况下它可能是你唯一的选择。

标签： javascript google-chrome-extension

【解决方案1】：

您可以使用message events 让注入的iframe 窗口与内容脚本通信（注意security）。

这是一个简单的例子。该扩展通过内容脚本将 IFRAME 元素注入所有查看的页面。该框架包含一个带有按钮的页面。该按钮有一个单击处理程序，它向顶部窗口发送消息。内容脚本有一个侦听来自 iframe 的消息的侦听器，它会打开一个显示消息数据的警报。

manifest.json：

{
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [ {
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "content.js" ],
    "run_at" : "document_end"
  } ]
}

content.js：

var iframe = document.createElement("iframe");    
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);

addEventListener("message", function(event) {
  if (event.origin + "/" == chrome.extension.getURL(""))
    alert(event.data);
}, false);

iframe.html：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <button id="button">Click me!</button>
  <script>
    document.getElementById("button").addEventListener("click", function() {
      top.postMessage("clicked!", "*");
    }, false);
  </script>
</body>
</html>

【讨论】：

看起来不错，很快就会尝试。