Chrome Extension: Port Error: Could Not Establish Connection. Receiving End Does Not Exist

Port error: Could not establish connection. Receiving end does not exist. In Chromiume

I found myself having the same issue as you describe here. The solution I found that works for me is to use a backgroundpage instead of a background script, like so:

"background_page": "src/background.html",
  // maybe this seems to work instead of background { scripts [] }

  /* this gives a Port error: Could not ...
  "background": {
  "scripts": ["src/background.js"]
  },
  */

I hope this works for you too.

Could not establish connection. Receiving end does not exist error trying to connect from React

The error message means there is no correctly registered listener or the extension wasn't enabled at the time the message was sent.

See sending messages from web pages section:

From your app or extension, you may listen to messages from web pages via the runtime.onMessageExternal or runtime.onConnectExternal APIs, similar to cross-extension messaging. Only the web page can initiate a connection.

So you need to replace onConnect with onConnectExternal:

chrome.runtime.onConnectExternal.addListener(port => {
  //
});

Google Chrome Extension : Port: Could not establish connection. Receiving end does not exist

Just for anyone landing on this page while facing a similar problem:

OP's code does work as expected !

A couple of minor remarks:

1. The callback for chrome.tabs.sendMessage is optional, so there is no need to define one if you don't intend to call it on the receiving end. I.e. the following is reduntant:

   ...

//Optional callback function

function(response) {

console.log(response);

}

2. chrome.tabs.getSelected has beed deprecated and should not be used. Use chrome.tabs.query instead.

3. In this particular case, the call to chrome.tabs.getSelected is reduntant, since chrome.browserAction.onClicked callback passes the active tab as an argument.

Chrome Extension Port error: Could not establish connection. Receiving end does not exist

Since things changed over to manifest 2, you are actually no longer allowed to use in-line scripts (such as what you have in your background.html in the <script> tags above. See here). I'm not sure of your use case, but in most cases simple cases (read: the stuff I've done :) ), you don't actually need to populate background.html with anything. Instead, you can directly pass in a background.js file that will contain the same script you have above. Therefore you can try changing your manifest.json to this:

{
    "manifest_version": 2,
    "name" : "A simple Found Text Demo",
    "description" : "Bla",
    "version" : "1.0",
    "background" : {
        "scripts" : ["background.js"]
    },
    "page_action" : {
        "default_icon" : "icon.png"
    },

    "content_scripts" : [{
        "matches" : ["*://*/*"],
        "js" : ["contentscript.js"],
        "run_at": "document_end"
    }]
}

Note we did two things here - changed pages to scripts inside of background and pointed it to ["background.js"], and then added "run_at": "document_end" to the end of the content_scripts section. This is something that can definitely cause issues if left out (issues similar to what you are seeing now) - you are now telling the content script to run after the page has loaded. If it runs immediately, you run the risk of the background page not having loaded, which means it isn't yet ready to receive messages and gives you the connection error. Below is background.js, which is identical to the script you had in between your <script> tags before:

chrome.extension.onMessage.addListener(
        function(request, sender, sendResponse){
        alert(request);

//chrome.pageAction.show(sender.tab.id);
        sendResponse('Found!');
        }
)

Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.

sendMessage and onRequest are not compatible.

If you need to support Chrome 19 and earlier, use onRequest and sendRequest:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    // Warning: Chrome 19- [receiver]
});
chrome.extension.sendRequest(message, optional_sendResponse);

---

For Chrome 20 - 25, use chrome.extension.onMessage and chrome.extension.sendMessage:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    // Chrome 20+
});
chrome.extension.sendMessage(message, optional_sendResponse);

---

For Chrome 26+, use chrome.runtime.onMessage and chrome.runtime.sendMessage.

---

Note: As of Chrome 26, the deprecated methods are still supported, albeit undocumented. If you get a chance, update your extension to use the new methods, to ensure that your extension will still work in the future.

See this answer for code to create a which is compatible with Chrome 20+.

---

Related Topics