Chrome扩展-等待页面重新加载才能继续脚本

Chrome Extension - waiting until a page reloads to continue script

本文关键字：加载 脚本 继续 新加载 扩展 等待 Chrome      更新时间：2023-09-26

我正在开发一个chrome扩展，以自动化我的一些工作。目前，它在搜索中输入一个值，然后单击搜索按钮。

我想让它在进入下一页时点击另一个按钮（加载后）。但是到达新页面所需的时间各不相同，所以我不能使用setTimeout（页面加载时间从3秒到3分钟不等，完全是随机的，这取决于我在搜索中输入的内容）。

$('#searchBox').val(Arr[i]); //Where Arr is a series of search values
$('#searchSubmit').click();
//Wait until new page is up, then continue
$('#anotherButton').click();
//etc

所以我被难住了。我到底该如何告诉脚本等待新页面加载？在控制台网络选项卡中，我可以看到它在执行之前一直处于挂起状态。有没有办法让我等着？或者是否有某种类型的mutationobserver可以用来检测新页面加载？

感谢

有两种方法：

  1. 在后台页面中使用tabs API检查页面何时加载。完成后，向该选项卡发送一条消息，然后继续执行脚本。

  2. 我最近使用的一个简单的：

    window.addEventListener('load', function() {
   $('#anotherButton').click();
});

应该有效。

在没有任何代码的情况下帮助您并不容易。但在我自己的扩展中，每次加载或重新加载页面时，都会调用我的内容脚本。然后，我只需检查location.href（或其一部分）的值，就可以知道发生了什么，并相应地进行分支。

最终，这个失败是合乎逻辑的。因为它是javascript，因此面向前端，而且我不想干扰多个选项卡，所以我不得不接受我不能监听页面重载（很明显，脚本是随着重载而进行的）。我只是简单地告诉脚本要监听主url。如果它找到了主url，很可能是在脚本的第一个实例，所以我传递了一个0作为函数的参数。如果它不在主页上，我会传递一个1，从而触发另一行逻辑。最后，我使用页面上的长度计数来指示页面差异，然后在此基础上传递不同的参数。

我做了一个助手函数，每500ms检查一次当前选项卡的加载状态：

function waitLoad(callback) {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        let timer = setInterval(() => {
            chrome.tabs.executeScript(tabs[0].id, {
                code: `eval("document.readyState")`,
            }, (data) => {
                if (data[0]==="complete"){
                    callback()
                    clearInterval(timer)
                }
            })
        }, 500)
    })
}
相关文章：