Chrome 非活动选项卡未执行 setInterval答案

【问题标题】：Chrome inactive tab not executing setIntervalChrome 非活动选项卡未执行 setInterval
【发布时间】：2019-12-09 20:11:55
【问题描述】：

我喜欢在工作时使用 Youtube 上的 Chrome 标签来听音乐，但每隔一小时音乐就会停止，并且会出现一条消息“你还在吗？”显示在其上。是的，我还在那里，就像每天一样，一天 7 次 :)

所以我安装了一个名为“自定义样式表和脚本”的 Chrome 扩展程序来运行这个简单的 JavaScript 内容：

setInterval(function(){
    let overlay = document.querySelector('iron-overlay-backdrop');
    if(overlay) overlay.click();
}, 1000);

这很好用，但前提是我在 YouTube 标签上。如果我正在制作另一个音乐，音乐最终会停止，我必须单击 YT 选项卡才能运行此 JavaScript（所以毕竟不是真正的胜利）。

我发现一些帖子提到非活动标签中的 setInterval 优先级较低，每秒只会触发一次或两次，在我的情况下它们根本不会触发。

感谢您提供有关查看内容的任何提示:)

【问题讨论】：

也许该站点在后台运行时不显示ytd-app，因此您的 if 分支无法运行。
我实际上在之后添加了 ytd-app 测试，因此不会在每个选项卡上执行此代码
如果 YT 需要一个小时才能知道您是否在那里，那么您无需将 setInterval() 设置为每秒工作。为什么不将其设置为 10 分钟，所以将 1000 更改为 600000。其想法是，在非活动选项卡中调用过多的 setInterval() 最终会完全停止它，而每 10 分钟调用一次可能不会。
我建议使用 MutationObserver 而不是 setInterval。
我会看看 MutationObserver 并在这里发布我的结果！

标签： javascript google-chrome google-chrome-extension youtube

【解决方案1】：

经过一些测试，我发现如果 chrome 选项卡未处于活动状态，YouTube 会禁用单击“确定”按钮进行确认，毕竟 setInterval 工作正常。

如果有人有兴趣，我尝试了 wOxxOm 建议的 MutationObserver 方法，而不是单击确认按钮，我只是重新加载页面。

这是我现在使用的代码：

if(-1 !== window.location.host.indexOf('youtube')) {
    document.addEventListener('DOMContentLoaded', (event) => {

        let popupContainer = document.querySelector('ytd-popup-container');

        let observer = new MutationObserver(function(mutationsList) {
            let confirmButton = popupContainer.querySelector('.yt-confirm-dialog-renderer paper-button');
            if(confirmButton){
                // confirmButton.click();
                document.location.reload(true);
            }
        });

        observer.observe(popupContainer, {childList: true});
    });
}

【讨论】：