Simple message passing between 'background.js' to 'contentScript.js'

Question

I'm trying to apply the following flow :

binding for keys in the background.js , when pressing them : Sending message from background.js -> contentScript.js Sending response from contentScript.js -> background.js

Here is the menifit.json definitions:

  "background" : {

    "scripts" : ["background.js"],
    "persistent" : true
    },
  "content_scripts": [
    {
      "matches": ["*://*/*"],      
      "js": ["contentScript.js"]
    }
    ],

The binding part is working fine.

Here is the code in background.js :

    chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
        console.log(response.farewell);
        });
    });

Here is the code in contentScript.js :

chrome.runtime.onMessage.addListener(HandleMessage);

function HandleMessage(request, sender, sendResponse)
{
    if (request.greeting == "hello")
    {
        sendResponse({farewell: "goodbye"});        
    }
};

This is the error that i'm getting:

Error in event handler for (unknown): Cannot read property 'farewell' of undefined
Stack trace: TypeError: Cannot read property 'farewell' of undefined
    at chrome-extension://fejkdlpdejnjkmaeadiclinbijnjoeei/background.js:64:26
    at disconnectListener (extensions::messaging:338:9)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
    at EventImpl.dispatch (extensions::event_bindings:403:17)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26) 

In case of changing

console.log(response.farewell);

to

console.log("OK");

it is working fine , but that way i cant get the values from the contentScript.js

What should i change ?

Answer 1

You're trying to send messages from the background page to the content script. From the official documentation, you're using this code snippet to send messages from the background page:

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
 console.log(response.farewell);
});

However, the docs clearly mention that the code mentioned above is to send a message from a content script. This is the reason why you probably get the error:

Error in event handler for (unknown): Cannot read property 'farewell' of undefined
Stack trace: TypeError: Cannot read property 'farewell' of undefined

What you want to achieve is sending a request from the extension (background page) to a content script which requires you to specify the tab in which the content script is present:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
     console.log(response.farewell);
  });
});

I hope this clarifies things and gets you started in the right direction.