Chrome扩展Manifest V3：Popup.js无法接收Background.js消息，报错连接失败

你遇到的Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist错误，核心原因是Chrome扩展的popup仅在用户点击图标打开时才处于活跃状态：

• 当chrome.tabs.onActivated触发标签切换时，popup大概率是关闭的，此时没有消息接收端，自然无法建立连接。
• 即使之后打开popup，之前发送的消息也无法被接收，因为popup关闭时其内部的chrome.runtime.onMessage监听器会被销毁。

以下是几种可行的解决方法：

方案1：通过chrome.storage监听状态变化（推荐） #

既然你已经在background中把状态存入chrome.storage.local，popup可以直接监听storage的变化，实现状态同步。这种方式无需主动发消息，且状态持久化，可靠性更高。

修改popup.js #

// popup加载时先获取一次当前状态
chrome.storage.local.get('isRedditTab', (data) => {
  if (data.isRedditTab !== undefined) {
    console.log('当前状态：', data.isRedditTab);
    // 这里可添加UI更新逻辑，比如切换按钮显示状态
  }
});

// 实时监听storage变化，同步状态
chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local' && changes.isRedditTab) {
    const newIsRedditTab = changes.isRedditTab.newValue;
    console.log('状态更新：', newIsRedditTab);
    // 更新UI逻辑
  }
});

优化background.js（移除不必要的消息发送） #

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    const isRedditTab = tab.url.includes('reddit.com'); // 用const声明变量，避免全局污染

    chrome.storage.local.set({ isRedditTab }, () => {
      console.log("isRedditTab value saved to local storage.");
    });
    // 移除原有的chrome.runtime.sendMessage
  });
});

方案2：popup打开时主动获取当前状态 #

如果不需要实时监听，仅需popup打开时获取当前标签页的状态，可以在popup加载时直接查询激活标签或读取storage。

popup.js代码 #

document.addEventListener('DOMContentLoaded', async () => {
  // 方式1：直接查询当前激活的标签页
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const isRedditTab = tab.url.includes('reddit.com');
  console.log('当前tab是否为Reddit：', isRedditTab);

  // 方式2：从storage读取已存储的状态
  // const { isRedditTab } = await chrome.storage.local.get('isRedditTab');
});

方案3：仅当popup存在时发送消息（不推荐） #

如果一定要使用消息机制，需要先判断popup是否处于活跃状态，通过长连接实现消息传递，但这种方式局限性大（仅popup打开时有效）。

popup.js #

// popup打开时建立长连接
const port = chrome.runtime.connect({ name: 'popup-background' });
port.onMessage.addListener((message) => {
  if (message.type === 'checkReddit') {
    console.log("message received in popup", message.isRedditTab);
  }
});

// popup关闭时自动断开连接（可选，浏览器会自动处理）
window.addEventListener('unload', () => {
  port.disconnect();
});

background.js #

let popupPort = null;

// 监听popup的连接请求
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === 'popup-background') {
    popupPort = port;
    // 连接断开时清空引用
    port.onDisconnect.addListener(() => {
      popupPort = null;
    });
  }
});

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    const isRedditTab = tab.url.includes('reddit.com');

    chrome.storage.local.set({ isRedditTab }, () => {
      console.log("isRedditTab value saved to local storage.");
    });

    // 仅当popup连接存在时发送消息
    if (popupPort) {
      popupPort.postMessage({ type: 'checkReddit', isRedditTab });
      console.log("message sent from background", isRedditTab);
    }
  });
});

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