In a browser extension: how listen for HTTP requests and display a count?

Question

I'm building an extension that listen for HTTP requests in the background/worker and then displays the number of requests in the badge.

Sounds easy enough, but we have to keep a counter per tab. Also if the website in the tab changes, the counter needs to be reset to zero.

I store the count in a global variable and then use setBadgeText, but i have to detect tabs.onUpdated and figure out if a URL change is real or an SPA etc.. and every day i discover an edge case.

// background 
chrome.webRequest.onBeforeRequest.addListener((details) => {
    // logic goes here
  },
  { urls: ['https://*.example.com/*'] },
  ['requestBody', 'extraHeaders']
);

chrome.tabs.onUpdated.addListener(async (tabId, change, tab) => {
  if (change.url) {
   //  remove from cache
  }
});

I feel like this should be a commun pattern (ad blockers etc..) , am I missing something obvious ?