Greasy Fork

You can get the channel id or handle without fetching. For example, ytd-compact-video-render's controller data.

You can also use document.querySelector('ytd-app').handleNavigate to directly open the link using YouTube's Single Page App.

document.querySelector('ytd-app').handleNavigate({command: {
    "clickTrackingParams": "CPgCEKQwGAAiEwi-moLei-CDAxVhTPUFHdHzDpQyB3JlbGF0ZWQ=",
    "commandMetadata": {
        "webCommandMetadata": {
            "url": "/@MBS-AnimeDrama",
            "webPageType": "WEB_PAGE_TYPE_CHANNEL",
            "rootVe": 3611,
            "apiUrl": "/youtubei/v1/browse"
        }
    },
    "browseEndpoint": {
        "browseId": "UC8yS5dCzbiPGf1HnAwwcnhQ",
        "canonicalBaseUrl": "/@MBS-AnimeDrama"
    }
}})

Wow thanks, that's really helpful. Never knew there was data stored there.
How on earth do you know so much about how youtube works?
I haven't ever used polymer, so I guess if you have experience with it, maybe that gives you a pretty good start to figuring YT out?

Suggest to use this, in case polymer controller extraction is off due to YT engine's experimental flag setting.

    const insp = o => o ? (o.polymerController || o.inst || o || 0) : (o || 0);

(I use this for my scripts too)

Replace

$(this).closest("ytd-compact-video-renderer")?.[0]?.polymerController?.data

to

insp($(this).closest("ytd-compact-video-renderer")?.[0]).data

I'd like to understand that before using it.

Why is it better? I mean, the polymerController?. part already handles it if the polymerController can't be accessed and returns falsy to the variable. If that is the case we can't get the channel url anyway right?

As for insp
- What is o.inst?
- Assuming o is truthy, if o.polymerController and o.inst are both falsy, it returns o and resolves to just DOMElement.data in the end, which wouldn't contain the required data anyway right? Or is that the fallback location for that data if polymerController isn't being used?
- Also, if o is falsy, it would return 0 and resolve to 0.data in the end right?

I must not be understanding something here?

• YouTube use Polymer.js but now it is a modified version from the original one.

2021 (& before?) ~ 2023, YouTube's custom elements just bind the data and methods in the element.

Then introduce a experimental flag to try to put them into .inst for some elements ( in 2023, I think just few months )

Then now turn on the experimental flag for all users and put them into .polymerController, except some critical elements like the main page controller (ytd-app, ytd-flexy-watch, etc).

Why is it better?

In case people uses some scripts to turn off the controller extraction. And later you might need to update the insp function due to YouTube update.

If that is the case we can't get the channel url anyway right?

1. polymer extraction is off due to experimental flag setting
2. YouTube update to change the path of its data storing.

which wouldn't contain the required data anyway right?

For legacy yt custom elements (i.e. not the new element features introduced in 2023), element.data will get the same as element.polymerController.data as the YouTube coding sometimes still use element.data.

In the future, element.data would no longer exist. It will never assign to anything (just undefined) as they want to extra the data binding from the DOM.

Also, if o is falsy, it would return 0 and resolve to 0.data in the end right?

insp would just return 0. 0.data is undefined not error. optional chain still work for it.

Thanks for the great explanation. That pretty much covers everything I wanted to know.
I'm not opposed to copying code from online forums or wherever (or helpful people such as yourself), but I like to understand the code I'm copying. :)