Let's assume that there is HTML page including some special logic, that logics will trigger by some event listener. Users maybe open multiple tabs all including this page. Once the event is emitted, all tabs will trigger that event, that's may caused some performance issue or unexpected error. So we would like to mark one tab as active tab, once we received the event, only this tab will trigger to execution the code logic.

We definition active tab to the currently or last tab which users browsing or focusing.

Here using SharedWorker to implement this logic.

  npm install tabs-manager --save-dev

As I said above, it implement by SharedWorker, If you don't familiar with it, you should learn the base usage of it first. we should have a html including client script, also has a worker.js using for shared work script. The file structure like this

.
├── ...
├── src                         # 
│   ├── client.js               # HTML page script
│   ├── index.html              # HTML page
│   ├── worker.js               # worker script
│   └── ...                     # 
└── ...

and here is the example of how to using tabs-manager

client.js script

import {
  TabsManagerEvents,
  TabsManagerWorkerCaller,
} from 'tabs-manager';

const tabManager = new TabsManagerWorkerCaller({
  workerPath: 'worker.js', // your shared work script path
});

tabManager.addListener(TabsManagerEvents.activeTab, (isActive) => {
  document.title = isActive ? '✅ active' : 'inactive';
});

tabManager.addListener(TabsManagerEvents.error, (error) => {
  console.log('Do not support SharedWorker or other error', error)
});

tabManager.init();

worker.js script

import { TabsManagerWorkerServer } from 'tabs-manager';

const server = new TabsManagerWorkerServer();
server.init();