关闭Chrome扩展二级弹窗后，如何让焦点返回主弹窗？

我正在开发一款Chrome小型扩展，在主扩展弹窗的JS代码中创建了第二个弹窗，目前存在两个弹窗：

• 主扩展的小型弹窗；
• 加载了HTML页面的弹窗。

按照常规情况，扩展失去焦点时会关闭，但关闭第二个弹窗后，焦点并未返回第一个扩展弹窗，而是回到了已打开的标签页，导致扩展停止。请问是否可以在关闭第二个弹窗时将焦点返回主弹窗，以避免扩展停止？

扩展清单片段：

// ...
"action": {
    "default_popup":"popup.html"
},
"background":{}
// ...

创建弹窗的代码：

chrome.windows.create({
    focused: true,
    height: h,
    incognito: false,
    type: "popup",
    url: url,
    width: w,
    left: left,
    top: top
}, function (newWindow) {
    chrome.scripting.executeScript(
        {
          target: {tabId: newWindow.tabs[0].id},
          func: () => {
            // ...
          }
        });
    chrome.scripting.insertCSS({
        target: {tabId: newWindow.tabs[0].id},
        files: ["inject.css"]
    });
});

我曾尝试获取主弹窗的窗口ID，以便在关闭事件中返回焦点，但得到的默认ID为-2。

可以实现这个需求，核心思路是通过后台脚本监听第二个弹窗的关闭事件，再通知主弹窗重新获取焦点。主弹窗ID为-2是正常现象——这是Chrome对扩展action弹窗的特殊标识，无法通过chrome.windows.update直接聚焦，只能调用主弹窗自身的window.focus()方法。

步骤1：完善扩展清单的后台配置 #

如果是Manifest V3，修改background字段指定后台服务工作者脚本：

"background": {
  "service_worker": "background.js"
}

如果是Manifest V2，改为：

"background": {
  "page": "background.html"
}

步骤2：编写后台脚本（background.js） #

后台脚本负责监听第二个弹窗的关闭事件，并通知主弹窗聚焦：

let secondaryWindowId = null;

// 接收主弹窗发送的第二个弹窗ID
chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.type === 'setSecondaryWindowId') {
    secondaryWindowId = message.windowId;
  }
});

// 监听窗口关闭事件
chrome.windows.onRemoved.addListener((windowId) => {
  if (windowId === secondaryWindowId) {
    // 通知主弹窗聚焦
    chrome.runtime.sendMessage({ type: 'focusMainPopup' });
    secondaryWindowId = null;
  }
});

步骤3：修改主弹窗的JS代码（popup.js） #

在主弹窗中，创建第二个弹窗时将其ID发送给后台，并监听后台的聚焦通知：

// 监听后台的聚焦指令
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'focusMainPopup') {
    window.focus();
  }
});

// 创建第二个弹窗的函数
function createSecondaryPopup() {
  const h = 400;
  const w = 300;
  // 计算弹窗居中位置
  const left = window.screenX + (window.outerWidth - w) / 2;
  const top = window.screenY + (window.outerHeight - h) / 2;
  const url = 'secondary.html'; // 替换为你的第二个弹窗HTML路径

  chrome.windows.create({
    focused: true,
    height: h,
    incognito: false,
    type: "popup",
    url: url,
    width: w,
    left: left,
    top: top
  }, function (newWindow) {
    // 将第二个弹窗ID发送给后台
    chrome.runtime.sendMessage({
      type: 'setSecondaryWindowId',
      windowId: newWindow.id
    });

    // 原有注入脚本和CSS的代码保持不变
    chrome.scripting.executeScript({
      target: { tabId: newWindow.tabs[0].id },
      func: () => {
        // ... 你的原有代码
      }
    });
    chrome.scripting.insertCSS({
      target: { tabId: newWindow.tabs[0].id },
      files: ["inject.css"]
    });
  });
}

关键说明 #

• 扩展action弹窗在失去焦点后，Chrome会延迟几秒才关闭，因此第二个弹窗关闭后，主弹窗还处于存活状态，此时调用window.focus()可以让它重新获得焦点，避免被关闭。
• 不要尝试用chrome.windows.update聚焦主弹窗（ID为-2），该方法对这种特殊窗口无效，必须通过主弹窗自身的window对象调用focus()。

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