The Palos Publishing Company

Categories We Write About

Create a browser tab tracker

Written by

in

Computer Science

Here’s a simple Browser Tab Tracker using JavaScript that detects when the tab is active or inactive and logs status changes. You can expand this to add timestamps, session duration, or server communication.

Code: Browser Tab Tracker (Vanilla JS + HTML)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    .status {
      font-size: 1.5rem;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Browser Tab Tracker</h1>
  <div class="status">Tab is currently <strong id="tabStatus">active</strong>.</div>
  <ul id="log"></ul>

  <script>
    const tabStatus = document.getElementById('tabStatus');
    const log = document.getElementById('log');

    function updateStatus(isActive) {
      const statusText = isActive ? 'active' : 'inactive';
      tabStatus.textContent = statusText;

      const listItem = document.createElement('li');
      listItem.textContent = `${new Date().toLocaleTimeString()} - Tab is ${statusText}`;
      log.appendChild(listItem);
    }

    document.addEventListener('visibilitychange', () => {
      updateStatus(!document.hidden);
    });

    // Initial log
    updateStatus(!document.hidden);
  </script>
</body>
</html>

Features:

Detects when the tab becomes hidden or visible.
Displays current tab status (active or inactive).
Logs every status change with timestamp.
Runs purely in the browser without backend.

How to Use:

Copy and save the code as tab-tracker.html.
Open it in any browser.
Switch tabs or minimize the window to see the status change and log updates.

Let me know if you’d like to add tracking analytics, store data in local storage, or connect to a backend API.

Share This Page:

Comments

Leave a Reply Cancel reply

Check Out Our Newest Posts we wrote about

Categories We Write About