How to pass a message from a Chrome extension background script to a content script in JavaScript via the context menu?

Question

I am working on a Chrome extension using JavaScript and need to be able to pass a message from a background script to a content script using a custom entry in the context menu as a trigger for this.

manuscript.json

{
	"manifest_version": 2,
	"name": "Admin Tools",
	"version": "0.3",
	
	"permissions": [
		"contextMenus",
		"tabs",
		"activeTab"
	],
	
	"content_scripts": [
		{
			"matches": ["https://*/*", "http://*/*"],
			"js": ["lead_partner_search_content.js"]
		}
	],
	
	"background": {
		"scripts": ["admin_search.js", "company_id_search.js","order_id_search.js","lead_partner_search.js"]
	}
}

lead_partner_search.js (background script)

//lead_partner_search.js

var backgroundScriptMessage = " purple monkey dishwasher";

function returnMessage(messageToReturn) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var joinedMessage = messageToReturn + backgroundScriptMessage;
          alert("Background script is sending a message to contentscript:'" + joinedMessage +"'");
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

chrome.contextMenus.create({
	"title": "Search leads by company name",
	"contexts": ["selection"],
	"onclick": returnMessage("test")
})

lead_partner_search_content.js (content script)

//lead_partner_search_content.js

chrome.runtime.onMessage.addListener( function(request, sender) {
    alert("Contentscript has received a message from from background script: '" + request.message + "'");
    return true;
});

Following another example from Stack Overflow, this should show one alert as:

Background script is sending a message to contentscript:'test purple monkey dishwasher'

And then a second as:

Contentscript has received a message from from background script: 'test purple monkey dishwasher'

However, what actually happens is when the extension is loaded, the first message alert appears instantly and nothing further happens even when triggering the context menu entry.

I am unsure as to why this is and do not wholly understand message passing in Google Chrome despite searching on this and other sites for information.

Any assistance is appreciated.

Answer 1

Taking advice from the comments I was able to change the background script to the below:

//lead_partner_search.js
function returnMessage() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

chrome.contextMenus.create({
    "title": "Search leads by company name",
    "contexts": ["selection"],
    "onclick": returnMessage
})

And to my content script to the below:

//lead_partner_search_content.js
chrome.runtime.onMessage.addListener( function(request, sender) {
    console.log("Contentscript has received a message from background script: '" + request.greeting + "'");
});

This produces the desired output in the console of:

Contentscript has received a message from background script: 'hello'

Based on what I now understand it seems that I was calling a part of the message which didn't exist request.message where I should have been calling request.greeting as this is what I was declaring when sending the message from the background script.