解决“Unchecked runtime.lastError: The message port closed before a response was received”错误的详细过程

解决“Unchecked runtime.lastError: The message port closed before a response was received”错误的详细过程在开发Chrome扩展时，开发者常常会遇到各种错误提示。其中，Unchecked runtime.lastError: The message port closed before a response was

社区主理人微信号: Libin9iOak

1177人浏览 · 2025-01-13 23:07:13

社区主理人微信号: Libin9iOak · 2025-01-13 23:07:13 发布

解决“Unchecked runtime.lastError: The message port closed before a response was received”错误的详细过程

在开发Chrome扩展时，开发者常常会遇到各种错误提示。其中，Unchecked runtime.lastError: The message port closed before a response was received 是一个比较常见的错误。本文将详细解析该错误的原因，并提供一套完整的解决方案，帮助开发者有效地解决这一问题。

作者简介

猫头虎是谁？

大家好，我是猫头虎，猫头虎技术团队创始人，也被大家称为猫哥。我目前是COC北京城市开发者社区主理人、COC西安城市开发者社区主理人，以及云原生开发者社区主理人，在多个技术领域如云原生、前端、后端、运维和AI都具备丰富经验。

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用方法、前沿科技资讯、产品评测、产品使用体验，以及产品优缺点分析、横向对比、技术沙龙参会体验等。我的分享聚焦于云服务产品评测、AI产品对比、开发板性能测试和技术报告。

目前，我活跃在CSDN、51CTO、腾讯云、阿里云开发者社区、知乎、微信公众号、视频号、抖音、B站、小红书等平台，全网粉丝已超过30万。我所有平台的IP名称统一为猫头虎或猫头虎技术团队。

我希望通过我的分享，帮助大家更好地掌握和使用各种技术产品，提升开发效率与体验。

作者名片 ✍️

博主：猫头虎
全网搜索关键词：猫头虎
作者微信号：Libin9iOak
作者公众号：猫头虎技术团队
更新日期：2025年01月09日
🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！

加入我们AI共创团队 🌐

猫头虎AI共创社群矩阵列表：
- 点我进入共创社群矩阵入口
- 点我进入新矩阵备用链接入口

加入猫头虎的共创圈，一起探索编程世界的无限可能！ 🚀

部分专栏链接：

🔗 精选专栏：

《面试题大全》 — 面试准备的宝典！
《IDEA开发秘籍》 — 提升你的IDEA技能！
《100天精通鸿蒙》 — 从Web/安卓到鸿蒙大师！
《100天精通Golang（基础入门篇）》 — 踏入Go语言世界的第一步！

猫头虎分享No bug

正文

一、错误概述

错误信息：

Unchecked runtime.lastError: The message port closed before a response was received

出现场景：
当扩展的不同部分（如内容脚本、后台脚本、弹出页等）之间进行消息传递时，如果发送消息的一方期待响应，但接收消息的一方没有及时响应或未正确处理消息，就会触发此错误。

二、错误原因分析

响应未发送：
- 发送消息后，期望接收方发送响应，但接收方未发送任何响应。
异步处理未正确处理：
- 在处理消息的函数中进行了异步操作，但未正确返回 Promise 或未在适当的时机发送响应。
连接被意外关闭：
- 消息通道在响应之前被关闭，例如页面刷新或扩展被卸载。
消息传递方式不当：
- 使用了一次性连接（sendMessage）而不是长连接（connect），导致响应未及时返回。

三、详细解决步骤

1. 确认消息发送和接收的逻辑

首先，检查发送消息和接收消息的代码，确保两者之间的通信逻辑正确。

发送消息示例（发送方）：

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
    if (chrome.runtime.lastError) {
        console.error(chrome.runtime.lastError);
    } else {
        console.log(response.farewell);
    }
});

接收消息示例（接收方）：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting === "hello") {
            sendResponse({farewell: "goodbye"});
        }
        // 如果不需要响应，可以不调用 sendResponse
    }
);

2. 确保接收方发送响应

如果发送方期待响应，接收方必须调用 sendResponse。否则，发送方将等待响应，直到消息通道关闭，进而触发错误。

修正示例：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting === "hello") {
            // 确保在所有可能的路径下都调用 sendResponse
            sendResponse({farewell: "goodbye"});
        } else {
            // 对于未处理的请求，也可以发送默认响应
            sendResponse({farewell: "unknown request"});
        }
        // 返回 true 表示将进行异步响应
        return true;
    }
);

3. 处理异步操作

如果接收方在处理消息时需要进行异步操作，如网络请求或定时任务，必须确保在异步操作完成后再发送响应。

异步处理示例：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting === "fetchData") {
            fetchDataFromServer().then(data => {
                sendResponse({data: data});
            }).catch(error => {
                sendResponse({error: error.message});
            });
            // 返回 true 表示将进行异步响应
            return true;
        }
    }
);

注意： 在进行异步操作时，必须返回 true，以保持消息通道打开，等待异步响应。

4. 检查消息通道的稳定性

确保在发送消息和接收响应的过程中，消息通道不会被意外关闭。例如，避免在发送消息后立即卸载扩展或刷新页面。

5. 使用调试工具进行排查

利用Chrome的开发者工具和扩展的调试功能，可以有效地排查问题。

步骤：

打开扩展的后台页：
- 进入 chrome://extensions/ 页面，找到对应的扩展，点击“背景页”旁的“检查视图”按钮。
查看控制台日志：
- 在后台页的控制台中，查看是否有相关的错误日志或 console.error 输出。
设置断点调试：
- 在发送和接收消息的代码处设置断点，逐步调试，查看消息是否正确发送和接收，响应是否被调用。

6. 示例综合应用

发送方代码（popup.js）：

document.getElementById('sendButton').addEventListener('click', () => {
    chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
        if (chrome.runtime.lastError) {
            console.error("Error:", chrome.runtime.lastError.message);
        } else {
            console.log("Response:", response.farewell);
        }
    });
});

接收方代码（background.js）：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log("Received message:", request);
        if (request.greeting === "hello") {
            // 模拟异步操作
            setTimeout(() => {
                sendResponse({farewell: "goodbye"});
            }, 1000);
            // 返回 true 表示异步响应
            return true;
        }
    }
);

在上述示例中，发送方在点击按钮后发送消息，并在控制台输出响应。接收方在接收到消息后，经过1秒的延迟后发送响应。由于接收方进行了异步操作，因此必须返回 true，以保持消息通道打开，等待响应。

四、最佳实践建议

明确消息传递的需求：
- 确保发送方和接收方明确了解彼此的通信需求，是否需要响应。
始终处理可能的错误：
- 在发送消息后，检查 chrome.runtime.lastError，以捕获可能的错误。
正确处理异步操作：
- 在接收方进行异步操作时，务必返回 true，确保响应能够正确发送。
保持消息通道稳定：
- 避免在发送消息后立即关闭连接或卸载扩展，确保消息能够顺利传递和响应。
利用调试工具：
- 善用Chrome提供的开发者工具，及时发现和解决通信中的问题。

五、结语

Unchecked runtime.lastError: The message port closed before a response was received 错误虽然常见，但通过正确理解其原因和遵循上述解决步骤，开发者可以有效地排查和解决这一问题。良好的消息传递机制不仅能提升扩展的稳定性和用户体验，也有助于开发者在复杂的扩展开发过程中保持代码的清晰和可维护性。

希望本文能为您在Chrome扩展开发过程中提供有价值的帮助。如有更多问题，欢迎在评论区交流探讨！

猫头虎