title: Extension's script does not wait for whole page to load before running
body: <p>I've recently started working on a chrome extension which has to wait for a YouTube page to load before adding a button at a certain place in the already existing code.</p>
  <p>I've used <code>getElementById()</code> to get the element, but most of the time my page doesn't have time to fully load that the script already finished.</p>
  <p>I've checked many topics regarding this issue and stumbled across <code>window.addEventListener('load', submitAction);</code> which doesn't actually waits for the <strong>whole page</strong> to load, or at least it doesn't look like it. When I try to print the output of the <code>getElementById()</code>'s output, the result is <code>null</code>.</p>
  <p>I've been trying to use other kind of event listeners, using it on document and not on window, trying to wait for  <code>DOMContentLoaded</code> as it looks like it's also waiting for the document to fully load but nothing actually <strong>waits</strong> for the whole page to load.</p>
  <p>The most optimal thing I would like to do would be that the page loads, when the element I am looking for loads, I simply grab it, create a button, append it and it seamlessly appears in the page without any latency.</p>
  <p>Am I doing something wrong here?*</p>
  <p>Here's a sample of my code :</p>
  <p>manifest.json :</p>
  <pre><code>{
      &quot;name&quot;: &quot;Name&quot;,
      &quot;description&quot;: &quot;Description.&quot;,
      &quot;version&quot;: &quot;1.0&quot;,
      &quot;manifest_version&quot;: 2,
      &quot;permissions&quot;: [
        &quot;activeTab&quot;
      ],
      &quot;content_scripts&quot;: [
        {
          &quot;matches&quot;: [&quot;https://*.youtube.com/c/*&quot;],
          &quot;js&quot;: [&quot;content-script.js&quot;],
          &quot;run_at&quot;: &quot;document_idle&quot;
        }
      ],
      &quot;background&quot;: {
        &quot;scripts&quot;: [&quot;background.js&quot;],
        &quot;persistent&quot;: false
      }
  }
  </code></pre>
  <p>background.js :</p>
  <pre><code>chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
      window.onload = function() {
        chrome.tabs.executeScript({
          file: &quot;content-script.js&quot;
        });
      }
    }
  })
  </code></pre>
  <p>content-script.js :</p>
  <pre><code>window.addEventListener('load', submitAction);
  
  function submitAction()
  {
    var youtubeName = document.getElementById(&quot;channel-name&quot;)
  
    console.log(&quot;========================&quot;)
    console.log(youtubeName)
    console.log(&quot;========================&quot;)
  }
  </code></pre>