Chrome扩展：弹窗关闭时后台脚本能否与popup.js通信？

本质问题 #

当popup关闭后，它的JS上下文直接销毁了，根本没法给它发消息——这就是你看到Uncaught (in promise) Error: 无法建立连接。接收端不存在报错的原因。想拿popup里的值，不能直接给关闭的popup发消息，得换思路。

为啥你当前代码会报错 #

你用的chrome.runtime.sendMessage是广播式的，只有popup处于打开状态、并且注册了对应的消息监听器时，才能接收到。popup一关，监听器就没了，接收端不存在，自然报错。

可行的解决方向 #

1. 用Chrome存储API共享数据（最推荐） #

后台和popup共享数据，最靠谱的方式是用chrome.storage.local存值，不用依赖popup是否打开：

• popup里把要共享的值存进去：

// popup.js 示例：点击按钮时存储值
document.getElementById('saveBtn').addEventListener('click', () => {
  chrome.storage.local.set({ popupSavedValue: '我是popup里存的值' }, () => {
    console.log('值已存好');
  });
});

• 后台直接从存储里读，不管popup开没开：

// background.js：页面加载完成后读取
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    chrome.storage.local.get('popupSavedValue', (result) => {
      if (result.popupSavedValue) {
        console.log('拿到popup存的值：', result.popupSavedValue);
      } else {
        console.log('还没存过值');
      }
    });
  }
});

2. popup打开时主动和后台建立连接 #

如果只有popup打开时才需要交互，可以让popup主动发起长连接，后台判断连接存在再发消息：

• popup.js：打开后建立连接并监听消息

// popup.js
const bgPort = chrome.runtime.connect({ name: 'popup-bg-connection' });
bgPort.onMessage.addListener((msg) => {
  if (msg.type === 'askForValue') {
    bgPort.postMessage({ type: 'valueReply', data: 'popup当前的实时值' });
  }
});

// 监听连接断开（popup关闭）
bgPort.onDisconnect.addListener(() => {
  console.log('和后台的连接断了');
});

• background.js：保存连接实例，有需要时发送

// background.js
let activePopupPort = null;

// 监听popup发起的连接
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === 'popup-bg-connection') {
    activePopupPort = port;
    port.onDisconnect.addListener(() => {
      activePopupPort = null;
    });
  }
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && activePopupPort) {
    activePopupPort.postMessage({ type: 'askForValue' });
  }
});

3. 先检测popup是否打开再发消息 #

如果非要给popup发消息，可以先查popup窗口是否存在：

// background.js
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    // 找类型为popup的窗口，并且是当前扩展的popup页面
    const allWindows = await chrome.windows.getAll({ populate: true });
    const isPopupOpen = allWindows.some(w => 
      w.type === 'popup' && 
      w.url.includes(`chrome-extension://${chrome.runtime.id}/popup.html`)
    );

    if (isPopupOpen) {
      chrome.runtime.sendMessage({ myname: "popup-message", data: "Hello from background.js" });
    } else {
      console.log('popup没打开，发不了消息');
    }
  }
});

总结 #

关闭的popup没有运行环境，接收不了消息。优先用Chrome存储API共享数据，这是扩展组件间数据交互的标准方式，稳定又省心。

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