如何在YouTube上检测页面导航并无缝修改其外观? [英] How to detect page navigation on YouTube and modify its appearance seamlessly?

问题描述

我正在制作一个简单的Chrome扩展程序，以将YouTube播放列表中每个视频的长度相加，然后将总长度插入页面中.我已经成功做到了，但是我的脚本仅在刷新页面后才起作用，但在浏览网站时却不起作用.但这不是很方便.

I'm making a simple Chrome extension to add up the length of each video in a YouTube playlist and insert the total length in the page. I've succeeded at that, but my script only works after refreshing a page but not when the site is navigated. That's not very convenient though.

是否可以在YouTube上检测页面导航并将HTML插入页面，然后再在浏览器中呈现HTML，以便立即显示添加的内容而没有任何延迟并且不需要刷新页面?

Is it possible to detect page navigation on YouTube and insert HTML into the page before it's rendered in the browser so that the added content is shown immediately without any delay and no page refresh is required?

示例链接: https://www.youtube.com/playlist?list=PL_8APVyhfhpdgMJ3J80YQxWB /a>

Example link: https://www.youtube.com/playlist?list=PL_8APVyhfhpdgMJ3J80YQxWBMUhbwXw8B

P.S.我的问题与立即在修饰符脚本中显示元素(而不是在页面完全加载之后)立即修改元素吗?，因为我是尝试过MutationObserver，问题是一样的-需要刷新以显示对网页的更改:

P.S. My question is not the same as Modify elements immediately after they are displayed (not after page completely loads) in greasemonkey script? because I've tried MutationObserver and the problem is the same - a refresh is needed to show changes to the web page:

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

推荐答案

YouTube网站不会在导航中重新加载页面，而是替换了

YouTube site doesn't reload pages on navigation, it replaces the history state.

在更改URL且未重新加载页面的情况下，不会重新插入扩展程序的内容脚本.自然，当您手动重新加载页面时，将执行内容脚本.

The extension's content scripts aren't reinjected when URL changes without a page being reloaded. Naturally when you reload a page manually the content script is executed.

在YouTube网站上，有几种方法可以检测页面转换:

There are several methods to detect page transitions on Youtube site:

• 使用后台页面脚本: webNavigation API ， transitionend事件用于视频页面上的进度表

• 使用内容脚本和视频导航触发的特定于站点的事件:

• using a background page script: webNavigation API, tabs API
• using a content script: transitionend event for the progress meter on video pages

• using a content script and a site-specific event triggered on video navigation:

在devtools控制台中运行getEventListeners(window)并检查输出.

Run getEventListeners(window) in devtools console and inspect the output.

yt-navigate-start .

注意:

• 对于其他任务，我们可能需要 yt-navigate-finish
• 旧的youtube设计使用的是 spfdone事件

• for other tasks we might want yt-navigate-finish
• the old youtube design was using spfdone event

manifest.json :

{
  "name": "YouTube Playlist Length",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": ".............",
  "content_scripts": [{
      "matches": [ "*://*.youtube.com/*" ],
      "js": [ "content.js" ],
      "run_at": "document_start"
  }]
}

注意:matches键包含整个youtube.com域，以便在用户首次打开youtube主页之后导航到观看页面时运行内容脚本.

Note: the matches key encompasses the entire youtube.com domain so that the content script runs when the user first opens the home youtube page then navigates to a watch page.

content.js :

window.addEventListener('yt-navigate-start', process);

if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

process功能将更改页面.
请注意，指定的元素类别和结构将来会更改.

The process function will alter the page.
Note, the specified element classes and structure will change in the future.

function process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  var seconds = [].reduce.call(
    document.getElementsByClassName('timestamp'),
    function (sum, ts) {
      var minsec = ts.textContent.split(':');
      return sum + minsec[0] * 60 + minsec[1] * 1;
    },
    0,
  );
  if (!seconds) {
    console.warn('Got no timestamps. Empty playlist?');
    return;
  }
  var timeHMS = new Date(seconds * 1000).toUTCString().split(' ')[4]
    .replace(/^[0:]+/, ''); // trim leading zeroes
  document.querySelector('.pl-header-details')
    .insertAdjacentHTML('beforeend', '<li>Length: ' + timeHMS + '</li>');
}

这篇关于如何在YouTube上检测页面导航并无缝修改其外观?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！