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

问题描述

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

I'm trying to create a very simple Chrome extension that will allow me to highlight a word on a webpage, right click to open the context menu, and then search it on a database called Whitaker's Words by simply appending the word to the search URL. I'm continuing to receive

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

错误.

as an error every time I run the code and attempt to use the context menu.

目前，我已经采取了禁用所有其他扩展程序的步骤，并且尝试使用Chrome Messaging Docs上的端口文档，但无法以这种方式解决问题.

At the moment, I have already taken the steps to disable all other extensions and I attempted to use the port documentation on the Chrome Messaging Docs but I wasn't able to resolve the issue that way.

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中的另一个函数，该函数将使用搜索查询创建一个新标签.

Here, I create a context menu and when the menu item is clicked, I send a message to the context script asking for the highlighted selection. I then return this to another function in background.js that will create a new tab with the search query.

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

我在这里听消息，然后从窗口中进行选择，修剪并发送回去.

I listen here for the message and then take a selection from the window, trim, and send it back.

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"
  }
}

任何人和所有帮助将不胜感激！我已经尝试了几乎所有我发现可以应用的东西.

Any and all help would be appreciated! I've tried nearly everything I could find that seemed to apply.

推荐答案

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

The error message says there is no message listener on the other side. And indeed there is none because a message listener is a function registered with chrome.runtime.onMessage.addListener - in your extension only the content script has such a listener.

使用sendResponse函数发送响应，而不是发送回新消息，该函数作为参数传递给 onMessage 监听器
(另请参见消息传递教程.)

Instead of sending a new message back, send the response using sendResponse function which is passed as a parameter to the onMessage listener
(see also the messaging tutorial).

另一个问题是，要将消息发送到选项卡，您需要使用其他方法:带有标签ID作为第一个参数的chrome.tabs.sendMessage .

Another problem is that to send a message to a tab you need to use a different method: chrome.tabs.sendMessage with a tab id as the first parameter.

后台脚本:

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

这篇关于Chrome扩展程序中收到错误:未选中runtime.lastError:无法建立连接.接收端不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！