将无缝页面修改集成到 YouTube 导航中
检测 YouTube 上的页面导航
与传统方式不同对于在导航时重新加载页面的网站，YouTube 采用了一种替换历史状态的技术，避免了内容脚本
页面转换检测方法
要检测 YouTube 上的页面转换，请考虑以下方法：
实施解决方案
manifest.json:
{
"matches": ["*://*.youtube.com/*"],
"js": ["content.js"],
"run_at": "document_start"
}content.js:
document.addEventListener('yt-navigate-start', process);
if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);页面处理函数修改：
function process() {
if (!location.pathname.startsWith('/playlist')) return;
var seconds = [...document.getElementsByClassName('timestamp')]
.reduce((sum, ts) => {
const minsec = ts.textContent.split(':');
return sum + minsec[0] * 60 + minsec[1] * 1;
}, 0);
if (!seconds) {
console.warn('Empty playlist');
return;
}
const timeHMS = new Date(seconds * 1000)
.toUTCString()
.split(' ')[4]
.replace(/^[0:]+/, '');
document
.querySelector('.pl-header-details')
.insertAdjacentHTML('beforeend', `<li>Length: ${timeHMS}</li>`);
}以上是如何无缝检测和修改 YouTube 页面导航？的详细内容。更多信息请关注PHP中文网其他相关文章！
