108

I know that question has been repeatedly asked in different ways, but I tried to go through all the answers (hopefully I didn't miss anyone) and none of them worked for me.

Here is my extension's code:

manifest:

{
"name": "test",
"version": "1.1",
"background": 
{ 
    "scripts": ["contextMenus.js"]
},

"permissions": ["tabs", "<all_urls>", "contextMenus"],

"content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js": ["jquery-1.8.3.js", "jquery-ui.js"],
        "css": [ "jquery-ui.css" ],
        "js": ["openDialog.js"]
    }
],

"manifest_version": 2
}

contextMenus.js

function onClickHandler(info, tab) {
    if (info.menuItemId == "line1"){

      alert("You have selected: " + info.selectionText);

      chrome.extension.sendMessage({action:'open_dialog_box'}, function(){});

      alert("Req sent?");

    }
}

chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function() {

  chrome.contextMenus.create({"id": "line1", "type": "normal", "title": "I'm line 1",     "contexts":["selection"]});

});

openDialog.js

chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {

  if (msg.action == 'open_dialog_box') {
    alert("Message recieved!");
  }
});

The two alerts of the background page work, while the one of the content_script doesn't.

console log's message: Port error: Could not establish connection. Receiving end does not exist.

Where is my fault?

1
  • You should use chrome.tabs.sendMessage() to send messages to content scripts, not chrome.extension.sendMessage().
    – apsillers
    Jan 9, 2013 at 20:01

6 Answers 6

181

In your background page you should call

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response) {});  
});

instead of using chrome.extension.sendMessage as you currently do.

The chrome.tabs variant sends messages to content scripts, whereas the chrome.extension function sends messages to all other extension components.

14
  • 7
    Thanks you. That's correct except that chrome.tabs.sendMessage must specify which tab to send it to. So the solution is change to: chrome.tabs.query({active: true}, function(tabs){ chrome.tabs.sendMessage(tab.id, {action: "open_dialog_box"}, function(response) { }); });
    – Subway
    Jan 9, 2013 at 20:24
  • 16
    what should write to receive on content-script.js ? Jun 30, 2017 at 17:50
  • 6
    @KushalJain I just figured this out. In your content script JS file, you'll want to add an event listener like this: chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => { /* Code Here */ } ); message is the parameter containing { action: "open_dialog_box" } or whatever you send. sender is an object containing your Chrome extension's ID. sendResponse is the parameter containing function(response) {} or whatever function you pass in to be called once the message is handled.
    – jsea
    May 22, 2018 at 19:03
  • 9
    This solution did not work for me. I am following the documentation exactly I copied all the code from developer.chrome.com/extensions/messaging This is very simple example but could not get it right. Getting error Could not establish connection. Receiving end does not exist. Any ideas
    – umsateesh
    Oct 14, 2019 at 20:47
  • 3
    I will kiss you @apsillers, I swear to god Apr 26, 2020 at 17:02
24

@apsillers is correct. Also don't forget to return true in your content-script listener or it might close too early.

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log(message)
    return true
});
2
  • This fixed it for me – I was getting no response, but adding return true got it working. Nov 18, 2020 at 1:04
  • 2
    I swear, on SO the simplest answer is usually the right one. I can't believe this is what fixed this issue, but it did. Thanks for sharing!
    – jstafford
    Mar 31, 2021 at 11:47
4

Here's an example of a background script that sends a message to the content-script file.

background.js

chrome.tabs.sendMessage(tabs[0].id,"your message"); 

content-script/content.js

chrome.runtime.onMessage.addListener(function (response, sendResponse) {
          console.log(response);
});
3

The problem with the provided solutions is that they raise other errors (Which break my Google Chrome)

@apsillers solution works but the callback raises errors!

How it should look like

// Background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"});  
});

Now in Content scripts as provided by @Ronan Ca which builds upon @apsillers solution. It is Not ideal to return since we removed the callback from the background script.

// ContentScripts.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
console.log(message)
// return true <- this and the callback in background.js are what caused a crash in extensions page of my Google chrome
});

The background console won't open If I try to do it with callbacks. (It's that bad of a crash)

2

This is what worked for me in manifest V3. Send message from background script to content script.

  chrome.tabs.sendMessage(sender.tab.id,"your message")
1

My use-case required sending a message to the background script from a webpage. I used chrome.runtime.onMessageExternal to catch this message.

Inside of this listener I was basically forwarding the message over to my content script so it could do its thing, but I could not figure out why my content script onMessage listener wouldn't catch the message.

Turns out by waiting for 1 second before sending the message from the webpage (I was basically doing it on load) I was able to see the message hitting my content script.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.