testing button

gistfile1.txt

// ==UserScript==
// @name         xqc Twitch/Kick Embed
// @version      0.5
// @description  Embed xqc's kick stream on his twitch channel, for viewing twitch chat while he is live on kick
// @author       /u/mkze
// @match        *://*.twitch.tv/xqc
// @match        *://twitch.tv/xqc
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitch.tv
// @grant        none
// ==/UserScript==

(async function() {
    'use strict';

    console.info('[xqc_twitch_embed] script initialized...');

    //small startup delay, allow VOD element to become available for removal
    const DELAY_SECS = 2;
    await new Promise(sleep => setTimeout(sleep, DELAY_SECS * 1000));

    //default for chat width
    let ttv_chat_width_px = 250;

    //find ttv containers for manipulation
    let div_main = document.querySelector('main');
    if(!div_main) {
        console.info('[xqc_twitch_embed] Error: No main container.');
        return;
    }

    let div_container = div_main.parentElement;
    if(!div_container) {
        console.info('[xqc_twitch_embed] Error: No parent container.');
        return;
    }

    let div_sidebar = div_container.querySelector('div[class=""]');
    let div_overlay = div_container.querySelector('div.celebration__overlay');
    let div_nav = document.querySelector('nav.top-nav');

    //check if channel is live, if so exit early
    if(document.querySelector('div.channel-root.channel-root--live')) {
        console.info('[xqc_twitch_embed] Info: Channel live on twitch. Exiting..');
        return;
    } else {
        //add button to toggle kick frame
        let btn_toggle = document.createElement('button');
        btn_toggle.innerText = "Embed Kick 🟩";
        let inner_nav = div_nav.querySelector('div.top-nav__menu > div:last-child');
        inner_nav.prepend(btn_toggle);

        btn_toggle.addEventListener('click', async () => {

            //attempt to remove lingering VOD video (prevent audio playing in background)
            let ttv_video = document.querySelector('video');
            if (ttv_video) {
                if (ttv_video.volume) ttv_video.volume = 0;
                ttv_video.remove();
            }

            //remove default ttv divs
            if(div_main) div_main.remove();
            if(div_sidebar) div_sidebar.remove();
            if(div_overlay) div_overlay.remove();
            if(div_nav) div_nav.remove();

            //create kick stream frame
            let kick_frame = document.createElement('iframe');
            kick_frame.src = "https://kick.com/xqc";

            //prepend kick stream before chat within parent container
            div_container.prepend(kick_frame);

            //wait for kick page to load and attempt to retrieve ttv chat width for kick page width margin
            kick_frame.addEventListener('load', async () => {
                let chat_width = 0;

                //wait for ttv chat div to load / be available
                while(chat_width <= 0) {
                    let chat_div = div_container.querySelector('div[id][style]');
                    if(chat_div) {
                        //use child element, chat root width if chat container width == 0
                        chat_width = chat_div.clientWidth || 0;
                        if(!chat_width) {
                            let chat_root = chat_div.querySelector('div[class^="channel-root"]');
                            if (chat_root) {
                                chat_width = chat_root.clientWidth || 0;
                            }
                        }

                        //overwrite default width with found width
                        if(chat_width > 0) {
                            ttv_chat_width_px = chat_width;

                            //attempt to remove lingering VOD video (prevent audio playing in background, though it should've already been removed inside the main container)
                            let ttv_video = document.querySelector('video');
                            if (ttv_video) {
                                if (ttv_video.volume) ttv_video.volume = 0;
                                ttv_video.remove();
                            }

                            break;
                        }
                    }

                    //sleep thread while no chat div / chat width
                    await new Promise(sleep => setTimeout(sleep, 500));
                }

                //set frame style
                let frame_style = `width: calc(100% - ${ttv_chat_width_px}px);`;
                kick_frame.setAttribute('style', frame_style);

            });

        });
    }

})();

Use this script as a base to improve it and implement new features, you can see my version of your code here! https://github.com/banakick/Kick-in-Twitch-integration/blob/main/script.js

@banakick That is awesome! 😄