0

I am creating a Chrome Extension that will inject HTML on top of the related videos bar of a YouTube video.

This is the desired effect of the plugin.

Here is the manifest.json:

{
  // Required
  "manifest_version": 2,

  // App
  "name": "...",
  "version": "...",
  "author": "...",
  "description": "...",

  "content_scripts": [
    {
      "run_at": "document_idle",
      "matches": ["*://www.youtube.com/watch?v=*"],
      "js": ["jquery-min-3.3.1.js", "inject.js"]
    }
  ]

}

And here is inject.js:

$(document).ready(function(){
  $('#related').prepend('<h1>This was injected throught jQuery.</h1>');
});

When the extension is loaded into Chrome and a YouTube video page is loaded, the script seems to work for a second. The h1 in injected at the top of the #related bar until related video thumbnails start to load. Then the injected h1 quickly is pushed to the bottom as each new thumbnail loads.

I'm guessing this has something to do with YouTube using AJAX to load content. Is there a way to wait until all AJAX has been loaded before injecting HTML?

jack novotny
  • 1
  • Possible duplicate of [How to wait until an element exists?](https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists) and [Make function wait until element exists](https://stackoverflow.com/questions/16149431/make-function-wait-until-element-exists). – Luka Čelebić May 13 '18 at 21:37
  • See also [How to detect page navigation on Youtube and modify HTML before page is rendered?](//stackoverflow.com/a/34100952) – wOxxOm May 14 '18 at 06:03

0 Answers0