解决Chrome扩展开发中的 “The message port closed before a response was received.“ 错误

在 Chrome 扩展开发过程中，我们可能会遇到一个常见的错误提示：“The message port closed before a response was received.”。这个错误通常出现在我们尝试在 chrome.runtime.onMessage 监听器中异步发送响应时。在这篇博客中，我们将探讨导致这个错误的原因，以及如何解决它。

问题描述

在一个 Chrome 扩展项目中，我们可能需要在后台脚本和内容脚本之间发送和接收消息。我们通常会使用 chrome.runtime.sendMessage 和 chrome.runtime.onMessage API来实现这一点。然而，当我们尝试在 chrome.runtime.onMessage 监听器中异步发送响应时，可能会遇到 “The message port closed before a response was received.” 错误。

错误原因

这个错误通常是因为 chrome.runtime.onMessage 监听器在异步操作完成之前关闭了消息端口，导致无法发送响应。

解决方法

方法一：使用 return true

我们可以通过在 chrome.runtime.onMessage 监听器中返回 true 来保持消息端口打开，直到异步操作完成并且响应被发送。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    
    
    handleAsyncMessage(message, sendResponse);
    return true;  // Indicate that response will be sent asynchronously
});

async function handleAsyncMessage(message, sendResponse) {
    
    
    // ...异步操作...
    sendResponse({
    
     /* response data */ });
}

方法二：双监听器策略

另一个解决方案是使用两个 chrome.runtime.onMessage 监听器。一个监听器立即返回 true 以保持消息端口打开，另一个监听器处理实际的消息和异步操作。

// 第一个监听器，立即返回 true 以保持消息端口开启
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    
    
    return true;  // Indicate that response will be sent asynchronously
});

// 第二个监听器，处理实际的消息和异步操作
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    
    
    // ...异步操作...
    sendResponse({
    
     /* response data */ });
});

方法三：检查消息发送者的状态

确保消息发送者（例如 popup 或 content script）保持活动状态，直到收到响应。

结论

通过上述方法，我们可以有效地解决 “The message port closed before a response was received.” 错误，确保我们的 Chrome 扩展能够正确地处理异步消息和响应。