Google Chrome 插件开发: 无法建立连接, 接收端不存在. Could not establish connection. Receiving end does not exist

本文介绍了一个关于Chrome浏览器扩展程序中消息传递失败的问题及其解决方案。当尝试从背景脚本向内容脚本发送消息时,若目标页面未正确注入content-script,则会遇到连接失败的错误。文章解释了这一现象产生的原因,并提供了确保content-script正确注入的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过以下代码向当前页面发送 “start” 消息:

chrome.tabs.query({active: true,currentWindow: true}, tabs => {
    let tab = tabs[0];
    chrome.tabs.sendMessage(tab.id, "start");
});

报错:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

可能的原因:

接收端, 也就是说目标页面必须有 chrome.runtime.onMessage 监听消息, 如果 “content-script” 没有注入到页面中, 那么这个页面就无法接收消息

如果你的插件刚刚加载, 并且在一个已经加载完毕的页面中使用它, 则会出这个问题.

因为这个页面已经加载完了, 它并没有被注入脚本, 你需要刷新页面, 使脚本注入到页面中, 然后才可以发送消息

平台不允许文章内容太少, 下面是水

sendMessage
chrome.tabs.sendMessage(integer tabId, any message, function responseCallback)
向指定标签页中的内容脚本发送一个消息,当发回响应时执行一个可选的回调函数。当前扩展程序在指定标签页中的每一个内容脚本都会收到 runtime.onMessage 事件。

参数类型
tabIdinteger
messageany
responseCallbackoptional function

如果您指定了 responseCallback 参数,它应该指定一个如下形式的函数:

function(any response) {…};
response ( any )
请求处理程序发出的 JSON 响应对象。如果连接到指定标签页的过程中发生错误,将不传递参数调用回调函数,并将 runtime.lastError 设置为错误消息。

### 关于 'Could not establish connection. Receiving end does not exist' 的解决方案 当遇到 `Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist` 这样的错误时,通常意味着尝试通过 Chrome 扩展的消息传递 API 建立通信的一端存在或尚未准备好接收消息。此问题可能由多种因素引起。 #### 可能的原因分析 1. **页面未完全加载** 如果在目标标签页还未完成加载的情况下就试图向其发送消息,则可能会触发该错误。确保目标页面已经充分加载再执行消息传送操作[^3]。 2. **扩展冲突** 某些情况下,其他已安装的浏览器插件可能导致此类异常行为的发生。特别是那些也利用了相同API接口进行跨上下文通讯的操作。逐一禁用必要的附加组件可以帮助定位是否有第三方应用干扰正常流程[^4]。 3. **监听器缺失** 对于 background 脚本直接调用 `tabs.sendMessage()` 方法的情形下,如果对应的 content script 或 popup 页面里没有设置好相应的事件处理器来响应这些请求的话,同样会抛出类似的警告信息[^2]。 #### 实践建议与代码调整 为了有效处理上述提到的各种可能性,在开发过程中应当采取如下措施: - 在发起任何交互之前确认文档对象模型 (DOM) 已经准备完毕; - 添加必要的错误捕捉机制以便更好地理解具体失败场景; - 审查并优化整个应用程序内的消息路由逻辑结构,确保每条路径都有适当终点等待着传入的数据包。 下面给出一段改进后的 JavaScript 示例代码用于说明如何安全地实现从后台脚本到特定选项卡的内容脚本之间的数据交换过程: ```javascript // background.js function sendMessageToTab(tabId, message){ chrome.tabs.sendMessage(tabId,message,(response)=>{ if(chrome.runtime.lastError){ console.error(`Failed to send message to tab ${tabId}:`,chrome.runtime.lastError.message); }else{ console.log('Message sent successfully:', response); } }); } // 确认页面加载完成后才发送消息 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if(changeInfo.status === "complete"){ // 此处可以根据实际情况修改message内容以及判断条件 let message = {greeting:"hello"}; sendMessageToTab(tabId,message); } }); ``` 此外,还需保证content_script部分正确设置了对来自background page的信息作出回应的能力: ```javascript // contentScript.js chrome.runtime.onMessage.addListener( function(request,sender,sendResponse){ console.log("Received a message:",request); sendResponse({farewell:'goodbye'}); } ); ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值