如何通过上下文菜单将消息从 Chrome 扩展后台脚本传递到 JavaScript 中的内容脚本？答案

【问题标题】：How to pass a message from a Chrome extension background script to a content script in JavaScript via the context menu?如何通过上下文菜单将消息从 Chrome 扩展后台脚本传递到 JavaScript 中的内容脚本？
【发布时间】：2017-08-01 14:45:20
【问题描述】：

我正在使用 JavaScript 开发 Chrome 扩展程序，并且需要能够使用上下文菜单中的自定义条目作为触发器将消息从后台脚本传递到内容脚本。

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（后台脚本）

//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（内容脚本）

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

按照 Stack Overflow 中的 another 示例，这应该显示一个警报：

后台脚本正在向 contentscript 发送消息：'test Purple Monkey 洗碗机'

然后是：

Contentscript 已收到来自后台脚本的消息：“测试紫猴洗碗机”

然而，实际发生的情况是在加载扩展程序时，第一条消息警报会立即出现，即使触发上下文菜单条目也不会发生任何进一步的事情。

尽管在此网站和其他网站上搜索信息，但我不确定为什么会这样，并且不完全理解在 Google Chrome 中传递的消息。

感谢任何帮助。

【问题讨论】：

您是否尝试将onclick 分配包装在function() { } 包装器中？看起来这并不重要，但有时 JavaScript 就是那样奇怪。 "onclick": function() { returnMessage("test"); }
这阻止了在加载扩展程序后立即闪烁警报的问题，我现在可以使用上下文菜单条目触发第一个警报，但是，我似乎仍然没有收到第二个警报就像内容脚本没有接收到消息一样。
您是否在控制台中收到任何错误或消息？
尝试添加两个console.log 命令：一个在内容脚本的顶部（以确保正在加载内容脚本），第二个在onMessage 侦听器中。
默认情况下不要使用alert() 进行调试。它可以导致/解决更难调试的时序问题/竞争条件。如果您不打算使用实际的调试器，请使用console 输出。偶尔 alert() 可能是可以接受的，但它不应该是您的默认值，请尽量显示进度。如果没有其他原因，console 输出允许您多次返回控制台中的输出，而不必记住 alert() 中发生的/显示的内容以及顺序。

标签： javascript google-chrome google-chrome-extension message-passing

【解决方案1】：

听取 cmets 的建议，我能够将后台脚本更改为以下内容：

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

我的内容脚本如下：

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

这会在以下控制台中产生所需的输出：

Contentscript 收到来自后台脚本的消息：'hello'

根据我现在的理解，我似乎调用了不存在的消息的一部分 request.message 我应该调用 request.greeting 因为这是我在从后台脚本。

【讨论】：