javascript - window.postMessage 在 Chrome 扩展上表现异常

Question

我在 Chrome 扩展内容脚本中使用 window.postMessage:

function() {
   window.addEventListener("message", function(event) {
        console.log(event);
   }, false);


   window.postMessage({ type: \"FROM_PAGE\"}, "*");}

异常行为是我第一次调用这个函数时，控制台打印一次事件；我第二次调用时，控制台打印两次；第三次，三次。
我的代码有什么问题吗？

Answer 1

这是因为您每次调用该函数时都会添加一个新事件监听器。

因此，您添加的每个 EventListener 都会收到 postmessage 发布的消息然后就是

console.log(event)

所以你第一次打电话时你就可以正常工作了。您EventListeners函数，只执行一次，因为只有 1 EventListener附加到调用 console.log 的 DOM

第二次有两个EventListeners执行console.log等等...

您应该附上您EventListener

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

在你的职责之外。
并且只执行 window.postMessage({ type: \"FROM_PAGE\"}, "*");函数内部的部分