如何从Background向Content Script发送runtime.sendMessage？报错接收端不存在

错误原因 #

你误用了browser.runtime.sendMessage给content script发消息——这个API仅用于扩展内部脚本（如background、popup）之间通信。要给注入到标签页的content script发消息，必须用browser.tabs.sendMessage并指定目标标签页ID；同时你的content script监听消息的写法也不正确，没有正确注册监听器。

代码修改方案 #

1. 修正background.js：获取活跃标签页再发送消息

// background.js
browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
  // 确保获取到有效活跃标签页
  if (tabs.length > 0) {
    browser.tabs.sendMessage(tabs[0].id, {hi:'hi'})
      .catch(err => console.error('发送消息失败:', err));
  }
});

2. 修正popup中的choose_beast.js

// choose_beast.js
const storeone = document.querySelector("#storeone");

console.log(storeone)

storeone.addEventListener("click", () => {
  console.log("clicked");
  // 获取当前窗口的活跃标签页
  browser.tabs.query({active: true, currentWindow: true}).then(tabs => {
    if (tabs.length > 0) {
      browser.tabs.sendMessage(tabs[0].id, {action:"send_oi"})
        .catch(err => console.error('发送消息失败:', err));
    }
  });
});

3. 修正content script的消息监听写法

// content_scripts/sometest.js
// 必须通过addListener注册消息监听器
browser.runtime.onMessage.addListener((message) => {
  console.log('收到消息:', message);
});

额外注意事项 #

• 修改扩展代码后，需刷新目标网页，确保content script重新注入生效。
• 不要在about:开头的页面、扩展自身弹窗/选项页发送消息，这些页面不会注入你的content script。

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