Estoy trabajando en un proyecto que produce una extensión de Google. En mi extensión, traté de acceder a los recursos de un sitio web. Aquí está mi código

 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>'], } )

Uso la API webRequest para acceder a los recursos. Para cada pestaña, mi función vuelve a funcionar. Sin embargo, cuando cambio la pestaña, sigo viendo otros recursos de pestañas. Creo que antes de que la pestaña siga funcionando. Pero quiero que termine allí y que funcione para mi nueva pestaña nuevamente. ¿Cómo puedo hacer eso?

Estoy agregando una imagen para que sea más comprensible.

Estoy contando mis acciones: Primero abro la pestaña nytimes.com. Luego cambio la pestaña trklvs.com. No tiene ningún recurso. Sin embargo, después de un tiempo, vi los recursos de nytimes.com. (Creo que todavía se está actualizando). ¿Cómo puedo solucionarlo?