Chrome扩展background向content script调用sendMessage失败怎么解决

你现有代码的核心逻辑错误是先发送消息、后注入content script，发送消息时content script还未被注入到页面，自然没有监听器接收消息。就算调整注入和发消息的顺序，也需要处理content script加载、监听器注册的延迟问题，可采用以下三种方案解决：

方案1：调整执行顺序 + 监听content script就绪通知（最稳妥） #

先注入content script，等content script主动上报监听器注册完成后，再触发background的消息发送逻辑。

修改后background.js代码 #

// 先执行content script注入
chrome.tabs.executeScript(/* tab.id */, {
  file: script,
}, () => {
  // 注册就绪消息监听
  chrome.runtime.onMessage.addListener(function readyListener(request, sender) {
    // 判断是对应tab的就绪通知
    if (sender.tab.id === /* 目标tab.id */ && request.type === 'CONTENT_SCRIPT_READY') {
      // 移除单次监听避免重复触发
      chrome.runtime.onMessage.removeListener(readyListener);
      // 此时content script监听器已就绪，可安全发消息
      chrome.tabs.sendMessage(/* tab.id */, { type: MessageType.ON_EXTENSION_INSTALL_OR_UPDATE }, res => {
        // 处理响应逻辑
      });
    }
  });
});

修改后script.js代码 #

// 先注册消息监听器
chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
  if (request.type === MessageType.ON_EXTENSION_INSTALL_OR_UPDATE) {
    sendResponse('ok');
  }
});
// 监听器注册完成后主动通知background
chrome.runtime.sendMessage({ type: 'CONTENT_SCRIPT_READY' });

方案2：消息重试+错误捕获（无需修改content script） #

在background侧捕获通信错误，加重试逻辑，设置最大重试次数避免死循环。

background.js代码示例 #

// 封装带重试的发消息方法
function sendWithRetry(tabId, message, maxRetry = 5, interval = 100) {
  chrome.tabs.sendMessage(tabId, message, (res) => {
    // 捕获无接收端错误，还有重试次数就延迟重发
    if (chrome.runtime.lastError && maxRetry > 0) {
      setTimeout(() => sendWithRetry(tabId, message, maxRetry - 1, interval), interval);
    } else {
      // 正常处理响应逻辑
    }
  })
}

// 先注入脚本，再调用重试发消息方法
chrome.tabs.executeScript(/* tab.id */, {
  file: script,
}, () => {
  sendWithRetry(/* tab.id */, { type: MessageType.ON_EXTENSION_INSTALL_OR_UPDATE });
});

方案3：利用executeScript回调返回值判断就绪 #

chrome.tabs.executeScript的回调会拿到content script最后一行的执行结果，可直接用这个返回值判断content script加载完成。

修改后background.js代码 #

chrome.tabs.executeScript(/* tab.id */, {
  file: script,
}, (result) => {
  // 确认content script加载完成返回就绪标识
  if (result?.[0] === 'ready') {
    chrome.tabs.sendMessage(/* tab.id */, { type: MessageType.ON_EXTENSION_INSTALL_OR_UPDATE }, res => {
      // 处理响应逻辑
    });
  }
});

修改后script.js代码 #

chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
  sendResponse('ok');
});
// 末尾加返回标识，会被executeScript的回调拿到
'ready';

注意：如果使用Manifest V3版本扩展，需要将chrome.tabs.executeScript替换为chrome.scripting.executeScript，同时在manifest.json中申请scripting权限。

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