未选中的runtime.lastError:无法建立连接。google chrome扩展通信中不存在接收端

Question

当我开发一个chrome扩展时，后台显示了这个错误：

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

我读过the question，但它使用的是chrome long-term连接，现在我使用的是短连接。这是我的代码接收消息：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
    if (sender.tab && sender.tab.active) {
        if (msg.text === 'setPageRSS') {
            handleRSS(msg.feeds, sender.tab.id);
        } else if (msg.text === 'addPageRSS') {
            addPageRSS(msg.feed, sender.tab.id);
        }
    }
    if (msg.text === 'getAllRSS') {
        sendResponse(getAllRSS(msg.tabId));
    }
});

我该怎么做才能修复它呢？如何检查错误？是否可以在发送消息前检查接收端是否存在？

​

​

这是包含sendMessage的弹出页面：

import '../../css/popup.less';
import ClipboardJS from 'clipboard';
import { getConfig } from '../common/config';
import { subChannel } from '../common/cruise';
import settingIcon from '../../svg/setting.svg';
import aboutIcon from '../../svg/about.svg';
import MD5 from 'md5.js';
import { Message } from 'element-ui';
let config;

function generateList(type, list) {
    let result = '';
    if (list && list.length) {
        list.forEach((item) => {
            const replaced_url = item.url.replace('{rsshubDomain}', config.rsshubDomain);
            const url = encodeURI(
                type !== 'page-rsshub' || !config.rsshubAccessControl.enabled
                    ? replaced_url
                    : config.rsshubAccessControl.useCode
                    ? `${replaced_url}?code=${new MD5().update(item.path + config.rsshubAccessControl.accessKey).digest('hex')}`
                    : `${replaced_url}?key=${config.rsshubAccessControl.accessKey}`
            );
            result += `
            <li class="rss-item">
                <img class="rss-image" src="${item.image || './rsshub.png'}">
                <a href="${url}" class="rss-info">
                    <div class="rss-title">${item.title}</div>
                    <div class="rss-url">${url.replace('https://', '').replace('http://', '')}</div>
                </a>
                ${
                    item.isDocs
                        ? `<a href="${url}" class="rss-action">文档</a>`
                        : `<div class="rss-action rss-copy" data-clipboard-text="${url}">复制</div>`
                } 
                ${
                    config.submitto.feedly ? `<input id="${url}" url="${encodeURI(url)}" type="submit" value="订阅" class="rss-action rss-submitto-feedly"></input>` : ''
                }       
            </li>
            `;
            chrome.storage.local.get("cruiseSubList", function(result){
                var isSub = false;
                var subList = result.cruiseSubList;
                subList.forEach(item=>{
                    if(item.subUrl == url){
                        isSub = true;
                    }
                });
                console.log(isSub);
                if(isSub){
                    document.querySelectorAll('input').forEach((ele) => {
                        if(ele.id == url){
                            ele.setAttribute('value','已订阅');
                        }
                    });
                }
            })
        });
        document.querySelector(`.${type} ul`).innerHTML = result;
        document.querySelector(`.${type}`).style.display = 'block';
        document.body.classList.add('something');
        
    }
}

document.querySelector('.icons-setting').innerHTML = settingIcon;
document.querySelector('.icons-about').innerHTML = aboutIcon;

chrome.tabs.query(
    {
        active: true,
        currentWindow: true,
    },
    (tabs) => {
        const tabId = tabs[0].id;

        getConfig((conf) => {
            config = conf;
            chrome.runtime.sendMessage(
                null,
                {
                    text: 'getAllRSS',
                    tabId: tabId,
                },
                (feeds) => {
                    generateList('page-rss', feeds.pageRSS);
                    generateList('page-rsshub', feeds.pageRSSHub);
                    generateList('website-rsshub', feeds.websiteRSSHub);

                    const clipboard = new ClipboardJS('.rss-copy');
                    clipboard.on('success', function (e) {
                        e.trigger.innerHTML = '已复制';
                        setTimeout(() => {
                            e.trigger.innerHTML = '复制';
                        }, 1000);
                    });

                    document.querySelectorAll('.rss-image').forEach((ele) => {
                        ele.addEventListener('error', function () {
                            this.setAttribute('src', './rsshub.png');
                        });
                    });

                    // handle a label click event
                    document.querySelectorAll('a').forEach((ele) => {
                        ele.addEventListener('click', (e) => {
                            e.preventDefault();
                            chrome.tabs.create({
                                url: ele.getAttribute('href'),
                            });
                            window.close();
                        });
                    });

                    document.querySelectorAll('input').forEach((e)=>{
                        e.addEventListener('click',(innerEvent) =>{
                            innerEvent.preventDefault();
                            //subChannelTest(e);
                            
                            var subText = e.getAttribute('value');
                            if(subText === '已订阅'){
                                Message("已订阅此频道");
                                return;
                            }
                            if(subText === '处理中'){
                                Message("请求处理中...");
                                return;
                            }
                            if(subText === '订阅'){
                                e.setAttribute('value','处理中');
                                console.info("开始处理订阅...");
                                subChannel(e,0);
                            }
                        });
                    });
                }
            );
        });
    }
);

这是我的背景sendMessage函数：

chrome.tabs.onActivated.addListener((tab) => {
    chrome.tabs.sendMessage(
        tab.tabId,
        {
            text: 'getPageRSS',
        },
        (feeds) => {
            handleRSS(feeds, tab.tabId, true);
        }
    );
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url && tab.active) {
        chrome.tabs.sendMessage(
            tab.id,
            {
                text: 'getPageRSS',
            },
            (feeds) => {
                handleRSS(feeds, tab.id);
            }
        );
    }
});

今天我发现在Google Chrome中打开一个新的url仍然会抛出这个错误。这种情况我不知道该如何避免。

Answer 1

最后我发现当打开一个newtab，抛出这个错误时，我调整了如下代码：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if(changeInfo && changeInfo.url === 'chrome://newtab/'){
        return;
    }
    if (changeInfo.url && tab.active) {
        chrome.tabs.sendMessage(
            tab.id,
            {
                text: 'getPageRSS',
            },
            (feeds) => {
                handleRSS(feeds, tab.id);
            }
        );
    }
});

修复其中一个条件。