Logo

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

photo

2021年03月24日

问题描述

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;  
});
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1818 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1802 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1533 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,685 作者:Pastore Antonio
1531 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1509 浏览量