Javascript 重定向并注入新页面

Question

I'm writing a popup-based web extension for my own private use . It basically does a repetitive task for me of checking several websites for information.

The order of sites visited is controlled by the popup. In order to be able to go through the pages one by one I'd like the extension popup to forward the browser window to that site and set up an onload-event to communicate back once the full html has been loaded.

The relevant extension code currently looks like this:

function inject(jscode)
{
    browser.tabs.executeScript(null, {code: jscode});
}
...
...
...

// next_url contains the url string of the next website to be visited
// stop contains a bool to decide if more actions will happen
if( next_url != '')
{
    inject("window.location.assign('" + next_url + "');")
    if( !stop )
    {
        await new Promise(resolve => setTimeout(resolve, 5000));
        inject("browser.runtime.sendMessage({action: 'getSource', source: document.documentElement.innerHTML });")
    }
}

This will work if all relevant listeners have been set up so that communication can happen between the website and the extension.

However, I don't like how the popup has to sleep for 5 seconds each time it loads a new website so that the getSource action gets applied to the fully loaded next page rather than the current one. So far I haven't found a way to initiate a redirect and instantly setup an onload-event for that to be loaded url.

How could this code be improved?

Answer 1

Use browser.tabs.update to change the URL and browser.tabs.onUpdated to detect the exact moment the page has loaded.

(async () => {
  await goToUrl(nextUrl);
  const [html] = await browser.tabs.executeScript({
    code: 'document.documentElement.innerHTML',
  });
})();

async function goToUrl(url) {
  const {id: tabId} = await browser.tabs.update({url});
  return new Promise(resolve => {
    browser.tabs.onUpdated.addListener(function onUpdated(updId, info) {
      if (updId === tabId && info.status === 'complete') {
        browser.tabs.onUpdated.removeListener(onUpdated);
        resolve();
      }
    }, {tabId});
  });
}