Uncaught in promise error could not establish connection receiving end does not exist

“Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist” is an error not only beginners encounter but also experienced people can’t avoid in some cases in NodeJS. This article will show you how and the steps to fix it easily and quickly.

The error “Runtime.lasterror unchecked: Could not establish connection. Error getting end does not exist” in javascript caused by Chrome extensions. The program can’t establish a connection. 

The error message occurs as follows:

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

You must know how Chrome extensions work and respond to understand this error.

When background.js sends a signal via chrome.tabs.sendMessage, content.js is not ready to receive content, so this error occurs.

The content.js can’t refresh yet and receive multiple lines of page refresh requests at the same time, causing this connection error.

Background.js and content.js are two customizable script files of the chrome extension. You can learn more at Manage events with background scripts.

To fix this error, you can refer to a few ways below.

How To Fix This Error?

Option 1: Find and remove the extension causing the error.

First, you have to open two individual browser windows. One window resolves the Error, and the other holds the error message.

In your first window, go to settings and select extensions. Turn on your extensions one by one with the toggle switch. Navigate to the 2nd window to refresh the error warning. When the Error goes away, you have found the extension you were looking for.

This helps you find the extensions that cause errors in your program, from which we can find a way to solve this issue.

After finding the extensions causing errors for the program, you should delete them or turn them off to avoid affecting your program. Extensions sometimes cause many errors for your program. The best way to solve your problem is to remove them,

If the extension is necessary for you, ensure that when running your program, it is switched off to avoid affecting your program later.

Option 2: Establish the connection before the page reloads

The error code clearly shows the problem. Connection establishment failed, so make sure the content.js content before the background sends the message like this:

//this is background.js
 
chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "this is message"}, function(response) {
      console.log(response);
  });
}); 
 
//this is content.js
 
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    console.log(request, sender, sendResponse);
    sendResponse('i got your message：'+JSON.stringify("this is request signal"));
});

Or there is a more straightforward solution is to delay the connection call to the chrome extension of the connect() method as follows:

chrome.runtime.onConnect.addListener(port => {
  console.log('succeeded', port);
 
  if (port.name === 'connected') {
    port.onMessage.addListener(this.processMessage);
  }

});

Summary

“Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist” is a common and standard error for web developers. However, fortunately, this error is not difficult to fix as long as we disable or remove chrome extensions.

Please follow the steps of the article to solve the error.

Maybe you are interested:

• Require(…) is not a function TypeError in Node.js
• Replace a String in a File using Node.js
• Cannot find module ‘#’ error in node.js

The unchecked runtime.lasterror: could not establish connection receiving end does not exist error is fixed by disabling a Chrome extension. The whole process of solving this issue usually consists of several steps, and we are going to explain and exemplify all.

We are also going to answer some of the most common questions users have once been faced with this error on their program. By the time you are done reading this article, you are going to know all the necessary steps you need to take to fix this error.

Why Is the Unchecked runtime.lasterror: Could Not Establish a Connection. Receiving End Does Not Exist Error Happening?

This error usually happens due to a problem with a specific Chrome extension inside your main document. The program cannot establish a connection, and many web developers are usually faced with this error while working on Chrome. Lucky for you, fixing this problem is not a difficult process, and it only consists of a couple of steps.

There are several changes in the code you can do but what it usually takes is a simple extension disabling. To better understand why this problem is happening, we are going to recreate the syntax and show you where exactly Chrome discovers and shows this error. Keep reading the following section of this article where we recreate the error and show you an easy fix.

How To Fix This Error?

One of the first steps you are supposed to take while trying to debug an error is specifying where things go wrong. That is exactly why we are going to show you an example that recreates this problem and shows how Chrome handles it.

In the first step, we are going to show you how does a sending request from the content script looks like:

– Code Example 1:

chrome.runtime.sendMessage({greeting: “hello”}, function (response) {
if (!chrome.runtime.lastError) {
// if you have any response
} else {
// if your document doesn’t have any response, it’s fine but you should actually handle
// it and we are doing this by carefully examining chrome.runtime.lastError
}
});

Now that you better understand the necessary script inside the extension and the way it looks, it is time to create a similar code. Again, this code is going to send the request from the extension to the content script. This time, however, you need to specify the tab where the request is going to be sent.

– Code Example 2

Take a closer look at the following syntax that contains the necessary code:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: “hello”}, function(response) {
if (!chrome.runtime.lastError) {
// if you have any response
} else {
// if your document doesn’t have any response, it’s fine but you should actually handle
// it and we are doing this by carefully examining chrome.runtime.lastError
}
});
});

This syntax wraps the syntax for the sending request. Let us now learn about the receiving end.

– Including the Last Part of the Example Code

The last part of the example code that fixes this error is the most important. It uses an event listener that handles the error message. Again, the complete syntax looks similar either from the extension page or the content script.

– Code Example 3

The complete syntax is shown in the following example and is all the receiving end is supposed to do:

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
“from a content script:” + sender.tab.url :
“from the extension”);
if (request.greeting === “hi”)
sendResponse({farewell: “bye”});
}
);

Web developers include the even listener as the first part of the code and write the rest of the syntax in the following lines. As you could have closely examined all these examples, recreating and solving the error is not a complicated process. However, there is another way you can fix the error that does not establish a connection. We are going to show you how in the following section of this article.

Solution 2

Working with programs and programming languages allows web developers to solve an issue in several ways. We have previously shown you the complete syntax for recreating and fixing this error. However, there is something else you can do to solve this error that appears on your program. It consists of several steps, so take a closer look at the following list to learn more about them:

1. Open two separate windows on your browser. Keep the error message open inside the first window and use the second window to solve the problem.
2. Load your active extensions using the second window on your browser.
3. Make sure to disable and switch off all extensions by toggling the on and off switch. Navigate the first window and refresh the error message included in your program.
4. Once the error message disappears, make sure to remove the extension from your browser completely.

All the necessary steps you are supposed to take are shown in this list. If you carefully follow each, you are going to fix the error in no time. However, learning from examples is usually better than learning from theory. That is why, in the following section of this guide, we are going to show you the necessary syntax and how web developers can quickly fix this problem.

– Creating the Necessary Code for This Solution

The problem that was thoroughly discussed in this example occurs due to a message sent by the background JavaScript. The active tab is going to receive the message and initiate the content JavaScript on the page, though the document is still not loaded. Therefore, for the process of debugging, you need to make sure that the content JavaScript is still active. In addition, the web page must contain an active refresh cycle because older web pages do not automatically update.

– Code Example 4

The necessary code that offers a solution for this problem is shown in the following example:

//background.js
chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: “hello”}, function(response) {
console.log(response);
});
});
//content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
console.log(request, sender, sendResponse);
sendResponse(‘send this：’+JSON.stringify(“request”));
});

This syntax is going to send the necessary request and allow the browser to fix the issue that the program has. The code contains several functions, values, and event listeners that are going to make everything possible.

However, there is one common extension that usually causes this error, and we are going to show you what it takes to disable it. The following section of this article is going to teach you how to remove the Udacity Frontend Feedback extension from your browser.

Removing a Common Extension That Causes the Error

Specific extensions may sometimes cause unexpected bugs inside your program and the best way to solve the issues is by removing them. For example, many web developers stated that the Udacity Frontend Feedback extension causes unchecked runtime.lasterror: could not establish a connection. receiving end does not exist error message inside their program. Lucky for you, there is an easy way to fix this issue with a simple tweak of the code. First, you have to create a handler for the message callback inside the syntax.

– Code Example 5

This example code is all it takes to fix the issue and remove the message from your program:

window.chrome.runtime.sendMessage(
EXTENSION_ID,
{ message:”—” }, // jsonable message
(result) => {
if (!window.chrome.runtime.lastError) {
// it does not work, that’s it. No more unchecked error
}
}
);
});

As you can see, the error message will no longer be visible on your browser and you can continue working with the rest of the document. Now you know a lot more about the unchecked runtime.lasterror: could not establish a connection. receiving end does not exist error and what is the best way to fix it. All you are supposed to do now is open your browser and try to fix this issue on your own without having any problems.

FAQ

– Specific Extensions Version Not Working?

Certain extensions may sometimes work unproperly or even crash all the time. To fix this issue, you should follow several basic steps. First, take a closer look at the following list to learn more about it:

1. Open the section More tools > Extensions on your browser.
2. Turn each extension off by using the toggle button.
3. Restart the browser and revisit the extensions list.
4. Turn on each extension, and the problem should be fixed.

This is all it takes to fix this simple problem that may sometimes be quite annoying. If none of this works, repeat the same process, and the problem should be fixed.

Revising the Details

The unchecked runtime.lasterror: could not establish a connection. receiving end does not exist error is fixed by disabling specific Chrome extensions. We have managed to explain the complete process, and you remember the details in the following list:

• Fixing the unchecked runtime.lasterror: could not establish a connection. receiving end does not exist error does not require any special knowledge
• You can adjust the code inside the program or disable the specific extension inside your browser
• If the primary solution does not work, you can repeat the process and fix the issue by using the additional solutions
• Certain extensions may sometimes fail, but you can easily restart their function by using the toggle button to turn them on and off

If you ever thought that fixing this error in your program is complicated, we have shown you that there is not much to it. Furthermore, you will not have any issues debugging the error should you come across it in the future.