我正在制作一个简单的Chrome扩展程序,用于计算YouTube播放列表中每个视频的长度,并在页面中插入总长度。我已经成功完成了这个功能,但是我的脚本只能在刷新页面后才能起作用,而不能在网站导航时起作用。虽然这不太方便。
是否可能在YouTube上检测页面导航并在浏览器呈现页面之前插入HTML,以便添加的内容立即显示,无需延迟,并且不需要刷新页面?
示例链接:https://www.youtube.com/playlist?list=PL_8APVyhfhpdgMJ3J80YQxWBMUhbwXw8B
P.S. 我的问题与修改元素显示后立即显示(而不是在页面完全加载后)的油猴脚本? 不同,因为我尝试过MutationObserver,但问题仍然存在- 需要刷新才能显示Web页面的更改:
var observer = new MutationObserver(function(mutations) {
for (var i=0; i<mutations.length; i++) {
var mutationAddedNodes = mutations[i].addedNodes;
for (var j=0; j<mutationAddedNodes.length; j++) {
var node = mutationAddedNodes[j];
if (node.classList && node.classList.contains("timestamp")) {
var videoLength = node.firstElementChild.innerText;
observer.disconnect();
var lengthNode = document.createElement("li");
var lengthNodeText = document.createTextNode(videoLength);
lengthNode.appendChild(lengthNodeText);
document.getElementsByClassName("pl-header-details")[0].appendChild(lengthNode);
return;
}
}
}
});
observer.observe(document, {childList: true, subtree: true});