Chrome扩展MV3发送消息无响应，报错接收端不存在，求排查

问题根源 #

你当前的代码存在两个核心错误：

1. 消息方向与接收端不匹配：
   • chrome.tabs.sendMessage(tabId, message)的作用是向指定标签页的内容脚本发送消息，但你既没有向标签页注入内容脚本，也没有在标签页上下文（内容脚本）中设置消息监听器，自然会提示“接收端不存在”。
   • 你在后台注册的chrome.runtime.onMessage，是用来监听来自内容脚本、popup等其他扩展上下文的消息，无法接收chrome.tabs.sendMessage发出的消息（因为这条消息的目标是标签页，不是后台）。
2. 监听器重复注册：每次点击扩展图标都会新增一个chrome.runtime.onMessage监听器，会导致后续消息触发多次回调，属于不良实践。

解决方案 #

场景1：后台与标签页内容脚本通信（最常见需求） #

要实现后台向标签页发送消息，需要先向标签页注入内容脚本，再在内容脚本中注册消息监听器，最后由后台发送消息。

方案A：通过func直接注入内容脚本逻辑

修改background.js如下：

chrome.action.onClicked.addListener(async (tab) => {
  console.log('clicked');
  try {
    // 第一步：向当前激活标签页注入内容脚本并注册监听器
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        // 内容脚本中的消息监听器
        chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
          console.log('内容脚本收到消息:', request);
          // 可选：向后台回复消息
          sendResponse({ status: '消息已接收' });
        });
      }
    });

    // 第二步：向标签页发送消息
    const response = await chrome.tabs.sendMessage(tab.id, { message: 'run' });
    console.log('后台收到内容脚本回复:', response);
  } catch (error) {
    console.error('操作失败:', error);
  }
});

方案B：使用单独的内容脚本文件（更易维护）

1. 在扩展目录下创建content.js文件：

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('内容脚本收到消息:', request);
  sendResponse({ status: '消息已接收' });
});

2. 修改background.js注入该文件：

chrome.action.onClicked.addListener(async (tab) => {
  console.log('clicked');
  try {
    // 注入内容脚本文件
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content.js']
    });

    // 发送消息
    const response = await chrome.tabs.sendMessage(tab.id, { message: 'run' });
    console.log('后台收到回复:', response);
  } catch (error) {
    console.error('操作失败:', error);
  }
});

场景2：仅在后台内部执行逻辑（无需消息机制） #

如果你的需求只是在后台内部触发逻辑，完全不需要使用消息API，直接调用函数即可：

chrome.action.onClicked.addListener((tab) => {
  console.log('clicked');
  // 直接执行目标逻辑
  handleRunLogic();
});

function handleRunLogic() {
  console.log('执行run逻辑');
}

关键注意事项 #

• MV3中必须通过chrome.scripting.executeScript主动注入内容脚本，无法像MV2那样通过content_scripts字段自动注入（除非你在manifest中配置了特定匹配规则）。
• 确保manifest.json中已声明scripting权限和对应的host_permissions（你的现有配置已满足要求）。
• 避免重复注册监听器：如果需要长期监听消息，应该在后台脚本启动时注册一次，而非每次点击图标时重复注册。

内容的提问来源于stack exchange，提问作者John M.