如何让Chrome标签页在浏览器最小化或切换标签时仍保持活跃聚焦

以下是不同场景下的可行实现路径，均不需要强制切回实际视图：

1. 可控目标页面源码的场景 #

直接在页面代码中劫持浏览器焦点、可见性相关的API和事件即可：

• 强制document.hasFocus()始终返回激活状态，同时拦截页面的blur事件：

  // 重写焦点检测方法
  Object.defineProperty(document, 'hasFocus', {
    value: () => true,
    configurable: true
  })
  // 阻止失去焦点事件被页面逻辑捕获
  window.addEventListener('blur', (e) => e.stopImmediatePropagation(), true)
  // 定时触发聚焦事件，维持页面感知的激活状态
  setInterval(() => window.dispatchEvent(new Event('focus')), 200)
  

• 覆盖页面可见性检测逻辑，避免页面感知到自己被切换到后台或最小化：

  // 强制可见性状态为可见
  Object.defineProperty(document, 'visibilityState', {
    value: 'visible',
    configurable: true
  })
  // 阻止可见性变更事件被捕获
  window.addEventListener('visibilitychange', (e) => e.stopImmediatePropagation(), true)
  

2. 不可控目标页面源码、仅在本地浏览器实现的场景 #

可以通过浏览器扩展实现：

• 开发轻量浏览器扩展，在content script中给目标站点注入上面的劫持代码，不需要修改目标页面源码。
• 可以配合扩展的后台进程维持心跳，避免浏览器对后台标签页的定时器做降频处理，保证页面逻辑正常运行。

3. 无界面/批量自动化运行的场景 #

用无头浏览器控制工具实现：

• 选用Puppeteer、Playwright这类工具，在页面初始化阶段就注入劫持逻辑，同时可配置无头模式后台运行，不需要弹出实际浏览器窗口。
  Puppeteer示例代码：

  const page = await browser.newPage()
  // 页面加载前就注入劫持逻辑
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(document, 'hasFocus', { value: () => true })
    Object.defineProperty(document, 'visibilityState', { value: 'visible' })
    window.addEventListener('blur', e => e.stopImmediatePropagation(), true)
  })
  

额外适配说明 #

如果页面依赖高优先级的定时器、WebRTC或硬件加速能力，上述JS层劫持还需要配合浏览器启动参数使用，禁用内核级的后台标签页资源节流策略，Chrome类浏览器可添加启动参数：--disable-background-timer-throttling、--disable-renderer-backgrounding、--disable-backgrounding-occluded-windows。

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