浏览器插件自动操作网页中的等待问题

开发浏览器插件来自动点击网页，以完成大量重复工作，是我们程序员经常遇到的需求。编写content.js文件注入页面之后即可操作按钮，但经常遇到的问题是，有的网站存在加载慢，甚至加载不出来的问题，如何让程序自动规避、判断这些现象，并不中断执行是一个有挑战性的任务。

经过长时间的各种尝试，我精炼了一个"等待函数"，结合promise/resolve，就基本上能控制等待、轮询等操作。代码如下：

async function waitForElementToLoad(refind_function, selector, maxRetries = 30) {
    for (let i = 0; i < maxRetries; i++) {
        var doc = refind_function();
        if (doc == undefined || doc == null) {
            await new Promise(resolve => setTimeout(resolve, 1000));
            // console.log('等待中')
            refind_function()
        } else {
            var element = doc.querySelector(selector);
            if (element != undefined && element != null) {
                // 元素已加载，执行你的操作
                // // console.log('找到了元素:', element);
                return Promise.resolve(element);
            } else {
                // 元素未加载，等待一段时间后重试    
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
        }

    }
    return Promise.reject('元素未找到');
}

使用的时候，一行代码即可调用它，例如等待一个元素出现：

await waitForElementToLoad(saveOnu, '.btn.btn-info.btn-sm')

注意，要放在async函数中。