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

Solution 1:

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+.

Solution 2:

Instead of

chrome.extension.onRequest.addListener(onRequest);

Use

chrome.extension.onMessage.addListener(onRequest);

Since you are using sendMessage and not sendRequest.

Message parsing has been updated in the new version of Chrome. sendRequest and onRequest are being deprecated. It is recommended to go with sendMessage and onMessage.

Refer docs for message parsing between Content Script and Background.