I have been trying to scrap some data from DOM using my chrome extension. But the data that should be rendered on the DOM is fetched asynchronously, so I need to wait for all network requests to settled.

 chrome.tabs.create({ url: request.url }, (tab) => {
      chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
        if (tabId === tab.id && info.status === "complete") {
          chrome.tabs.onUpdated.removeListener(listener);

          chrome.scripting.executeScript(
            {
              target: { tabId: tab.id },
              func: () =>
                document.querySelector("h1")?.textContent || "No h1 tag",
            },
            (results) => {
              const auditedData = results[0];

              if (!tab.id) return;
              chrome.tabs.remove(tab.id, () => {
                if (sourceTabId) {
                  chrome.tabs.update(sourceTabId, { active: true }, () => {
                    chrome.tabs.sendMessage(sourceTabId, {
                      action: "auditResult",
                      data: auditedData,
                    });
                  });
                }
              });
            },
          );
        }
      });
 });

Relying on info.status === "complete" doesn't gaurantee network idleness