Detect if users open another tab of the current page

// Listen for visibility change events
document.addEventListener('visibilitychange', function() {
    // Check if the page is hidden
    if (document.hidden) {
        console.log('User opened another tab');
    } else {
        console.log('User is on this tab');
    }
});

// Create a new BroadcastChannel with a unique channel name
const channel = new BroadcastChannel('tab-activity');

// Listen for messages on the channel
channel.addEventListener('message', (event) => {
    if (event.data === 'open-new-tab') {
        console.log('User opened another tab');
    }
});

// Send a message to all other tabs when a new tab is opened
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        channel.postMessage('open-new-tab');
    }
});

const channel = new BroadcastChannel('tab-activity');

window.addEventListener('beforeunload', function(event) {
    // Send a message to all other tabs that this tab is closing
    channel.postMessage('tab-closing');
});