sendMessage from extension background or popup to content script doesn't work

Question

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?

You should use `chrome.tabs.sendMessage()` to send messages to content scripts, not `chrome.extension.sendMessage()`. — apsillers, Jan 09 '13 at 20:01

apsillers · Accepted Answer · 2013-01-09T20:31:58.217

190

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.

edited Jan 09 '13 at 20:31

answered Jan 09 '13 at 20:04

apsillers

112,806
17
235
239

7

Thanks you. That's correct except that `chrome.tabs.sendMessage` [must specify which tab to send it to](http://developer.chrome.com/extensions/messaging.html). 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 09 '13 at 20:24
We can even pass "null" instead of "{active: true}" to point to the current tab. – Chakri Oct 31 '16 at 10:22
18

what should write to receive on content-script.js ? – Kushal Jain Jun 30 '17 at 17:50
7

@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 '18 at 19:03
I don't get it... How can I send JSON or text between `content_script.js` and `background.js` ?? – c-an Feb 04 '19 at 15:03
add another optional parameter since method signature has been changed – ThinkTank Jul 15 '19 at 13:58
9

This solution did not work for me. I am following the documentation exactly I copied all the code from https://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 '19 at 20:47
@umsateesh Did you get any solution? – bugwheels94 Jan 04 '21 at 19:33
1

just going to put it here because i had no idea: `tabs.query` and `tabs.connect` **do not require the tabs permission**. – reticivis Jan 10 '22 at 15:53
@umsateesh Did you solved it? – Y K May 07 '22 at 20:54
Make sure the content-script is yet loaded when sending the message – Wim den Herder May 09 '22 at 06:08
1

Anyone coming across this in 2023, after 10 years. Yes, it works! – Vaibhav Dwivedi Apr 20 '23 at 19:09

score 25 · Answer 2 · answered Aug 04 '20 at 16:52

25

@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
});

answered Aug 04 '20 at 16:52

Ronan Ca

410
4
5

This fixed it for me – I was getting no response, but adding `return true` got it working. – rupertonline Nov 18 '20 at 01: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 '21 at 11:47

score 4 · Answer 3 · answered Nov 19 '20 at 10:45

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);
});

score 4 · Answer 4 · answered Sep 10 '21 at 07:30

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)

score 3 · Answer 5 · answered Jun 28 '22 at 13:37

3

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")

answered Jun 28 '22 at 13:37

Ronny K

3,641
4
33
43

score 1 · Answer 6 · edited Nov 22 '20 at 22:35

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.

sendMessage from extension background or popup to content script doesn't work

6 Answers6

Linked

Related