Chrome扩展内容脚本会捕获自定义事件吗?

时间:2013-08-01 05:47:52

标签: javascript google-chrome-extension

如果我们从页面触发自定义事件,注入页面的内容脚本是否可以捕获该事件和进程?

1 个答案:

答案 0 :(得分:3)

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

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

注册页面:

<!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);

希望这对你有所帮助。