google-chrome - Chrome 扩展程序中的接收错误 : Unchecked runtime. lastError : Could not establish connection. 接收端不存在

Question

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

"Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist."

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

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

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

我在这里收听消息，然后从窗口中进行选择、修剪并将其发回。

manifest.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({});
  }
});