fix youtube caption position

Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.
当前为 2022-03-26 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         fix youtube caption position
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.
// @author       You
// @match        *://*.youtube.com/watch?*
// @grant        none
 // @license MIT
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Your code here...
    //const captionStyle="touch-action: none; text-align: left; overflow: hidden; left: 1.2%; width: 420px; height: 38px; margin-bottom:1px;";
const cMarginBottom = 'margin-bottom: 1px !important;';
const cBottom = 'bottom: 1% !important;';
const cLeft = 'left: 28% !important;';
const captionSelector = ".ytp-larger-tap-buttons .caption-window.ytp-caption-window-bottom";
let newCssCaption;
                    // `
                    //   #target {
                    //       margin-bottom: 1px !important;
                    //       bottom: 1% !important;
                    //   }
                    // `;
let styleTag;
const captionContainer = document.querySelector("#ytp-caption-window-container");
const configContainer = {childList: true};
//const configCaptionStyle = {attributeFilter: ["style"]};

function nodeAdded(mutationList){
    for(const mutation of mutationList){
        //console.log(mutation);
        if(mutation.type==="childList"){
            if (mutation.addedNodes.length===1){
                // console.log("caption appear~");
                // let caption = document.querySelector(captionSelector);
                let caption = captionContainer.firstElementChild;
                console.log(caption);
                // console.log(caption.getAttribute('style'));
                // caption.setAttribute('style', captionStyle);
                // console.log(caption.getAttribute('id'));
                // console.log("attribute after setted");
                // console.log(caption.getAttribute('style'));
                // oberverCaptionStyle.observe(caption,configCaptionStyle);
                captionClass = caption.getAttribute('class');
                styleTag = document.createElement('style');
                newCssCaption= captionSelector + "{" +
                                                      cMarginBottom +
                                                      cBottom +
                                                      cLeft +
                                                  "}";
                styleTag.innerHTML = newCssCaption;
                document.head.appendChild(styleTag);
                console.log(styleTag);
                observerNodeAdded.disconnect();
            }
            if (mutation.removedNodes.length===1){
                // oberverCaptionStyle.disconnect();
                // styleTag.parentNode.removeChild( theScript );
            }
        }
    }
}

// function captionStyleChanged(mutationList){
//     for (const mutation of mutationList){
//          // console.log(mutation);
//          // let caption = document.querySelector(".ytp-larger-tap-buttons .caption-window.ytp-caption-window-bottom");
//          // console.log(caption.getAttribute('style'));
//          // caption.setAttribute('style', captionStyle);
//          // console.log(caption.getAttribute('id'));
//          // console.log("attribute after setted");
//          // console.log(caption.getAttribute('style'));        
//     }
// }

//const oberverCaptionStyle = new MutationObserver(captionStyleChanged);
const observerNodeAdded = new MutationObserver(nodeAdded);
observerNodeAdded.observe(captionContainer, configContainer);
console.log("suc.");
})();