gpt4 book ai didi

javascript - Chrome 扩展的内容脚本捕获自定义事件?

转载 作者:行者123 更新时间:2023-11-30 12:58:56 24 4
gpt4 key购买 nike

如果我们从页面触发自定义事件,注入(inject)页面的内容脚本能否捕获该事件并进行处理?

最佳答案

是的,内容脚本可以与注入(inject)的网页通信。由于内容脚本和注入(inject)网页的上下文相互隔离,因此它们必须与共享 DOM 进行通信。

我认为内容脚本无法捕获由注入(inject)页面直接触发的自定义事件。但是当特定的自定义事件被触发时,您可以将消息发布到内容脚本。 window.postMessage 可以满足您的需求。

注入(inject)页面:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">test</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("#btn").click(function(){
$(document).trigger("MY_EVENT");
});
$(document).on("MY_EVENT",function(){
window.postMessage({ type: "HELLO", text: "Hello from the webpage!" }, "*");
});
</script>
</body>
</html>

内容脚本:

window.addEventListener("message", function(event) {

if (event.source != window)
return;

if (event.data.type && (event.data.type == "HELLO")) {
alert("Content script received: " + event.data.text);
}
}, false);

希望对您有所帮助。

关于javascript - Chrome 扩展的内容脚本捕获自定义事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17986081/

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