How to detect when a tab is focused or not in Chrome with Javascript?

Detecting if a tab is focused in JavaScript can be achieved by using the document.visibilityState property or by listening for the visibilitychange event. Below, I will detail both methods and provide some example code.

Method 1: Using document.visibilityState

The document.visibilityState property returns the visibility state of the document, which can be one of the following values:

• 'visible': The page content is partially visible. In practical applications, this typically indicates the tab is currently focused.
• 'hidden': The page content is not visible to the user. This may occur because the document is in a background tab or the window is minimized.

Example Code:

javascript
function checkTabFocus() {
  if (document.visibilityState === 'visible') {
    console.log('The tab is currently focused');
  } else {
    console.log('The tab is not currently focused');
  }
}

// Can be called when needed
checkTabFocus();

Method 2: Listening for the visibilitychange Event

By listening for the visibilitychange event, you can execute actions when the visibility state of the tab changes. This is useful for updating data or re-rendering the UI when the user returns to the webpage.

Example Code:

javascript
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    console.log('The tab is now focused');
  } else {
    console.log('The tab has lost focus');
  }
});

Real-World Application

Suppose you are developing an online music streaming website. When the user switches to another tab while listening to music, you want the music to pause, and resume playback when they return. This scenario is well-suited for using the visibilitychange event.

Code Example:

javascript
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    console.log('The user has returned to the site, resume playing music');
    playMusic();
  } else {
    console.log('The user has left the site, pause music');
    pauseMusic();
  }
});

function playMusic() {
  // Play music logic
}

function pauseMusic() {
  // Pause music logic
}

These methods and examples demonstrate how to detect and respond to the focused state of Chrome tabs in JavaScript.