title: Chrome Extension Content Script - Grabbing YouTube video titles using JavaScript
body: <p>I have a simple content script for my Chrome Extension that is supposed to grab the titles of YouTube videos. My problem is that it has only worked once. I tried accessing the child nodes of the HTMLCollection which should only be one but I get null of undefined. Doing something like:</p>
  
  <pre><code>element[0].innerText;
  </code></pre>
  
  <p>doesn't give me anything useful but from my understanding if I use getElementsByClassName and apply innerText on the first element with [0] it shoud work. It might be an issue with the html not being fully loaded as sometimes I get null but HTMLCollection always has the property that I want to access just sitting there.</p>
  
  <p>Also:</p>
  
  <pre><code>element.length 
  </code></pre>
  
  <p>returns 0. </p>
  
  <p>This is what I usually get with my script. </p>
  
  <p><a href="https://i.stack.imgur.com/ruX0O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ruX0O.png" alt="When it doesn&#39;t work."></a></p>
  
  <p>Inside is the "innerText" property that I want to grab.</p>
  
  <p><a href="https://i.stack.imgur.com/JYKSH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JYKSH.png" alt="enter image description here"></a></p>
  
  <p>And this is what I got the one time it worked. </p>
  
  <p><a href="https://i.stack.imgur.com/akxbJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/akxbJ.png" alt=""></a></p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "test",
      "author": "Muhammad Amer",
      "description": "test",
      "version": "1.0",
  
      "content_scripts": [
      {
      "matches": [
        "https://www.youtube.com/*"
      ],
  
      "js": ["jquery-3.3.1.js", "content.js"]
      }
  ],
  
  "permissions": [
      "https://www.youtube.com/*",
      "tabs",
      "activeTab", 
      "webNavigation"
      ]
  
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var element = document.getElementsByClassName("title style-scope ytd-video- 
      primary-info-renderer");
  console.log(element);
  
      for (var i = 0; i &lt; element.length; i++) {
      var songTitle = element[i].innerText;
      console.log(songTitle);
      }</code></pre>
  </div>
  </div>
  </p>