I have the following error in the Chrome Dev Tools console on every page-load of my Node/Express/React application:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
This error makes a reference to localhost/:1. When I hover over this, it shows http://localhost:3000/, the address I'm viewing the app at in the browser.
Anyone have an idea what is going on? Most of the other threads I've found that bring up this error seem to be related to someone trying to develop a Chrome Extension, and even then they tend to have very few responses.
I'd been getting the exact same error (except my app has no back-end and React front-end), and I discovered that it wasn't coming from my app, it was actually coming from the "Video Speed Controller" Chrome extension. If you aren't using that extension, try disabling all of your extensions and then turning them back on one-by-one?
I found the same problem when developing the Chrome extensions. I finally found the key problem.
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
The key problem is that when background.js sends a message to the active tab via chrome.tabs.sendMessage, the content.js on the page is not ready or not reloaded. When debugging. We must ensure that content.js is active. And it cannot be a page without refreshing , The old pages don not update you js itself
Here is my code:
//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('我收到你的消息了：'+JSON.stringify("request"));
});
The error is often caused by a chrome extension.
Try disabling all your extensions, the problem should disapear.
Solution
For Chrome:
You have the window open with the console error, open up a second new window.
In the second window, go to:
chrome://extensions
Disable each extension by toggling (the blue slider on the bottom right of each card), and refresh the window with the console after toggling each extension.
Once you don't have the error, remove the extension.
If you are an extension developer see this Chrome Extension message passing: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
The core of the problem is that chrome API behavior change and you need add a workaround for it.
You need to handle window.chrome.runtime.lastError in the runtime.sendMessage callback. This error just needs to be handled. Below is my code:
window.chrome.runtime.sendMessage(
EXTENSION_ID,
{ message:"---" }, // jsonable message
(result) => {
if (!window.chrome.runtime.lastError) {
// message processing code goes here
} else {
// error handling code goes here
}
}
);
});
🙂simple answer:🙂
if you have no response from another End it will also tell you Receiving end does not exist.
detailed answer:
if you have no answer from another end it will also tell you Receiving end does not exist. so if you have any callBack function which should use response in your .sendMessage part, you should either delete it or handle it if you probably have no response from another side.
so
if i wanted to re-write Simple one-time requests section of Message passing documents of google API i will write it with error handlers for callback functions in message-sending methods like this:
Sending a request from a content script looks like this:
chrome.runtime.sendMessage({greeting: "hello"}, function (response) {
if (!chrome.runtime.lastError) {
// if you have any response
} else {
// if you don't have any response it's ok but you should actually handle
// it and we are doing this when we are examining chrome.runtime.lastError
}
});
Sending a request from the extension to a content script looks very similar, except that you need to specify which tab to send it to. This example demonstrates sending a message to the content script in the selected tab.
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 you don't have any response it's ok but you should actually handle
// it and we are doing this when we are examining chrome.runtime.lastError
}
});
});
On the receiving end, you need to set up an runtime.onMessage event listener to handle the message. This looks the same from a content script or extension page.
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 === "hello")
sendResponse({farewell: "goodbye"});
}
);
Removing 'Udacity Frontend Feedback' chrome extension solved the issue for me.
This was happening in Chrome for me and I discovered it was McAfee WebAdvisor. Once I disabled it, the message went away:
The simple fix is to return true; from within the function that handles chrome.tabs.sendMessage.
It's stated
here.
(this is similar to other answers)
I removed "Video Speed Controller" Chrome Extension and the error was removed.
It worked for me like this. In your case there may be some other extensions too which may cause this error.
It was tab bnundler for me: https://chrome.google.com/webstore/detail/tab-bundler/ooajenhhhbdbcolenhmmkgmkcocfdahd
Disabling the extension fixed the issue.
It was a few extensions for me. Disabling and then re-enabling fixed the problem though. Grammarly was one of them. Hope the errors don't return.
Oddly enough, for myself I simply disabled all my extensions and the error went away.
However, after re-enabling all of the ones I disabled, the error was still gone.
I was testing my extension on edge://extensions/ page/tab. Testing it on another tab solved this issue. I think this may also occur for chrome://extensions/.
This is caused simply by installed chrome extensions, so fix this first disable all chrome extensions then start to enable one after another to detect which extension is cause you can enable the remaining.
in my case removing 'adblocker youtube' extension work for me
For me the error was due to the onelogin chrome extension. Removing it fixed the issue.
Cacher Extension in my case - but yeah disable each and then reload page
This is usually caused by an extension.
If you don't want to disable or remove the extension which causes this error, you can filter out this specific error by typing -/^Unchecked\sruntime\.lastError\:\sCould\snot\sestablish\sconnection\.\sReceiving\send\sdoes\snot\sexist\.$/ in the Filter box in the console:
As far as I've seen, this filter will stay until you remove it manually, you can close and reopen the console, restart Chrome, etc as much as you want and the filter will never be removed automatically.
I get the message only on the first Chrome page =
When Chrome is not running, and I open it - either directly or by double-clicking on a page on my desktop.
(I don't know if this matters, but I have "Continue running background apps when Google Chrome is closed" off.)
So, I'm assuming it's Chrome's crap spying/"enhancing user experience" attempt.
I don't know what it's trying to send, but I'm glad it's not able to! :)
So, second (or any but first) tab has no error.
== No need to disable anything (extensions, etc.).
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I "achieved" this error after
installing the Debugger for Chrome extension in Visual Studio Code,
debugging my code, and
closing and reopening the non-debugging Chrome window. (I had left Chrome running my app while debugging.)
Solutions:
Stop using the extension.
Refresh the non-debugging Chrome window.
Use a different debugger.
Of course, the console error reappears when I redo steps 2 and 3 above with the Debugger for Chrome. This encourages me to use other debuggers instead. Then I don't mistakenly think my own code produced the console errors!
For me this was caused by :
Iobit Surfing Protection & Ads Removal extension
which comes with Iobit advanced system care software. However, the console might provide you with relevant information on what you need do disable or the cause for that problem.
The likely cause of this error, as per google searches is because that extension which causes the error, might be using the chrome.runtime.sendMessage() and then tries to use the response callback.
Error shown in the console
Hope this information helps. Have a great day!
For chrome extension development, it's an error thrown by chrome.tabs.sendMessage method.
Here is the link of related documentation: https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage. In the link you can find the description for the callback function: If an error occurs while connecting to the specified tab, the callback is called with no arguments and runtime.lastError is set to the error message.
According to documentation above, the error is because of the specified tab. I restart chrome and reloaded the extension, and this issue is fixed
I solved this in following way. This is mainly chrome extension problem, try to first empty cache and hard reload for this inspect any window and hold reload button about 2 second then it will appear 3 options click last one which is mentioned above then go to manage extensions and turn off one by one and then turn on again one by one and check it's gone or not.
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist
chrome.runtime.lastError
It's an error that appear in the Chrome devTools console.
And it's related to Chrome Chrome Message Passing
Because of the 'rigid structure' of the Chrome platform, it's not easy to pass data between different Chrome windows/tabs, as it's common to do in the 'object oriented' programming languages.
In Chrome extensions, usually, there is not a single file of code, that runs for all pages or tabs.
It's a common use, to build many different files of code in javascript, for different Windows/tabs/url address.
So, when the software, need to pass data from different windows/tabs/url, it's made using 'message passing'
The 'message passing', allow to send a 'message' and wait to receive a message as 'callBack'
But sometimes happens, in example, that the url of a window, or a tab, change, when there is a 'message passing' function which has been triggered, but still not returned.
If this situation it's not managed by code (as wrote TechDogLover OR kiaNasirzadeh), or it's an old extension not updated, this error can arise.
So as others users said, it could be an extension, which is running in your Chrome.
But if your window doesn't crash, it doesn't have much sense disable an extension because of such message appear in the devTools Console.
And it doesn't have sense try to understand how to fix it (if you are not the developer of the software which is causing the error), because the variables are so many, that it's not said that the error will be triggered again, in the same situation.
In those cases, in my opinion, if you really want to do something, a good thing to do could be, once you find the extension that cause the error, contact the extension developer and report it.
And if you are the developer, you could check for a missing
if(!chrome.runtime.lastError){
// here if there is no error
} else {
// here if there is an error
}
Or, also you could check your code, if you did more than one callBack, e.g. as explained there
wOxxOm comment
I also encountered this problem when I was developing chrome extensions.
Error: Could not establish connection. Receiving end does not exist.
The error message from chrome.tabs.sendMessage
The solution is to make it return the promise and use catch to handle the error and define it yourself. Example
Apparently an error occurred during browser startup and the browser did not launch extensions such as stylish, adblock. I closed the browser and reopened it and my page worked without errors.
It seems like the externally_connectable feature that allows a website to communicate with an extension is still in the dev channel and not yet stable. Are there any other ways to allow a specific website to communicate with my extension, while I wait for this feature to become stable? How have chrome extension developers traditionally done it?
Thanks Rob W for pointing me in the direction of HTML5 messaging. For the benefit of other chrome extension developers, I'm writing about the general problem I was trying to solve and the solution that worked in the end.
I am making a chrome extension that can control music playback on a tab via a popup player. When a user clicks on play/pause/etc on the popup player, the extension should be able to convey that message to the webpage and get back a response stating whether the action was accomplished.
My first approach was to inject a content script into the music player page. The problem is, though, that content scripts operate in a "sandbox" and cannot access native javascript on the page. Therefore, the content script was pretty useless (on its own), because while it could receive commands from the extension, it could not effect any change on the webpage itself.
One thing that worked in my favor was that the website where the music was playing belongs to me, so I could put whatever javascript I wanted there and have it be served from the server. That's exactly what I used to my advantage: I created another javascript file that would reside on the website and communicate with the content script mentioned above, via the window object of the page (i.e. HTML5 messaging). This only works because the content script and the javascript file both exist in the same webpage and can share the window object of the page. Thanks Rob W for pointing me to this capability. Here is an example of how the javascript file on the page can initiate a connection with the content script via the window object:
content_script.js (injected by extension into xyz.com):
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "page"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("received connection request from page");
window.postMessage({source: "content_script", type: 'init',
secret_key: "my_secret_key"}, "*");
break;
}
}
}
}, false);
onpage.js (resides on server and served along with xyz.com):
window.postMessage({source: "page", type: 'init',
secret_key: "my_secret_key"}, "*");
window.addEventListener("message", function(event) {
if(event.data.secret_key &&
(event.data.secret_key === "my_secret_key") &&
event.data.source === "content_script"){
if(event.data.type){
switch(event.data.type) {
case 'init':
console.log("connection established");
break;
}
}
}
}, false);
I check the secret key just to make sure that the message originates from where I expect it to.
That's it! If anything is unclear, or if you have any questions, feel free to follow up!
You could have an extension inject a content script alongside a web page, and use that to pass messages back and forth between the website and the background page of the extension.
It's tedious, though, and externally connectable is a lot nicer.
(Cross posted here)
Hi,
I have a sandboxed page (specified in my manifest) which is loaded into an iframe in my extension's background page. From within my sandboxed page, I'd like to open a new window and write to it, i.e.:
var win = window.open(); win.document.write('<p>Hello!</p>');
This works from my extension's background page and from regular web pages, but when invoked from either content scripts or my sandboxed page, the window opens, but I cannot access the win object (it's defined, but empty---console.log outputs "Window {}").
I assume this is due to same-origin policies (with every window being given a uinque-origin within the sandboxed environment). However, since the window opens an about:blank page, I'm confused why this would matter.
Is this a feature? Is there a parameter I can add to my manifest to avoid this? And does anyone know of work-arounds that don't involve using postMessage back to my background page? My ideal solution is to have my sandboxed script open a new window and interact with it directly, not with message passing.
I can provide a full example if necessary, but I'm hoping someone might just know off the top of their head. I'm running Chrome 24.0.1312.57 on Mac and 24.0.1312.68 on Ubuntu if that helps.
Thanks,
Hank
Content scripts, by definition, are part of external regular web pages you load so I'm not really sure how your script could work on a "regular web page" but not the content script. Do you mean the code works when you embed it in your own pages, but not in other pages via the content script?
Regardless, if the script is working properly from your background page, you could always try messaging. (more here: http://developer.chrome.com/extensions/messaging.html)
Script for your sandbox/contentscript:
//send message to background page
chrome.extension.sendMessage({todo: "newWindow"});
In background page:
//create a listener
chrome.extension.onMessage.addListener(
function(request, sender) {
if (request.todo === "newWindow") {
//do your stuff here
var win = window.open(); win.document.write('<p>Hello!</p>');
}
});
Per the cross-post here, the issue is indeed that the opened window is given a unique origin. This was intentional as the members of the standards working group (SWG) felt that it would be more secure to not make an exception for about:blank pages where they inherit the sandbox's origin.
However, to get around this issue, at least for my purposes, I can use the following method. First, forget sandboxing. This workaround uses an iframe embedded in a background page with the src url set to data:text/html,.... This gives a unique origin to the iframe so it's no longer in extension space. That means eval can be used and chrome apis cannot be accessed. Unlike in a sandbox, windows opened from the iframe share that same origin as the iframe, allowing created windows to be accessed. For example:
In a background html page:
<html>
<head>
...
<script src="background.js"></script>
...
</head>
<body>
...
<iframe id="myframe"></iframe>
...
</body>
</html>
In background.js:
...
document.getElementById('myframe').setAttribute('src', 'data:text/html,'+
encodeURI('<html><head>'+
'<script src='+chrome.extension.getURL('jquery.js')+'></script>'+
'<script src='+chrome.extension.getURL('myscript.js')+'></script>'+
...
'</head><body></body></html>'
));
...
In myscript.js
jQuery(document).ready(function(){
...
// To receive messages from background.js.
window.addEventListener('message', function(e){ ... } );
// To send messages to background.js.
parent.postMessage({...}, '*');
// To open AND ACCESS a window.
var win = window.open();
win.document.write('Hello'); // Fails in sandbox, works here.
// Eval code, if you want. Can't do this from an extension
// page loaded normally unless you allow eval in your manifest.
// Here, it's okay!
eval( 'var x = window.open(); x.document.write("Hi!")' );
// No chrome apis.
chrome.log( chrome.extension ); // -> undefined
chrome.log( chrome.windows ); // -> undefined
// No direct access to background page (e.g., parent).
chrome.log( parent ); // -> Window with no properties.
...
});
I am trying to write an extension that adds functionality to the Chrome devtools.
According to the devtools documentation, it says that the pages in devtools support very limited apis. Any API that is not supported can be access by accessing it through the background page, just as what contentscripts does.
Here is the relevant documentation snippet:
The tabId property provides the tab identifier that you can use with the chrome.tabs.* API calls. However, please note that chrome.tabs.* API is not exposed to the Developer Tools extension pages due to security considerations — you will need to pass the tab ID to the background page and invoke the chrome.tabs.* API functions from there.
Here is the source url: http://developer.chrome.com/extensions/devtools.inspectedWindow.html
However, when I try to do that, I get the following error in the console:
uncaught Error: "getBackgroundPage" can only be used in extension processes. See the content scripts documentation for more details.
Here is my code in my devtools.js script:
chrome.extension.getBackgroundPage().getLocation();
What am I doing wrong?
EDIT
I should describe my scenario first, and show how I am implementing it.
What I want to do is to display extra data in a devtools panel related to a webpage. In order to get that data, I will need to send a HTTP request in the same session as the page being debugged, because it requires authentication.
Use Case:
User browses to a particular URL. He is authenticated to the site. He then invokes devtools. The devtools panel opens up and a new panel shows up that has extra data related to the page.
Implementation:
1) DevTools script finds out the url of the page being inspected. If the url matches the site base hostname, then it opens a panel. In the callback of the panel creation, it sends a message to a background page, asking it to download a JSON payload from a debug endpoint on the same site, and then sends it to the devtools extension, wh ich then displays it.
Problems:
1) The background page gets the request, and downloads the URL. However the download is not using the same session as the user, so the download request fails.
2) From devtools window, I got the tabId of the inspected window. I send this tabId to the background page so that it can parse some stuff out of the url. However, chrome.tabs.get(tabId) does not return the tab.
To summarize, I need to
1) Get the background page to download data in the same session as the user's tab that is being debugged.
2) I need to have the background page be able to get access to the user's tab.
The APIs available to extension pages within the Developer Tools window include all devtools modules listed above and chrome.extension API. Other extension APIs are not available to the Developer Tools pages, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.
I guess the documentation is little ambiguous, By chrome.extension API they mean the Supported API's for content scripts.
So, you can use long lived communication for communication between inspected page and background page
Demonstration:
The following code illustrate scenario where a devtools page need some information from background page, it uses messages for communication.
manifest.json
Ensured permissions are all available in manifest file
{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"devtools_page":"devtools.html",
"manifest_version":2,
"version":"2",
"permissions":["experimental"],
"background":{
"scripts" : ["background.js"]
}
}
devtools.html
A trivial HTML File
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>
devtools.js
Used Long lived Communication API's
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Request Tab Data");
port.onMessage.addListener(function (msg) {
console.log("Tab Data recieved is " + msg);
});
background.js
Responded to communication request and passed trivial information using tab API()'s
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
chrome.tabs.query({
"status": "complete",
"currentWindow": true,
"active": true
}, function (tabs) {
port.postMessage(tabs[0].id);
});
console.log("Message recived is "+message);
});
});
Sample Output received for trivial devtools.js here
Let me know if you need more information
EDIT 1)
For your question 1)
Can you make you call(s) from browser extension HTML Page\Content Script so same session is shared, i have tried both the ways in a sample and it is working form me, instead of code in background page- make the code in content script or browser action HTML Page.
Let me know if you are still facing problems.
For your question 2)
The following code always fetches current window user is browsing
manifest.json
Ensure you have tabs permission in your manifest.
{
"name":"Inspected Windows Demo",
"description":"This demonstrates Inspected window API",
"manifest_version":2,
"version":"2",
"permissions":["tabs"],
"background":{
"scripts" : ["background.js"]
}
}
background.js
chrome.tabs.query({
"status": "complete", // Window load is completed
"currentWindow": true, // It is in current window
"active": true //Window user is browsing
}, function (tabs) {
for (tab in tabs) { // It returns array so used a loop to iterate over items
console.log(tabs[tab].id); // Catch tab id
}
});
Let me know if you are still unable to get tab id of current window.