后台脚本：错误：无法建立连接。接收端不存在

Question

我正在尝试将消息从后台脚本发送到我的 chrome 扩展中的内容脚本。但看起来消息是在加载内容脚本之前发送的？

这是我正常使用扩展程序时遇到的错误：

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

这是我的后台脚本，其tabs.onUpdated功能为：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

    if (changeInfo.url) {
        console.log(changeInfo.url, tabId)
        chrome.tabs.sendMessage(tabId, {
            url: changeInfo.url,
            type: 'URL_CHANGE'
        });
    }
});

这是我的内容脚本接收函数：

chrome.runtime.onMessage.addListener((obj, sender, response) => {
    console.log('received', obj)
    if (obj.type === 'URL_CHANGE') {
        console.log('testestsetst')
        getAuth()
        getUrlType(obj.url)
    } else if (obj.type === 'AUTH') {
        getAuth()
    } else if (obj.type === 'UN-AUTH') {
        removeAuth()
    }
});

每当我正常运行扩展时，我都看不到内容脚本的输出，并且收到如上所述的错误。但是，当我调试后台脚本并单步执行代码时，我没有收到错误，并且我的内容脚本正确打印了所有内容。这可能是由于页面需要加载造成的吗？如果是这样，我该如何解决这个问题？

Answer 1

通过检查 tab 是否完整并通过 tab 参数发送 url 来解决这个问题，如下所示：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete') {
        chrome.tabs.sendMessage(tabId, {
            url: tab.url,
            type: 'URL_CHANGE'
        });
    }
});