在 Chrome 扩展程序中接收错误：未选中 runtime.lastError：无法建立连接。接收端不存在

Question

我正在尝试创建一个非常简单的 Chrome 扩展程序，它允许我突出显示网页上的单词，右键单击打开上下文菜单，然后通过简单地将单词附加到名为 Whitaker's Words 的数据库中搜索它搜索网址。我继续收到

“未检查的 runtime.lastError: 无法建立连接。接收端不存在。”

每次我运行代码并尝试使用上下文菜单时都会出错。

目前，我已采取措施禁用所有其他扩展程序，并尝试使用 Chrome 消息传递文档中的端口文档，但无法通过这种方式解决问题。

background.js

    chrome.contextMenus.create({
    title: "Search Whitaker's Words",
    contexts: ["selection"]
});


chrome.contextMenus.onClicked.addListener(function() {
    chrome.runtime.sendMessage({ method: "getSelection" }, function (response) {
        sendToWW(response.data);
    });
});

function sendToWW(selectedText) {
    var serviceCall = 'http://archives.nd.edu/cgi-bin/wordz.pl?keyword=' + selectedText;
    chrome.tabs.create({ url: serviceCall });
}

在这里，我创建了一个上下文菜单，当单击菜单项时，我向上下文脚本发送一条消息，要求突出显示的选择。然后我将其返回给 background.js 中的另一个函数，该函数将使用搜索查询创建一个新选项卡。

content.js

chrome.runtime.onMessage.addListener(function (message) {
    if (message.method === "getSelection"){
        var word = window.getSelection().toString().trim();
        console.log(word);
        chrome.runtime.sendMessage({ data: word });
    }
    else
        chrome.runtime.sendMessage({}); // snub them.
});

我在这里收听消息，然后从窗口中选择，修剪，然后发回。

ma​​nifest.json

{
  "manifest_version": 2,
  "name": "Latinate",
  "version": "0.1",
  "description": "Aid in Latin translation using Whitaker's Words",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "jquery-3.4.1.min.js",
        "content.js"
      ]
    }
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "permissions": [
    "contextMenus",
    "tabs"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

任何和所有的帮助将不胜感激！我已经尝试了几乎所有我能找到的似乎适用的方法。

Answer 1

错误消息说另一端没有消息侦听器。确实没有，因为消息侦听器是使用 chrome.runtime.onMessage.addListener 注册的函数 - 在您的扩展程序中，只有内容脚本具有这样的侦听器。

不是发回新消息，而是使用 sendResponse 函数发送响应，该函数作为参数传递给 onMessage 侦听器
（另见messaging tutorial）。

另一个问题是，要将消息发送到选项卡，您需要使用不同的方法：chrome.tabs.sendMessage，将选项卡 ID 作为第一个参数。

后台脚本：

chrome.contextMenus.onClicked.addListener((info, tab) => {
  chrome.tabs.sendMessage(tab.id, {method: 'getSelection'}, response => {
    sendToWW(response.data);
  });
});

内容脚本：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.method === 'getSelection') {
    var word = window.getSelection().toString().trim();
    console.log(word);
    sendResponse({ data: word });
  } else {
    sendResponse({});
  }
});