title: How to detect page navigation on YouTube and modify its appearance seamlessly?
body: <p>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.</p>
  
  <p><strong>Is it possible to detect page navigation on YouTube and insert HTML into the page</strong> before it's rendered in the browser so that the added content is shown immediately without any delay and no page refresh is required?</p>
  
  <p>Example link: <a href="https://www.youtube.com/playlist?list=PL_8APVyhfhpdgMJ3J80YQxWBMUhbwXw8B" rel="noreferrer">https://www.youtube.com/playlist?list=PL_8APVyhfhpdgMJ3J80YQxWBMUhbwXw8B</a></p>
  
  <p>P.S. My question is not the same as <a href="https://stackoverflow.com/a/32413134">Modify elements immediately after they are displayed (not after page completely loads) in greasemonkey script?</a> because I've tried MutationObserver and the problem is the same - a refresh is needed to show changes to the web page:</p>
  
  <pre><code>var observer = new MutationObserver(function(mutations) {
      for (var i=0; i&lt;mutations.length; i++) {
          var mutationAddedNodes = mutations[i].addedNodes;
          for (var j=0; j&lt;mutationAddedNodes.length; j++) {
              var node = mutationAddedNodes[j];
              if (node.classList &amp;&amp; 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});
  </code></pre>