Chrome Extension "Receiving end does not exist." Error

Question

I'm working on a Chrome Extension but lately I've noticed I've been getting the following error (pointing to the first line of popup.html):

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

I've found a similar question here. But the error there is caused by the background property which I haven't declared on my manifest.

I'm using chrome.extension.onMessage.addListener on the contents.js script to listen for events and chrome.tabs.sendMessage on the popup.js script to send the events. Most of the time everything works fine, but sometimes I get the above error and none of the requests do anything.

The manifest.json is of the following format:

{
    "manifest_version": 2,
    "name": "APP_NAME",
    "description": "APP_DESCRIPTION",
    "version": "APP_VERSION",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab",
        "storage",
        "clipboardRead",
        "clipboardWrite"
    ],
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ],
            "css": [
                "content.css"
            ]
        }
    ]
}

Message Listener Example:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "this") console.log({
    dom: doThis()
  });
  if (request.action === "that") sendResponse({
    dom: doThat()
  });
  else if (request.action === "other") doOther();
  else sendResponse({});
});

Message Sender Example:

function getSelectedTab() {
  return new Promise(function(resolve) {
    chrome.tabs.getSelected(null, resolve);
  });
}

function sendRequest(data) {
  data = data || {
    action: undefined
  };
  return new Promise(function(resolve) {
    getSelectedTab().then(function(tab) {
      chrome.tabs.sendMessage(tab.id, data, resolve);
    });
  });
}

Send Request Invocation Example:

document.querySelector("#this").addEventListener("click", function() {
  sendRequest({
    action: "this"
  }).then(function(res) {
    console.log(res);
  });
});

document.querySelector("#that").addEventListener("hover", function() {
  sendRequest({
    action: "that"
  });
});

addEventListener("blur", function() {
  sendRequest({
    action: "other"
  });
});

Answer 1

I'm not sure if my answer good for given case, but if you reading it, you faced this kind of problem, and probably my answer will help you.

I spent a lot of time, trying to understand why it sometimes throws this error, while I'm working at dev version, and doesn't do it for released version of my extension. Then I understood, that after every code save, it updates at chrome, and creates new content version of script. So if you don't reload page, where you used previous version of your code to create context.js and trying it again with updated version, it throws this error.

I kinda wasted about one full day to figure it out, it's simply, but there a lot of answers in stackoverflow about this case, so you used to try them, and not think with your brain. Don't be like me:)