使用chrome.runtime.connect和postMessage时发生错误

Question

我尝试做什么

Chrome扩展程序可以快速搜索evernote。它非常像vilium但是用于evernote搜索。当＆＃39; e / E＆＃39;按键，全方位表演。然后我可以输入一些查询字符串，建议将被异步获取。按ESC键隐藏它。 Setting Singleton property value in Firebase Listener

在加载网页时附加omnibar（iframe），然后使用chrome消息传递在iframe和background.js之间进行通信以调用搜索功能

一开始它工作正常，但是当我打开几个镀铬窗口，几个小时后，再次执行搜索，发生错误。

错误

Uncaught TypeError: Cannot read property 'impl' of undefined
    at getPrivateImpl (extensions::utils:121:30)
    at Port.publicClassPrototype.(anonymous function) [as postMessage] (extensions::utils:139:20)
    at EomnibarIn.onInput (chrome-extension://khjineoieblnbagekihfblbfkkapcbda/js/eomnibarIn.js:76:29)
    at HTMLInputElement.input.on (chrome-extension://khjineoieblnbagekihfblbfkkapcbda/js/eomnibarIn.js:60:49)
    at HTMLInputElement.dispatch (chrome-extension://khjineoieblnbagekihfblbfkkapcbda/js/jquery-3.2.1.min.js:3:10316)
    at HTMLInputElement.q.handle (chrome-extension://khjineoieblnbagekihfblbfkkapcbda/js/jquery-3.2.1.min.js:3:8343)

代码

js代码嵌入iframe页面

class EomnibarIn {
    constructor() {
        this.backgroundPort = chrome.runtime.connect({name: 'eomnibarPort'});
        this.backgroundPort.onMessage.addListener((msg) => {
                console.log(msg);
                this._displaySuggestions(msg.queryString, msg.suggestions);
        });
    }

    onInput(event) {
        // Get queryString and other staff

        this.backgroundPort.postMessage({
            action: 'performSearch',
            queryString: queryString,
            maxSuggestion: this.maxSuggestion
        });
    }
}

$(document).ready(function(){
    var barIn = new EomnibarIn();
});

背景页

chrome.runtime.onConnect.addListener(function(port) {
    if (port.name == 'eomnibarPort') {
        port.onMessage.addListener(function(msg) {
            console.log(msg);
            if (msg.action === 'performSearch') {
                const suggestions = eomnibarController.performSearch(
                    msg.queryString, msg.maxSuggestion);
                port.postMessage({queryString: msg.queryString, suggestions: suggestions});
            }
        });
    }
});

我的问题

哪个部分出了问题？我不知道如何调试这个，因为它不会每次都发生。

Answer 1

该错误消息肯定意味着端口已断开连接。这可能发生的原因有几个。一个常见的是扩展重新加载/更新/重新安装。如果您从chrome：// extensions中点击重新加载按钮，则所有旧端口都会断开连接。另一个可能的原因是发生了异常情况（例如您的笔记本电脑电池电量不足并进入低功耗模式）。

修复有点复杂......您必须检测端口的断开连接（使用内容脚本的port.onDisconnect）并建立新连接。不幸的是，它并不像再次调用chrome.runtime.connect（）那么简单。如果您的扩展程序已更新为新版本，则您将无法访问旧扩展程序上下文及其chrome。* API。您必须重新加载一个全新的iframe（并删除旧的iframe）。

我在我的分机Saka Key中执行此操作。您可以查看其源代码。

顺便说一下，包含扩展页面的iframe不是内容脚本。它们实际上是特权上下文，可以直接访问后台页面。