Chrome扩展Manifest V3：Service Worker传递sidePanel.open()结果的正确方式

问题分析 #

你当前的实现能收到侧边栏状态，但直接同步调用 chrome.runtime.sendMessage 会得到 undefined 并报错，核心原因是：

• Manifest V3 中 chrome.runtime.sendMessage 是异步API，返回值为 Promise，无法同步获取响应
• 原 Service Worker 代码混用了两种响应逻辑：既标记异步响应又通过反向消息通道回传状态，导致消息端口逻辑混乱

推荐实现方式 #

Manifest V3 官方推荐用 async/await + Promise 处理异步消息，无需额外开启反向消息通道，直接通过 sendMessage 的 Promise 传递响应结果。

1. 内容脚本（发送请求并处理响应）

用 async/await 封装调用逻辑，直接接收 Service Worker 返回的结果：

// 内容脚本：触发侧边栏打开并处理结果
async function openSidePanel() {
  try {
    const response = await chrome.runtime.sendMessage({ action: 'openSidePanel' });
    if (response.success) {
      console.log("Success: Side panel opened");
    } else {
      console.log("Error:", response.errorMessage);
    }
  } catch (error) {
    console.log("请求出错:", error.message);
  }
}

// 调用函数触发操作
openSidePanel();

2. Service Worker（接收请求并处理）

利用 async 函数自动返回 Promise 的特性，直接返回处理结果，无需额外调用消息API：

// Service Worker：监听消息并处理侧边栏打开逻辑
chrome.runtime.onMessage.addListener(async (message, sender) => {
  if (message.action === 'openSidePanel') {
    // 校验标签页ID有效性
    if (!sender.tab?.id) {
      return { success: false, errorMessage: "无有效标签页信息" };
    }

    try {
      await chrome.sidePanel.open({ tabId: sender.tab.id });
      console.log('Side panel opened successfully');
      return { success: true };
    } catch (error) {
      console.error('Error opening side panel:', error);
      return { success: false, errorMessage: error.message };
    }
  }
});

关键优化点 #

• 移除冗余的反向消息发送：chrome.runtime.sendMessage 的 Promise 会自动把 Service Worker 返回的对象传递给内容脚本
• 省略手动标记异步响应：async 函数作为监听器时，Chrome 会自动识别异步逻辑并保持消息端口直到 Promise 完成
• 统一错误捕获：通过 try/catch 覆盖消息发送失败、侧边栏打开失败等所有异步异常场景

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