Javascript 重定向并注入新页面

Question

我正在为自己的 私人使用 编写一个基于弹出窗口的 Web 扩展。它基本上为我做了一个重复的任务，就是检查几个网站的信息。

访问站点的顺序由弹出窗口控制。为了能够一页一页地浏览页面，我希望扩展弹出窗口将浏览器 window 转发到该站点，并设置一个 onload-event 以在完整 html 后进行通信已加载。

相关的扩展代码目前是这样的：

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 });")
    }
}

如果所有相关的侦听器都已设置，以便网站和扩展程序之间可以进行通信，这将起作用。

但是，我不喜欢每次加载新网站时弹出窗口必须休眠 5 秒，以便 getSource 操作应用于完全加载的下一页而不是当前页面.到目前为止，我还没有找到一种方法来启动重定向并立即设置要加载的 onload 事件 url。

如何改进此代码？

Answer 1

使用 browser.tabs.update 更改 URL 和 browser.tabs.onUpdated 以检测页面加载的确切时间。

(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});
  });
}