Chrome扩展程序:IFrame并收听其中的点击次数

NoP*_*God 2 javascript google-chrome-extension

我想将一个iframe(frame.html是我的扩展的一部分)插入到网站的主体中,然后能够接收其中两个按钮的点击事件.

遇到同一原产地政策等问题

我确信这有一个相对优雅的解决方法,但我没有太多运气找到它.

che*_*_ca 7

您可以使用消息事件让注入的iframe窗口与内容脚本进行通信(注意安全性).

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

manifest.json的:

{
  "name": "Test",
  "version": "0.0.1",
  "content_scripts": [ {
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "content.js" ],
    "run_at" : "document_end"
  } ]
}
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)