问题描述
Chrome Extension 报错:
Unchecked runtime.lastError: The message port closed before a response was received.
中文意思是,最近未检查的运行时错误:在接收到 response 响应消息之前,消息通道的端口就已经关闭了。
在 Chrome 的开发者工具的 Console 控制台中,可能会发现上面的报错信息。
产生错误的来源有两个:
- 第三方扩展程序。
- 个人开发的扩展程序。
如果是第三方扩展程序,只需从表面上解决该问题,禁用或删除第三方扩展程序即可。
当然,如果是个人开发的扩展程序,必须从根本上解决该问题,否则会严重影响该扩展程序的使用。
下面,我们主要研究,对于我们自己开发的谷歌浏览器扩展程序(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;
});