在页面之间保留的元素

问：

我写了一个内容脚本在 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);
}

每当用户访问另一个视频时，都会与 DOM 元素进行交互。在内部，使用以下方法在元素可用时立即获取该元素：handleVideohandleVideomyQuerySelector

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];
}

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

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