Receiving Error in Chrome Extension: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist

Question

I'm trying to create a very simple Chrome extension that will allow me to highlight a word on a webpage, right click to open the context menu, and then search it on a database called Whitaker's Words by simply appending the word to the search URL. I'm continuing to receive

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

as an error every time I run the code and attempt to use the context menu.

At the moment, I have already taken the steps to disable all other extensions and I attempted to use the port documentation on the Chrome Messaging Docs but I wasn't able to resolve the issue that way.

background.js

    chrome.contextMenus.create({
    title: "Search Whitaker's Words",
    contexts: ["selection"]
});


chrome.contextMenus.onClicked.addListener(function() {
    chrome.runtime.sendMessage({ method: "getSelection" }, function (response) {
        sendToWW(response.data);
    });
});

function sendToWW(selectedText) {
    var serviceCall = 'http://archives.nd.edu/cgi-bin/wordz.pl?keyword=' + selectedText;
    chrome.tabs.create({ url: serviceCall });
}

Here, I create a context menu and when the menu item is clicked, I send a message to the context script asking for the highlighted selection. I then return this to another function in background.js that will create a new tab with the search query.

content.js

chrome.runtime.onMessage.addListener(function (message) {
    if (message.method === "getSelection"){
        var word = window.getSelection().toString().trim();
        console.log(word);
        chrome.runtime.sendMessage({ data: word });
    }
    else
        chrome.runtime.sendMessage({}); // snub them.
});

I listen here for the message and then take a selection from the window, trim, and send it back.

manifest.json

{
  "manifest_version": 2,
  "name": "Latinate",
  "version": "0.1",
  "description": "Aid in Latin translation using Whitaker's Words",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "jquery-3.4.1.min.js",
        "content.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "permissions": [
    "contextMenus",
    "tabs"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

Any and all help would be appreciated! I've tried nearly everything I could find that seemed to apply.

Answer 1

The error message says there is no message listener on the other side. And indeed there is none because a message listener is a function registered with chrome.runtime.onMessage.addListener - in your extension only the content script has such a listener.

Instead of sending a new message back, send the response using sendResponse function which is passed as a parameter to the onMessage listener
(see also the messaging tutorial).

Another problem is that to send a message to a tab you need to use a different method: chrome.tabs.sendMessage with a tab id as the first parameter.

background script:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  chrome.tabs.sendMessage(tab.id, {method: 'getSelection'}, response => {
    sendToWW(response.data);
  });
});

content script:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.method === 'getSelection') {
    var word = window.getSelection().toString().trim();
    console.log(word);
    sendResponse({ data: word });
  } else {
    sendResponse({});
  }
});