问题描述

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;  
});