gpt4 book ai didi

javascript - Chrome 扩展 : IFrame and listening to clicks within it

转载 作者:行者123 更新时间:2023-12-03 16:40:14 35 4
gpt4 key购买 nike

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

遇到同源策略等问题。

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

最佳答案

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

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

list .json:

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

内容.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>

关于javascript - Chrome 扩展 : IFrame and listening to clicks within it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8511752/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com