谷歌浏览器扩展程序报错 The message port closed before a response was received.

问题描述

Chrome Extension 报错：

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

中文意思是，最近未检查的运行时错误：在接收到 response 响应消息之前，消息通道的端口就已经关闭了。

在 Chrome 的开发者工具的 Console 控制台中，可能会发现上面的报错信息。

产生错误的来源有两个：

1. 第三方扩展程序。
2. 个人开发的扩展程序。

如果是第三方扩展程序，只需从表面上解决该问题，禁用或删除第三方扩展程序即可。

当然，如果是个人开发的扩展程序，必须从根本上解决该问题，否则会严重影响该扩展程序的使用。

下面，我们主要研究，对于我们自己开发的谷歌浏览器扩展程序（Chrome Extension），该如何解决上述报错？

分析和解决问题

在 Chrome 开发者官网，选择 Chrome APIs → Extension APIs，找到关于 chrome.runtime.onMessage.addListener(function callback) 的介绍信息（地址为 https://developer.chrome.com/extensions/runtime#method-sendMessage ）。

对于 addListener 监听器，只有一个参数，它是一个回调函数 callback。

该 callback 函数的触发机制为：当它收到来自扩展程序背景页或 content script（特定 tab 页的内容脚本）的消息（json 对象）时自动触发。

一般，我们用 addListener 来监听来自背景页的消息，从而与背景页进行数据通信。

这里，我们假设 addListener 是用来在 tab 页监听背景页（background.js）的消息的。

该 callback 回调函数有三个参数，基本格式为：

function(any message, MessageSender sender, function sendResponse) {...};

参数说明：

• message：来自消息发送者 sender（一般为背景页）的消息内容（json 对象）。
• sender：消息的发送者，一般为背景页。
• sendResponse：也是一个函数，可用于给消息的发送者响应消息。

下面，我们来重点研究 sendResponse 函数。

sendResponse 函数的官方描述信息如下：

Function to call (at most once) when you have a response. The argument should be any JSON-ifiable object. If you have more than one onMessage listener in the same document, then only one may send a response. This function becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end until sendResponse is called).

大致意思如下：

当你需要响应一个消息给 sender（一般为背景页）时，可以调用 sendResponse 函数（最多只能调用一次）。它的参数应该是一个 json 对象。如果在同一个文档中，你有多个 onMessage listener（消息事件监听器），那么，只有一个监听器可以发送响应信息。当监听器 return 时，sendResponse 函数就会失效，除非你在监听器中手动地 return true。return true 的作用是指明你想通过异步地方式给 sender 发送一个响应消息（这样，消息通道就会一直对 sender 开放，直到 sendResponse 方法调用完毕）。

现在，我们就清楚了报错的根本原因：在 sender（背景页）收到 tab 页的响应消息之前，sendResponse 的消息端口就已经关闭了，从而导致 sender（背景页）出现未检查的运行时错误。

解决方法

在监听器的 callback 回调函数的内部末尾，添加一行代码即可。

return true;

具体位置示例：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){

    // 处理接收到的来自 sender 的 message
    //  ...
    
    // 给 sender 发送响应消息
    sendResponse(responseMessage);
    
    // 下面是我们要添加的一行代码
    return true;  
});