Chrome扩展Service Worker休眠时无法连接端口问题求助

核心原因 #

Service Worker处于休眠状态时，未激活并注册chrome.runtime.onConnect监听事件，导致Popup发起的端口连接请求找不到接收端，抛出Could not establish connection. Receiving end does not exist错误。

有效解决方案 #

方案1：先唤醒Service Worker再建立端口连接 #

利用chrome.runtime.sendMessage可自动唤醒休眠Service Worker的特性，先发送唤醒消息，待SW激活并注册监听后再发起端口连接。

1. 在Service Worker中同时监听消息和端口连接

// service-worker.js
// 处理唤醒消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'sw-wakeup') {
    sendResponse({ status: 'awake' });
    // SW被唤醒后会自动注册后续的端口监听
  }
});

// 监听端口连接
chrome.runtime.onConnect.addListener(port => {
  if (port.name !== 'popup') return;

  // 处理Popup发来的消息
  port.onMessage.addListener(msg => {
    // 示例：从IndexedDB获取数据并返回
    if (msg.action === 'get-data') {
      // 此处编写你的IndexedDB查询逻辑
      const dbData = { key: 'value' };
      port.postMessage({ type: 'data-response', data: dbData });
    }
  });

  // 监听端口断开
  port.onDisconnect.addListener(() => {
    console.log('Popup端口已断开');
  });
});

2. 在Popup中先唤醒再建立连接

// popup.js
async function setupPort() {
  try {
    // 第一步：唤醒Service Worker
    await chrome.runtime.sendMessage({ type: 'sw-wakeup' });
    
    // 第二步：建立端口连接
    const port = chrome.runtime.connect({ name: 'popup' });

    // 监听Service Worker发来的消息
    port.onMessage.addListener(msg => {
      if (msg.type === 'data-response') {
        // 处理返回的数据，例如更新Popup UI
        console.log('收到SW数据:', msg.data);
      }
    });

    // 示例：向SW发送数据请求
    port.postMessage({ action: 'get-data' });

    return port;
  } catch (error) {
    console.error('端口连接失败:', error);
  }
}

// Popup加载时初始化连接
document.addEventListener('DOMContentLoaded', setupPort);

方案2：直接使用chrome.runtime.sendMessage进行双向通信 #

如果不需要持续长连接，可直接用消息通信替代端口，sendMessage会自动唤醒休眠的SW，且支持通过Promise实现双向数据交换：

Service Worker端

// service-worker.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'fetch-db-data') {
    // 异步查询IndexedDB
    (async () => {
      const data = await yourIndexedDBQueryFunction();
      sendResponse({ data });
    })();
    // 告知Chrome等待异步响应
    return true;
  }
});

Popup端

// popup.js
async function fetchData() {
  try {
    const response = await chrome.runtime.sendMessage({ action: 'fetch-db-data' });
    console.log('获取到数据:', response.data);
    // 此处编写更新Popup UI的逻辑
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

document.addEventListener('DOMContentLoaded', fetchData);

注意事项 #

• 确保Service Worker文件无语法错误，否则无法被正确唤醒和注册监听。
• Manifest V3中background配置需正确指定service_worker字段，示例：

  {
    "manifest_version": 3,
    "background": {
      "service_worker": "service-worker.js"
    }
  }
  

• 避免在Service Worker中执行不必要的长时间任务，防止被浏览器提前终止。

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