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

小鱼儿 2024-04-17 20:28 46阅读 0赞

## 问题描述 ##

**Chrome Extension 报错：**

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

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

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

**产生错误的来源有两个：**

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

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

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

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

## 分析和解决问题 ##

在 [Chrome 开发者官网][Chrome]，选择 Chrome APIs → Extension APIs，找到关于 **chrome.runtime.onMessage.addListener(function callback)** 的介绍信息（地址为 [https://developer.chrome.com/extensions/runtime\#method-sendMessage][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;  
    });

[Chrome]: https://developer.chrome.com
[https_developer.chrome.com_extensions_runtime_method-sendMessage]: https://developer.chrome.com/extensions/runtime#method-sendMessage