How to know when youtube fully loaded?

Asked Jun 12 '20 at 14:08

Active Jun 12 '20 at 14:08

Viewed 98 times

I have chrome-extension content_script that need to add something to youtube video description and comment section.

Problem is that youtube loads async, first you can see template, than video, than description section and comments section.

Is there an event that can be triggered when page fully loaded? Or some other easy solution?

I can think only to one solution - rerun useEffect every second until all the containers could be found.

export const App = () => {
  const [postContainer, setPostContainer] = useState<null | HTMLElement>(null)
  const [commentsContainer, setCommentsContainer] = useState<null | HTMLElement>(null)

  useEffect(() => {  
    $('#meta-contents').first().prepend(`<div id='my-post' />`)
    $('#comments').first().prepend(`<div id='my-comment' />`)

    setPostContainer($('#my-post').get(0))
    setCommentsContainer($('#my-comment').get(0))
  }, [])

  if (!postContainer || !commentsContainer) return null

  return (
    <div>
      <Portal target={postContainer}>
        <h1>POST</h1>
      </Portal>
      <Portal target={commentsContainer}>
        <h1>COMMENT</h1>
      </Portal>
    </div>
  )
}

asked Jun 12 '20 at 14:08

ZiiMakc

31,187
24
65
105

Have a look on this answer with a YT api solution in it: https://stackoverflow.com/a/60109330/5506730 . It might help. – gazdagergo Jun 12 '20 at 14:12
@gazdagergo what exactly i need to look at? – ZiiMakc Jun 12 '20 at 14:17
2

[How to detect page navigation on YouTube and modify HTML before page is rendered?](https://stackoverflow.com/a/34100952) - see if there are some events you can use. – wOxxOm Jun 12 '20 at 14:19
@wOxxOm it's another problem, but thanks, will be helpfull. – ZiiMakc Jun 12 '20 at 14:22
1

https://stackoverflow.com/a/39508954/2118955 – hindmost Jun 12 '20 at 14:22
@hindmost MutationObserver seems what i need. – ZiiMakc Jun 12 '20 at 14:25
@hindmost yep, it is – ZiiMakc Jun 12 '20 at 14:30
@RTW the `videoStatuses` will give you the loaded status in the mentioned example. – gazdagergo Jun 13 '20 at 06:38

How to know when youtube fully loaded?

0 Answers0