Chrome扩展：如何从popup.js向content.js发送多按钮对应独立消息？

实际表现 #

点击btn1/btn2/btn3中的任意一个按钮时，控制台会同时显示"message"、"message 2"和"message 3"。

预期表现 #

• 点击按钮1时，控制台应显示文本"message"。
• 点击按钮2时，控制台应显示文本"message 2"。
• 点击按钮3时，控制台应显示文本"message 3"。

错误原因 #

1. Popup.js存在语法错误：三个按钮的点击事件监听函数均未正确闭合大括号与括号，导致事件注册逻辑混乱，甚至可能在点击btn1时才会注册btn2和btn3的监听。
2. Content.js存在双重错误：
   • 语法错误：所有chrome.runtime.onMessage.addListener的调用及回调函数都未闭合括号，代码执行时会触发异常。
   • 逻辑错误：嵌套添加消息监听器，导致每次收到消息时，三个监听器都会被触发，最终所有日志都会输出。

修复后的代码 #

Popup.js

document.querySelector('#btn1').addEventListener('click', function(){
  let message = document.getElementById('one-input').value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { type: 'btn1', content: message });
  });
});

document.querySelector('#btn2').addEventListener('click', function(){
  let message2 = document.getElementById('two-input').value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.sendMessage(tabs[0].id, { type: 'btn2', content: message2 });
  });
});

document.querySelector('#btn3').addEventListener('click', function(){
  let message3 = document.getElementById('three-input').value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {              
    chrome.tabs.sendMessage(tabs[0].id, { type: 'btn3', content: message3 });
  });
});

Content.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch(message.type) {
    case 'btn1':
      console.log('message');
      break;
    case 'btn2':
      console.log('message 2');
      break;
    case 'btn3':
      console.log('message 3');
      break;
  }
});

修复说明 #

• Popup.js：将每个按钮的点击事件监听独立编写，正确闭合所有语法结构，同时给发送的消息添加type字段，用于标识消息来源。
• Content.js：只保留一个消息监听器，通过switch判断消息的type字段，对应输出不同的日志内容，避免了多个监听器同时触发的问题。

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