Chrome扩展：background向content发消息报错但消息已接收的解决方法

错误原因 #

你遇到的错误 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.，本质是因为 chrome.tabs.query({}) 会返回浏览器所有标签页，其中包含未注入content.js的页面——比如Chrome内置的chrome://extensions、新标签页、设置页等。这类页面受Chrome安全限制，不满足你manifest中<all_urls>的匹配规则，无法注入内容脚本，当background尝试给它们发消息时，自然找不到接收端，从而抛出错误。

而部分标签页能成功接收消息，是因为这些页面的URL符合<all_urls>规则，content.js已被正确注入并监听了消息通道，所以能正常响应修改背景色的指令。

修复方法 #

有两种实用的修复思路：

1. 过滤无效标签页，只向合规页面发消息 #

在发送消息前，先过滤掉Chrome内置协议的页面，避免向无接收端的标签页发起请求：

chrome.runtime.onMessage.addListener((message, sender , sendMessage)=>{
    if(message.action == "changeTabColor"){
        chrome.tabs.query({},(tabs)=>{
            tabs.forEach((tab) => {
                // 排除Chrome内置页面和扩展自身页面
                if (!tab.url.startsWith('chrome://') && !tab.url.startsWith('chrome-extension://')) {
                    chrome.tabs.sendMessage(tab.id, {action: "changeTabColor"});
                }
            });
        })
    }
})

2. 捕获Promise错误，避免控制台报错 #

Manifest V3中chrome.tabs.sendMessage返回Promise，你可以用try/catch捕获错误，不让错误暴露在控制台：

chrome.runtime.onMessage.addListener((message, sender , sendMessage)=>{
    if(message.action == "changeTabColor"){
        chrome.tabs.query({},async (tabs)=>{
            for (const tab of tabs) {
                try {
                    await chrome.tabs.sendMessage(tab.id, {action: "changeTabColor"});
                } catch (err) {
                    // 可选：仅记录错误，不阻断流程
                    console.log(`无法给标签页 ${tab.id} 发送消息:`, err);
                }
            }
        })
    }
})

补充说明 #

你的content.js能正常接收消息，是因为目标标签页的URL满足<all_urls>匹配条件，content脚本已成功注入并注册了chrome.runtime.onMessage监听器，消息通道可以正常建立并传递指令。

内容的提问来源于stack exchange，提问作者user20273569