Accessing Twitch's React video player from an addon/extension

Question

I wanted to create buttons that change stream qualities on Twitch to make it easier instead of clicking three times (settings icon -> quality -> specific quality).

I decided to take care of the addon/extension stuff later and did everything in a user script within ViolentMonkey to develop, and thought that just adding that script as an entry of content_scripts in the manifest would make it work as an extension, but to my surprise, the function can't find the react properties to find the 'real video player'.

The code I'm using to grab the video player is this one:

    function findPlayer() {
        try {
            let videoPlayer = null;
            function findReactNode(root, constraint) {
                if (root.stateNode && constraint(root.stateNode)) {
                    return root.stateNode;
                }
                let node = root.child;
                while (node) {
                    const result = findReactNode(node, constraint);
                    if (result) {
                        return result;
                    }
                    node = node.sibling;
                }
                return null;
            }

            let reactRootNode = null;
            let rootNode = document.querySelector('#root');

            if (rootNode && rootNode._reactRootContainer && rootNode._reactRootContainer._internalRoot && rootNode._reactRootContainer._internalRoot.current) {
                reactRootNode = rootNode._reactRootContainer._internalRoot.current;
            }

            videoPlayer = findReactNode(reactRootNode, node => node.setPlayerActive && node.props && node.props.mediaPlayerInstance);
            videoPlayer = videoPlayer && videoPlayer.props && videoPlayer.props.mediaPlayerInstance ? videoPlayer.props.mediaPlayerInstance : null;

            if (videoPlayer) {
                return videoPlayer;
            }
        }
        catch(err) {
            console.log(err);
        }
    }

I noticed that when I tried to run the extension, it wouldn't do anything, so, after some debugging, I found out that while rootNode returns successfully, in a user script it has all the following properties, but when in an extension, it lacks the last two, it goes from defineGetter to proto and that's it.

__defineGetter__
__defineSetter__
__lookupGetter__
__lookupSetter__
__proto__
__reactContainer$dbrtyzpjr3t
_reactRootContainer <-- what I need

I even tried to search for _reactRootContainer directly, but there aren't many results from this, and none useful, also, tried to find other ways to meddle with react internal stuff from this post: React - getting a component from a DOM element for debugging, which it doesn't return anything as well.

Anyone has any idea on how to get the video player, it doesn't need to be through this method, anything that I could use to do videoPlayer.setQuality and such.

Thanks a lot in advance!

Accessing Twitch's React video player from an addon/extension

0 Answers0