Chrome中切换回扩展标签时，为何两次focus事件间会触发blur？

你在开发Chrome扩展时遇到的标签点击后事件触发顺序（focus→blur→focus），是Chrome浏览器处理扩展标签激活流程的内部机制导致的，具体原因如下：

• 第一次focus事件：点击扩展标签的瞬间，浏览器会先尝试激活该标签页，此时扩展页面的window对象先获得焦点，触发第一次focus事件。
• 中间的blur事件：Chrome在完成标签页激活的过程中，会有短暂的焦点转移——比如临时将焦点切换到浏览器的标签栏UI元素，或是扩展页面的渲染上下文发生短暂切换，导致页面暂时失去焦点，进而触发blur事件。这属于浏览器内部焦点管理的正常流程波动。
• 第二次focus事件：当浏览器完成标签页的激活确认，确保扩展页面处于完全活跃状态后，会再次将焦点赋予页面的window对象，触发第二次focus事件。

优化方案：使用更可靠的页面可见性事件 #

当前代码依赖focus/blur事件判断，容易受焦点波动影响。推荐使用visibilitychange事件监听页面切换，该事件不受焦点临时变动干扰，稳定性更强：

document.addEventListener('visibilitychange', () => {
  // 当页面从不可见变为可见时执行foo()
  if (!document.hidden) {
    foo();
    console.log("返回扩展标签，执行foo()");
  }
});

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