如何实现Chrome扩展同一时间最多仅打开1个popup弹窗？

核心思路是利用Chrome扩展端口的生命周期和popup页面绑定的特性，让popup监听端口断开事件主动关闭，避免直接调用chrome.extension.getViews带来的时序和顺序混乱问题，全程不需要禁用扩展图标，完全符合你的需求。

第一步：修改popup端代码 #

在你原有连接端口的代码基础上，新增端口断开监听，触发时直接关闭当前popup：

const port = chrome.runtime.connect({ name: 'popup-communications' });
// 新增以下代码
port.onDisconnect.addListener(() => {
  window.close();
});

第二步：修改background端代码 #

background只需要存储当前活跃的popup端口，新popup接入时主动断开旧端口，同时监听端口主动断开事件重置状态即可：

let activePopupPort = null;

chrome.runtime.onConnect.addListener((port) => {
  // 只处理popup的通信端口
  if (port.name !== 'popup-communications') return;

  // 新popup接入，断开旧端口，旧popup会自动触发关闭逻辑
  if (activePopupPort) {
    activePopupPort.disconnect();
  }

  // 保存当前新的活跃端口
  activePopupPort = port;

  // 监听popup主动关闭事件，重置状态
  port.onDisconnect.addListener(() => {
    if (activePopupPort === port) {
      activePopupPort = null;
    }
  });
});

方案优势 #

1. 完全避开chrome.extension.getViews的返回顺序不确定、快速点击时状态混乱的问题，端口连接事件严格按popup打开顺序触发
2. 不需要禁用扩展图标，每次点击都会在当前窗口打开新popup，旧popup自动关闭，完全符合你的需求
3. 兼容Manifest V2和V3版本，V3环境下service worker休眠也不影响逻辑执行，popup打开时会自动唤醒background执行逻辑

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