Greasy Fork

You can obtain the DOM data directly as you don't have any GM grant.

• document.querySelector('ytd-watch-flexy').__data.playlist is a boolean. true for playlist is there.
• document.querySelector('ytd-watch-flexy').__data.playlistData are all the data for the playlist in the current page.

For duration, YouTube backend just give the displayable text to front end. Therefore there is only lengthText.

You need to do conversion in JavaScript to obtain the integer values of minutes and seconds.

If you want to do the network stuff, you might use ajax-hook ajax-hook-min-js. Here is a quick example.

YouTube mostly uses XMLHttpRequest to do the content fetching. btw fetch might be possible.

You can hook the network response to get the token etc. Store it locally. Then you might use the same set of API or token to obtain other information.

Thanks for the feedback. Being new to JS, all I know is the basics and It's hard for me to understand what you're trying to say anyway thank you again.

Could you please explain the origin of the property __data? And how did you discover that the element document.querySelector('ytd-watch-flexy') has playlist information? thanks

Could you please explain the origin of the property __data? And how did you discover that the element document.querySelector('ytd-watch-flexy') has playlist information? thanks

By experience. I have been developing a UserScript called Tabview Youtube for a long time.

Different websites use different ways to develop their UI and UX.

For YouTube, its use custom YT components. When you inspect the elements, you can see there are many elements with tagName yt-xxx or ytd-xxx (This should be standard but still sometimes yt- sometimes ytd-)

The data is binded to these DOMs via __data, and then it render the UI according to their predefined YT components.

Also it utilizes the DOM events for page loading and data changing, etc. For example, yt-page-data-updated or data-changed can detect the playlist has been changed.

ytd-watch-flexy is the watch page main container. YouTube engineers binded almost all "states" as attributes to that element, such as whether playlist exists or not. You can also use MutationObserver to detect the attribute changes.

In Edge / Chrome's inspect, you see the element trees, applied css rules, computed css properties, event attached. You can guess their functions from the naming the YouTube engineers used.

Thanks so much! I learned something new today 😄

Is it possible to replace the existing calcElementsPerRow function in the destop_polymer.js file with a new one?

Is it possible to replace the existing calcElementsPerRow function in the destop_polymer.js file with a new one?

Yes. This is a method from a yt custom element.

You can use debugger to find out what is "this" in that function.
then you can know the element tagName.
then you can override the function in its prototype.

OMG Thank you I can have 8 videos per row instead of 3. You're GOAT 💖