javascripthtmlgoogle-chrome-extensionvisibilityvisibilitychange

Is there any way to know when a tab in the browser is covered by a window?

TL;DR: I'm working on a Chrome extension where I need to increase a count only when a tab is visible and not covered by another window. Is there any way to detect this?

I've tried using the Page Visibility API, but here's the problem with it:

Imagine I have two windows docked side by side. My focus is on tab 'X' from window 'A'. But, to the side, I also have tab 'Y' open in the foreground of window 'B'.

If I check document.hidden for tab 'Y' at that time, it will resolve to false, which is what I'd want. However, if I then expand window 'A' to cover the full screen and leave window 'B' open behind it and not minimized, document.hidden for tab 'Y' will still equal false even though, from a user-vision perspective, that tab is completely invisible.

Adding event listeners to the blur and focus events doesn't help either because blur is fired whenever the document it's added to loses focus, which would work fine for the scenario where I have window 'A' covering the entire screen , but isn't suitable for the scenario where I have window 'A' and 'B' side by side. In that case, the 'blur' event would be fired when tab 'Y' loses focus even though tab 'Y' is technically visible to anyone who is looking at the screen.

The outcome I need looks like this:

  1. Tab 'Y' is in the foreground of a non-minimized window AND not covered by another window: increaseCount() // regardless of whether the tab is focused or not
  2. Tab 'Y' is in the foreground of a non-minimized window BUT is covered by another window such that its contents wouldn't be visible to any human observer: // don't increase count

Is there any way to detect this?

Solution

  • No, there is no reliable way to detect this.

    In fact, it's my understanding that Chrome might not even know if the content is covered. Consider a case like Windows, where ever since Windows Vista and Aero, the application window is always drawn and intercepted by the window manager. The underlying application is always drawing to a virtual space. Other complications include windows that may cover the browser window but may not be totally blocking it. Without knowing the content, the browser doesn't really know if the content is covered.