如何在用户点击主浏览器窗口时关闭Chrome扩展弹窗（Manifest V3）

方法一：通过后台Service Worker监听窗口焦点变化（推荐） #

在Manifest V3中，后台逻辑由Service Worker处理，我们可以通过监听窗口焦点切换事件，实现点击主窗口时关闭弹窗的需求：

1. 创建弹窗时保存其ID：

let popupWindowId;

chrome.windows.create({
  url: url.href,
  type: "popup",
  left: w,
  width: 500,
  height: 900
}, (window) => {
  popupWindowId = window.id; // 记录弹窗的唯一ID
});

2. 添加焦点切换监听，非弹窗获焦时关闭弹窗：

chrome.windows.onFocusChanged.addListener((focusedWindowId) => {
  if (focusedWindowId !== popupWindowId && popupWindowId) {
    chrome.windows.remove(popupWindowId, () => {
      popupWindowId = null; // 清空ID，避免重复执行关闭操作
    });
  }
});

方法二：在弹窗页面内监听blur事件 #

若要在弹窗自身页面处理，需将监听代码放在弹窗的专属脚本中（创建弹窗的脚本上下文与弹窗页面上下文相互独立，之前的代码错误地在创建脚本中监听了自身的window事件，而非弹窗的window）：

1. 弹窗页面（如popup.html）引入脚本：

<!DOCTYPE html>
<html>
<head>
  <script src="popup.js"></script>
</head>
<body>
  <!-- 弹窗内容 -->
</body>
</html>

2. 在popup.js中添加blur监听：

window.addEventListener('blur', () => {
  window.close();
});

原代码无效原因 #

你之前的window.addEventListener是写在创建弹窗的脚本里，这里的window指向的是当前脚本所在的上下文（比如后台Service Worker或扩展弹出页），而非新创建的弹窗窗口，因此无法监听到弹窗的失焦事件。

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