title: Why can't my chrome extension content script have access to a page element's property?
body: <p>I am trying to make a chrome extension that will provide <code>ctrl+left arrow</code> and <code>ctrl+right arrow</code> to backward or forward the YouTube video by 2 seconds. Here is my script :</p>
  
  <pre class="lang-js prettyprint-override"><code>const player = document.querySelector('ytd-player').getPlayer();
  const seconds = 2;
  window.addEventListener('keydown', function (e) {
    if (e.ctrlKey) {
      if (e.keyCode === 37) {
        player.seekToStreamTime(player.getCurrentTime() - seconds)
      }
      else if (e.keyCode === 39) {
        player.seekToStreamTime(player.getCurrentTime() + seconds)
      }
    }
  })
  console.log('youtube-seconds extension loaded.');
  </code></pre>
  
  <p>The script is working if I run directly from the chrome devTools but if I make an extension with the same code it doesn't work.</p>
  
  <p>After investigating the code I noticed the issue comes from <code>getPlayer</code> function.<br>
  The <code>document.querySelector('ytd-player')</code> works well if I <code>console.log</code> but <code>getPlayer</code> returns nothing from the script.
  How would one explain that ? and how can I make this work ? am I missing a permission or something ?</p>