未选中的runtime.lastError：消息端口在收到响应之前关闭。我该如何解决？

Question

我有这个问题。我看到这个问题并尝试了它的解决方案，但它似乎不起作用。错误消失了，但代码没有执行它应该执行的操作。

所以，基本上，我有一个后台脚本，它使用 XMLHTTPSrequest 在所有 http 或 https 页面中注入内容脚本。

背景.js：

chrome.browserAction.onClicked.addListener(function (event) {
    show_floater = !show_floater;
    // inject content script in tabs
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "https://127.0.0.1/js/test1.js", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            chrome.tabs.query({ currentWindow: true }, (tabs) => {
                tabs.forEach(function(e) {
                    if (/http:/.test(e.url) || /https:/.test(e.url)) {
                        chrome.tabs.executeScript(e.tabId, { code: xhr.responseText }, () => {
                            connect(show_floater);
                            console.log(e.url);
                        });
                    }
                    else
                        console.log('e: ' + e.url);
                });
            });
        }
    }
    xhr.send();
});

内容脚本会在页面上发挥它的魔力，并在用户操作发生时将消息发送回背景。

内容.js

 chrome.runtime.sendMessage({}, function (response) {
     console.log('sent');  
     let msgData = { text: "am I connected?" };
     chrome.runtime.sendMessage(JSON.stringify(msgData));
 });

这是 bg 处理消息的方式：

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    console.log('I AM HERE');
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        if (/http:/.test(e.url) || /https:/.test(e.url)) {
            const port = chrome.tabs.connect(tabs[0].id);
            msg = JSON.parse(msg);
            if (msg.text == "am I connected?") {
                //do stuff
            }
        }
    });
    // return true;
});

我正在查看的答案说要在末尾添加“return true”。我尝试过，错误消失了，但 console.log 没有出现...HALP！

Answer 1

不需要所有那些过于复杂的东西。
只需发送消息并回复即可：

内容.js

chrome.runtime.sendMessage({ text: 'am I connected?' }, response => {
  console.log(response);
});

背景.js

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.text == 'am I connected?') {
    console.log(msg, 'sender URL:', sender.url);
    //do stuff
    sendResponse({ foo: 'bar' });
  }
});

请注意，此 onMessage 侦听器应仅在 background.js 的全局范围内添加一次 - 而不是在用于处理选项卡的循环内。

Answer 2

您的 chrome 扩展程序出现问题。

转到这里

chrome://extensions

并禁用所有扩展并尝试！它会起作用的。

但尝试一一启用扩展程序以了解是什么扩展程序导致此错误