Chrome扩展Manifest V3中Background.js监听在.then语句无响应问题

核心原因 #

Manifest V3 中的后台服务工作者（Service Worker）是非持久化的：当弹窗关闭后，若没有持续活动触发，后台会很快被浏览器终止。你的fetch是异步操作，等请求完成并发送消息时，后台可能已经被销毁，自然收不到消息。而弹窗处于调试状态（控制台打开）时，浏览器会维持弹窗和后台的存活状态，所以消息能正常传递。

解决方案 #

方案1：直接在弹窗中存储数据（最简便）

如果你的需求只是把用户数据存入chrome.storage.local，完全不需要通过消息传递给后台，直接在弹窗的fetch回调里执行存储即可：

chrome.identity
  .launchWebAuthFlow({ url: authURL, interactive: true })
  .then((responseUrl) => {
    fetch(userInfoEndpoint)
      .then((response) => response.json())
      .then((data) => {
        // 直接存储到localStorage，跳过消息发送
        chrome.storage.local.set({ user: data });
      });
  });

方案2：强制维持后台激活状态（需后台处理逻辑时用）

如果必须让后台处理消息，需要通过消息通道的回调机制，让浏览器保持后台的存活状态直到异步操作完成：

1. 修改弹窗中的消息发送逻辑，保留回调函数：

chrome.identity
  .launchWebAuthFlow({ url: authURL, interactive: true })
  .then((responseUrl) => {
    fetch(userInfoEndpoint)
      .then((response) => response.json())
      .then((data) => {
        chrome.runtime.sendMessage(
          { type: 'setUser', user: data },
          () => {
            // 可选：确认消息已被后台接收
            console.log('用户数据已同步到后台');
          }
        );
      });
  });

2. 修改后台监听器，返回true保持消息通道开放，直到异步存储完成：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'setUser') {
    // 执行存储并在完成后发送响应
    chrome.storage.local.set({ user: message.user }).then(() => {
      sendResponse({ success: true });
    });
    // 返回true告知浏览器：需要保持通道开放，直到sendResponse被调用
    return true;
  }
});

方案3：提前唤醒后台

在发起异步请求前，先发送一个空消息唤醒后台，确保它在整个流程中保持激活：

1. 弹窗代码：

// 先发送唤醒消息，确保后台存活
chrome.runtime.sendMessage({ type: 'wake' }, () => {
  chrome.identity
    .launchWebAuthFlow({ url: authURL, interactive: true })
    .then((responseUrl) => {
      fetch(userInfoEndpoint)
        .then((response) => response.json())
        .then((data) => {
          chrome.runtime.sendMessage({ type: 'setUser', user: data });
        });
    });
});

2. 后台代码：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 处理唤醒消息，仅激活后台
  if (message.type === 'wake') {
    sendResponse();
    return true;
  }
  // 处理用户数据存储
  if (message.type === 'setUser') {
    chrome.storage.local.set({ user: message.user });
  }
});

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