我想将iframe(frame.html是我的扩展程序的一部分)插入到网站的正文中,然后能够接收其中两个按钮的点击事件。
使用相同的原始政策等遇到问题
我确信这方面有一个相对优雅的解决方法,但我没有太多运气找到它。
答案 0 :(得分:7)
您可以使用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>