How to Load the Comment Section Programmatically on YouTube? (Without Scrolling) (JS/HTML/DOM)

user_4756173 0
Viewed 412

I'm creating a browser extension to enhance YouTube's keyboard navigation. One of the shortcuts I have in mind is for commenting1.

At first, YouTube doesn't load the comment section below a video. Only when you scroll down does the comment section appear2. So how can I find out which event is triggering the comment section to load? And how can I artificially dispatch it? — Otherwise the HTML element for the comment box will be nonexistent.

This question is the continuation of this other one.

1: I'm currently using Dart, but it mimics JS and later gets transpiled to it anyway.
2: For example, when a YouTube page reloads/navigates to another one, the event yt-navigate-start is triggered.

browser-extension youtube dom html javascript
1 Answers

I am currently working on the extension doing that thing too.

(see https://github.com/cyfung1031/Tabview-Youtube)

I finally figure out the solution to programmatically reload it.

There is a set of criteria you need to have to perform the "loading of comments"

1. The ytd-comments#comments must be in a visible area.

You can make it position:absolute and negative z-index to hide in the page but still "be visible". You cannot make it display:none OR content-visibility:hidden. Also, it shall have height and width, so that its getBoundingClientRect() is within the visible area (screen view)

2. Attribute [hidden] is set on ytd-comments#comments.

3. #continuations exists and inside the ytd-comments#comments.

The non-zero size block element #continuations is the only element inside the ytd-comments#comments with its own dimension. This is used to detect the visiblity of the loading mechanism. It is always at the end of the section to perform the triggering.

When you use make scroll, or window.dispatchEvent(new Event("scroll"));, the event listener on the scroll event in Youtube's coding will detect the visibility and perform the loading.

You must wait Youtube to perpare the stuff for you (i.e. #continuations) , and then you can trigger with ytd-comments#comments's attribute [hidden] and window.dispatchEvent(new Event("scroll"));

After the content is feteched, attribute [hidden] will be removed.

You might check my userscript https://greasyfork.org/scripts/428651-tabview-youtube for Youtube Tabview plugin.

user_67641070
Related