Chrome扩展MV3设为启动页时chrome.runtime.sendMessage无响应问题

核心原因 #

当网页被设为Chrome启动页时，页面加载时机早于Manifest V3扩展的Background Service Worker激活。
Manifest V3的Background采用Service Worker机制，它是按需激活的（只有在有事件触发时才启动）。Chrome启动时会立刻加载启动页，此时扩展的Service Worker还未完成初始化，chrome.runtime.onMessageExternal监听还未注册，导致网页发送的消息无人接收，sendMessage因既得不到响应也没有明确错误抛出，就会出现“卡住”的现象。

而正常打开网页时，扩展的Service Worker可能已经被之前的操作唤醒过，或者网页加载时Service Worker已完成启动，所以消息能正常交互。

解决方案 #

1. 网页端添加超时重试机制 #

给sendMessage添加超时和重试逻辑，等待Service Worker激活后再发送消息：

// 替换成你的扩展ID
const EXTENSION_ID = "your_extension_id_here";

function sendMessageWithRetry(message, maxRetries = 3, retryDelay = 1000) {
  return new Promise((resolve, reject) => {
    const trySend = (remainingRetries) => {
      chrome.runtime.sendMessage(EXTENSION_ID, message, (response) => {
        if (chrome.runtime.lastError) {
          if (remainingRetries > 0) {
            setTimeout(() => trySend(remainingRetries - 1), retryDelay);
          } else {
            reject(new Error("Failed to send message after retries: " + chrome.runtime.lastError.message));
          }
        } else {
          resolve(response);
        }
      });
    };
    trySend(maxRetries);
  });
}

// 使用示例
sendMessageWithRetry({ action: "check" })
  .then(res => console.log("Response:", res))
  .catch(err => console.error("Error:", err));

2. 延迟网页端消息发送 #

确保网页在页面完全加载后再发送消息，给扩展Service Worker留出启动时间：

window.addEventListener("load", () => {
  // 页面加载完成后再发送消息
  chrome.runtime.sendMessage(EXTENSION_ID, { action: "check" }, (res) => {
    console.log("Response:", res);
  });
});

3. 扩展端主动触发Service Worker激活 #

虽然Manifest V3的Service Worker是按需启动，但可以在扩展安装/更新时添加简单的唤醒逻辑（比如向自身发送一条空消息），不过最可靠的方案还是网页端的重试机制。

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