Youtubeライブのコメントをする入力欄

はじめに

ライブ配信にコメントするときにフォーカスが外れて面倒。

コード

デバッグツールのsnipettsに張り付けて、実行するとコメント欄を作成できる。
ちなみにドラッグ可能

// コメント送信関数
function sendComment(str) {
    const iframe = top.document.querySelector('iframe#chatframe');
    const input = iframe.contentDocument.querySelector('yt-live-chat-text-input-field-renderer #input');
    const sendButton = iframe.contentDocument.querySelector('#input-panel yt-button-shape button');
    input.innerText = str;
    input.dispatchEvent(new Event('input'));
    setTimeout(()=> sendButton.click(), 0);
    
}

// 入力フィールドのドラッグ開始位置を格納する変数
let dragStart = { x: 0, y: 0 };

// 入力フィールド作成関数
function createInputField() {
    // 新しいinput要素を作成
    let inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.id = 'custom-input';
    inputField.placeholder = 'Type your comment here...';
    inputField.style.position = 'absolute';
    inputField.style.right = '0';
    inputField.style.top = '50%';
    inputField.style.zIndex = '10000000000';

    // Enterキーが押されたときのイベントリスナーを追加
    inputField.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' || event.keyCode === 13) {
            // 入力欄の内容を取得
            let comment = inputField.value;

            // 入力欄をクリア
            inputField.value = '';

            // コメントを送信
            sendComment(comment);
        }
    });

    // ドラッグ開始イベントのリスナーを追加
    inputField.addEventListener('mousedown', function(event) {
        // ドラッグ開始位置を記録
        dragStart = { x: event.clientX - inputField.offsetLeft, y: event.clientY - inputField.offsetTop };
    });

    // ドラッグ中イベントのリスナーを追加
    document.addEventListener('mousemove', function(event) {
        // ドラッグ中でなければ無視
        if (!dragStart.x || !dragStart.y) return;

        // 入力フィールドの位置を更新
        inputField.style.left = event.clientX - dragStart.x + 'px';
        inputField.style.top = event.clientY - dragStart.y + 'px';
        inputField.style.right = 'auto';
    });

    // ドラッグ終了イベントのリスナーを追加
    document.addEventListener('mouseup', function(event) {
        // ドラッグ開始位置をリセット
        dragStart = { x: 0, y: 0 };
    });

    // 作成したinput要素をページの末尾に追加
    document.body.appendChild(inputField);

    // 作成したinput要素にフォーカスを設定
    inputField.focus();
}

// 入力欄を作成
createInputField();