Web Worker出现Console.log重复打印问题求助

看起来你遇到的问题很典型，我之前也碰到过类似的情况，大概率是事件监听器重复注册或者后台脚本多次执行导致的，咱们一步步排查：

1. 检查后台脚本的点击事件监听器是否被多次绑定 #

如果你的扩展用的是事件页面（manifest.json里设置了"persistent": false），浏览器会在空闲时释放后台页面，当再次需要时重新加载脚本。这就会导致chrome.browserAction.onClicked.addListener被多次执行，每次点击按钮都会触发多个回调——也就是多次给Worker发消息（甚至创建多个Worker）。

解决方法：给监听器加个“仅注册一次”的标志 #

在后台脚本里用一个全局变量来控制，确保监听器只被添加一次：

// background.js
let isListenerRegistered = false;

function handleButtonClick() {
  // 创建Worker并发送消息的逻辑
  const worker = new Worker('./worker.js');
  
  worker.postMessage('你的消息内容');
  
  worker.onmessage = (e) => {
    console.log('Worker回复:', e.data);
    // 记得用完销毁Worker，避免内存泄漏
    worker.terminate();
  };
}

// 确保只注册一次点击监听器
if (!isListenerRegistered) {
  chrome.browserAction.onClicked.addListener(handleButtonClick);
  isListenerRegistered = true;
}

2. 检查Web Worker内部的消息监听器是否重复绑定 #

如果你的Worker脚本里用了self.addEventListener('message', ...)而不是self.onmessage = ...，不小心多次添加了监听器的话，每次收到消息就会触发多个回调，导致打印两次消息，但只有其中一次会回复。

解决方法：用赋值方式绑定消息事件（确保唯一） #

把Worker里的监听代码改成这样：

// worker.js
// 用onmessage赋值，只会覆盖之前的监听器，不会重复绑定
self.onmessage = (e) => {
  console.log('收到消息:', e.data);
  // 发送回复
  self.postMessage('已收到消息的回复');
};

如果必须用addEventListener，那要确保只调用一次，比如用一个标志位控制：

// worker.js
let isMessageListenerAdded = false;

function handleMessage(e) {
  console.log('收到消息:', e.data);
  self.postMessage('已收到消息的回复');
}

if (!isMessageListenerAdded) {
  self.addEventListener('message', handleMessage);
  isMessageListenerAdded = true;
}

3. 检查是否存在多个Worker实例 #

如果后台脚本里的Worker是全局变量，多次点击按钮会创建新的Worker，但旧的Worker没有被销毁，可能导致旧Worker还在监听消息。这种情况记得在收到回复后调用worker.terminate()销毁Worker，避免内存泄漏和意外的消息接收。

最后验证一下 #

按上面的方法修改后，刷新扩展（在扩展管理页面点击“重新加载”），再测试点击按钮，应该就能看到消息只打印一次，回复也正常了。

内容的提问来源于stack exchange，提问作者Raymi306