Manifest V3中如何处理Service Worker就绪前接收的消息？

当Service Worker处于inactive状态时，内容脚本过早发送消息会触发The message port closed before a response was received.错误，本质是SW还处于启动（starting）阶段，尚未准备好处理消息。以下是几种可行的处理方案：

方案1：内容脚本添加重试机制 #

在内容脚本中捕获发送消息的错误，自动重试，直到SW就绪或达到重试上限。这种方式无需修改Service Worker逻辑，仅在内容脚本侧处理即可。

示例代码：

async function sendMessageToSW(message, maxRetries = 3, delay = 1000) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await chrome.runtime.sendMessage(message);
      return response;
    } catch (error) {
      if (error.message.includes("port closed") && i < maxRetries - 1) {
        // 等待SW启动后重试
        await new Promise(resolve => setTimeout(resolve, delay));
      } else {
        throw error;
      }
    }
  }
}

// 按钮点击事件中调用
document.getElementById('send-btn').addEventListener('click', async () => {
  try {
    const response = await sendMessageToSW({ action: 'doSomething' });
    // 处理响应逻辑
  } catch (error) {
    console.error('发送消息失败:', error);
  }
});

方案2：Service Worker主动发送就绪信号 #

让Service Worker在完全启动后（比如activate事件触发时）主动通知所有内容脚本，内容脚本收到信号后再允许发送消息。

Service Worker侧代码： #

self.addEventListener('activate', (event) => {
  event.waitUntil(
    // 通知所有已加载的内容脚本SW就绪
    self.clients.matchAll({ type: 'content' }).then(clients => {
      clients.forEach(client => {
        client.postMessage({ type: 'SW_READY' });
      });
    })
  );
});

内容脚本侧代码： #

let isSWReady = false;

// 监听SW的就绪信号
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'SW_READY') {
    isSWReady = true;
  }
});

// 按钮点击事件
document.getElementById('send-btn').addEventListener('click', async () => {
  if (!isSWReady) {
    alert('Service Worker正在启动，请稍候再试');
    return;
  }
  try {
    const response = await chrome.runtime.sendMessage({ action: 'doSomething' });
    // 处理响应逻辑
  } catch (error) {
    console.error('发送消息失败:', error);
  }
});

方案3：使用长连接替代一次性消息 #

通过chrome.runtime.connect建立长连接，这种方式会自动等待Service Worker启动完成——连接请求会触发SW的onConnect事件，SW启动后会处理连接请求，避免过早发送消息的问题。

内容脚本侧代码： #

let port = null;

// 建立连接
function connectToSW() {
  port = chrome.runtime.connect();
  port.onDisconnect.addListener(() => {
    // 连接断开时重新尝试连接
    port = null;
  });
}

// 初始化连接
connectToSW();

document.getElementById('send-btn').addEventListener('click', () => {
  if (!port) {
    connectToSW();
  }
  // 通过长连接发送消息
  port.postMessage({ action: 'doSomething' });
  // 监听响应
  port.onMessage.addListener((response) => {
    // 处理响应逻辑
  });
});

Service Worker侧代码： #

self.addEventListener('connect', (event) => {
  const port = event.ports[0];
  port.onMessage.addListener((message) => {
    // 处理消息并返回响应
    port.postMessage({ result: 'success' });
  });
});

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer