I am working on a project which produces a google extension. In my extension, I tried to access resources of a website. Here is my code

 if (requestArray.length !== 0) {
    requestArray = []
  }
  if (resourcesCategories.length !== 0) {
    resourcesCategories = []
  }
  if (mywebsiteCategories.length !== 0) {
    mywebsiteCategories = []
  }

  getWebsiteCategories().then((webCat) => {
    if (webCat.length !== 0) {
      setWebsiteCategories([])
    }
  })

  getResourcesCategories().then((resCat) => {
    if (resCat.length !== 0) {
      setResourcesCategories([])
    }
  })
  getResources().then((res) => {
    if (res.length !== 0) {
      setResources([])
    }
  })
  chrome.webRequest.onBeforeRequest.addListener(
    (details) => {
      if (details && details.tabId !== -1 && details.tabId === tabId) {
        if (!requestArray.includes(details.url.split('/')[2])) {
          requestArray.push(details.url.split('/')[2])
          apiCheck(
            requestArray,
            tabId,
            mywebsiteCategories,
            resourcesCategories
          )
        }
      }
      getURL().then((host) => {
        if (host && !requestArray.includes(host)) {
          requestArray.push(host)
          apiCheck(
            requestArray,
            tabId,
            mywebsiteCategories,
            resourcesCategories
          )
        }
        setResources(requestArray)
      })
    },
    {
      urls: ['<all_urls>'],
    }
  )
 

I use webRequest API for access resources. For every tab, my function works again. However, when I change the tab I still see another tabs resources. I think before tab still working. Bu I want it finished there and work for my new tab again. How can I do that?

I am adding an image for more understandable.

I am telling my actions: First I open nytimes.com tab. Then I switch trklvs.com tab. It doesnt have any resource. However, after some time, I saw nytimes.com resources. (I think it still updating.) How can I fix that?