chrome.runtime.sendMessage in content script doesn't send message

Question

I have the following files (gist for easy access):

manifest.json

{
  "name": "testmessage",
  "version": "0.1",
  "manifest_version": 2,
  "externally_connectable": {
    "matches": ["*://www.google.com/*"]
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["*://www.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

content.js

chrome.runtime.sendMessage(
    "eldkfaboijfanbdjdkohlfpoffdiehnb", // PUT YOUR EXTENSION ID HERE
    "foo",
    function (response) {
        console.log(response);
    }
);
console.log("this is content.js reporting for duty");

background.js

chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) {
        console.log("background.js got a message")
        console.log(request);
        console.log(sender);
        sendResponse("bar");
    }
);
console.log("this is background.js reporting for duty");

I can see both "... reporting for duty" messages in the respective consoles. But background.js doesn't receive a message when http://www.google.com loads. Line 5 in content.js prints undefined in the console for google.com.

When I run chrome.runtime.sendMessage("eldkfaboijfanbdjdkohlfpoffdiehnb", "foo"); in the google.com console it shows up in the background.js console.

What am I doing wrong?

Answer 1

What you're doing wrong is over-complicating it. Twice.

First, you don't need to declare to be externally connectable, since you're sending a message from a content script and not the webpage itself.

Second, it's not an external message either. External messages are for connecting different extensions, not messages within one extension.

Your code should look like this:

content.js

chrome.runtime.sendMessage(
    "foo",
    function (response) {
        console.log(response);
    }
);

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log("background.js got a message")
        console.log(request);
        console.log(sender);
        sendResponse("bar");
    }
);