将消息传递给 Chrome 扩展内容脚本而不将其指定为后台脚本答案

【问题标题】：Pass message to Chrome extension content script without specifying it as a background script将消息传递给 Chrome 扩展内容脚本而不将其指定为后台脚本
【发布时间】：2015-05-03 12:10:09
【问题描述】：

我正在尝试向 Chrome 上下文菜单添加一项功能，以从选定的文本中添加待办事项。我从background.js 的上下文菜单中传递选定的文本，如下所示：

function onClickHandler(info, tab) {
  chrome.extension.sendMessage(info.selectionText, function(){});
}

chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function() {

  chrome.contextMenus.create({"title": "Add: %s", "contexts":["selection"]});

});

然后在app.js 内容脚本中监听消息：

chrome.extension.onMessage.addListener(function(task, sender, sendResponse) {
  Task.setNewTask(task); // Saves the task in storage
});

当我的扩展在标签页中打开时，该消息被正确接收，但在它关闭时不起作用。这是因为我没有在我的manifest.json 中将app.js 设置为后台脚本：

"permissions": [
    "storage",
    "contextMenus",
    "tabs",
    "notifications"
],

"background": {
  "scripts": ["background.js"]
}

我没有将app.js 包含为后台脚本的原因是它包含了我的应用程序的其余代码，当尝试在没有 DOM 的情况下在后台运行时会产生错误。

不幸的是，我无法轻松地在 background.js 文件中进行存储，因为我需要访问我的内容脚本中的函数 Task.setNewTask。

我的应用有多种存储数据的方法，具体取决于环境——如果我不得不将这个逻辑放在background.js 中，将会有很多重复。

我尝试将我的应用作为背景页面：

"background": {
  "page": "index.html"
},

然后在页面底部包含两个脚本：

  <script src="background.js"></script>
  <script src="js/app.js"></script>
</body>

但我的应用仍然不会在后台添加新任务。

有没有办法：

让background.js 尽可能简单，
不包括 app.js 作为后台脚本，
app.js 不在后台时仍会收到消息？

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

哦，亲爱的。您在哪里找到要修改的基本代码？

chrome.extension.sendMessage/chrome.extension.onMessage 已弃用，甚至不再出现在文档中。

但即使您将它们更改为正确的 chrome.runtime 等效项，与内容脚本通信仍然是错误的函数。

您的原始代码失败，因为 chrome.runtime.sendMessage（和 已弃用 chrome.extension 等效项）仅发送到扩展页面（例如，发送到 chrome-extension://yourid/ 来源），而不是内容脚本.
您修改的代码失败，因为消息传递永远不会将消息发送到运行它的同一 JS 上下文。

您需要的是chrome.tabs.sendMessage 函数，它允许您指定上下文脚本所在的选项卡。如果要将其发送到当前选项卡，则将其作为参数传递给onClicked 侦听器。

function onClickHandler(info, tab) {
  chrome.tabs.sendMessage(tab.id, info.selectionText);
}

在上下文脚本端，别忘了改成chrome.runtime：

chrome.runtime.onMessage.addListener(function(task, sender, sendResponse) {
  Task.setNewTask(task); // Saves the task in storage
});

【讨论】：