页面之间保留的元素

Question

我编写了一个在 YouTube 内运行的内容脚本：

let id = '';
while (true) {
    let newId = await getVideoId(true);
    if (newId && newId !== id) {
        console.log('New id', newId);
        await handleVideo();
        id = newId;
    }
    await pause(50);
}

每当用户访问另一个视频时，

handleVideo

都会与 DOM 元素进行交互。在内部，

handleVideo

使用后面的

myQuerySelector

来获取可用的元素：

function pause(delay) {
    return new Promise((resolve) => setTimeout(resolve, delay));
}

// Wait for at most maxDelay time
async function myQuerySelector(selector, all = false, maxDelay = 10000) {
    const delay = 50; //ms
    let totalDelay = 0;
    let elements = [];
    while (totalDelay <= maxDelay) {
        elements = Array.from(document.querySelectorAll(selector))
        if (elements.length) break;
        await pause(delay);
        totalDelay += delay;
    }
    console.log(`Found after ${totalDelay}`, selector)
    return all ? elements : elements[0];
}

我面临的困难是，当我访问一个新视频时，元素立即可用，但我从这些元素中获取的内容是上一个视频的内容。如何确保元素已更新？

附注最奇怪的是，即使用户访问两个视频之间的频道页面也会发生这种情况。在这种情况下，元素如何持续存在？