Web扩展弹窗关闭前关闭标签页：blur事件执行失效问题排查

这问题我之前也碰到过，咱们一步步捋清楚问题出在哪，再给你靠谱的解决方案：

为什么你的代码不生效？ #

你遇到的问题主要有两个核心原因：

1. blur事件不等于弹窗关闭：当用户点击弹窗外部（比如浏览器其他区域），弹窗只是失去焦点并没有被关闭，这时候触发blur执行标签页删除，完全不符合你的需求。
2. 上下文销毁导致异步API中断：就算是弹窗关闭时触发的blur，浏览器此时已经开始销毁弹窗的JS上下文了。browser.tabs.remove是异步API，上下文销毁后，这个异步请求会被浏览器中止，自然无法生效。

正确的实现方式 #

最可靠的做法是利用扩展的后台脚本监听弹窗窗口的关闭事件——后台脚本的上下文是持久的，不会随弹窗销毁而消失。下面是具体步骤：

1. 确保manifest.json声明tabs权限

首先得让扩展有权限操作标签页，在你的manifest.json里加上：

{
  "permissions": ["tabs"]
}

2. 弹窗脚本（popup.js）：告知后台要监听的弹窗和目标标签页

假设你已经正确获取到要删除的tabId，弹窗加载时把弹窗窗口ID和目标tabId传给后台：

// 替换成你实际获取到的目标tabId
const targetTabId = 你的tabId;

async function setupCloseHandler() {
  // 获取当前弹窗的窗口ID
  const popupWindow = await browser.windows.getCurrent();
  // 给后台发消息，注册监听
  await browser.runtime.sendMessage({
    type: "trackPopupClose",
    popupId: popupWindow.id,
    tabToRemove: targetTabId
  });
}

// 弹窗加载时执行
setupCloseHandler();

3. 后台脚本（background.js）：监听窗口关闭并删除标签页

后台脚本负责监听所有窗口关闭事件，匹配到弹窗窗口时执行删除操作：

// 存储弹窗ID和对应要删除的tabId的映射
const popupTabMap = new Map();

// 接收来自弹窗的消息
browser.runtime.onMessage.addListener((msg) => {
  if (msg.type === "trackPopupClose") {
    popupTabMap.set(msg.popupId, msg.tabToRemove);
  }
});

// 监听窗口关闭事件
browser.windows.onRemoved.addListener((windowId) => {
  const tabId = popupTabMap.get(windowId);
  if (tabId) {
    // 删除目标标签页
    browser.tabs.remove(tabId);
    // 清理映射，避免内存泄漏
    popupTabMap.delete(windowId);
  }
});

备选方案：弹窗内用beforeunload事件（不推荐）

如果你不想用后台脚本，也可以尝试用beforeunload事件（注意：部分浏览器对这个事件里的异步操作支持有限，且容易误触发）：

async function handlePopupClose() {
  await browser.tabs.remove(你的tabId);
  // 不要返回任何内容，否则会弹出关闭确认框
}

window.addEventListener("beforeunload", handlePopupClose);

这种方式的问题在于：如果用户刷新弹窗（虽然很少见），也会触发这个事件导致误删标签页，而且异步操作在某些浏览器里可能会被中断，不如后台脚本的方式稳定。

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