Chrome扩展开发：chrome.tabs.sendMessage消息传递问题求助

你的代码核心问题有两个：

• 后台脚本（background.js）无法访问网页DOM，你试图在后台里获取网页中的#edit-payment按钮，这完全行不通——后台是独立于网页的隔离环境，看不到网页里的元素。
• 消息传递的逻辑搞反了，监听网页按钮点击的代码应该放在内容脚本（content.js）里，而不是后台。

方案一：直接在内容脚本处理（最简洁，符合你的需求） #

不需要后台参与，直接在content.js里监听按钮点击并触发alert：

// 等待网页DOM加载完成后再查找按钮
document.addEventListener('DOMContentLoaded', () => {
  const paymentBtn = document.getElementById('edit-payment');
  if (paymentBtn) {
    paymentBtn.addEventListener('click', () => {
      alert('hello');
    });
  }
});

方案二：通过后台中转（如果后续需要后台处理逻辑） #

如果一定要走后台通信流程，需要调整成「内容脚本发消息给后台 → 后台再通知内容脚本触发alert」的逻辑：

修改后的content.js

document.addEventListener('DOMContentLoaded', () => {
  const paymentBtn = document.getElementById('edit-payment');
  if (paymentBtn) {
    paymentBtn.addEventListener('click', () => {
      // 给后台发送触发alert的请求
      chrome.runtime.sendMessage({ action: 'triggerAlert' });
    });
  }
});

修改后的background.js

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((msg, sender) => {
  if (msg.action === 'triggerAlert') {
    // 给发送消息的标签页回发消息，触发alert
    chrome.tabs.sendMessage(sender.tab.id, { action: 'saySomething' });
  }
});

另外提一句：Chrome已经逐步弃用Manifest V2，建议后续升级到Manifest V3，不过当前代码按V2修改后就能正常运行。

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