GreasyMonkey script - Coursera subtitles(outside the video)

coursera-subtitle.js

// ==UserScript==
// @name         Coursera subtitles(outside the video)
// @description  Coursera subtitles outside the video.
// @namespace    http://tampermonkey.net/
// @version      0.2
// @author       木杉, [email protected]
// @include      http://www.coursera.org/*
// @include      https://www.coursera.org/*
// @grant        none
// @run-at       document-end
// ==/UserScript==
(function () {  
  
    const contentStyle = `
    color: black;
    font-size: 18px;
    line-height: 25px;
    background: beige;
    padding: 12px;
  `;
  
    const content = document.createElement("div");
    content.style.cssText = contentStyle;

    function main(target, panel) {
        panel.style.justifyContent = "center";
        
        if (target && panel && document.querySelector("video")) {
            const options = {
                attributes: true,
                attributeFilter: ["class"],
                childList: true,
                subtree: true
            };
            const mb = new MutationObserver(() => {
                const active = target.querySelector(".active");
                content.innerHTML = active.innerHTML;
            });
            mb.observe(target, options);
        }
    }
    const interval = setInterval(() => {
        const target = document.querySelector(".rc-Transcript");
        const panel = document.querySelector(".rc-VideoToolbar.horizontal-box.align-items-spacebetween");
       
        if (target && panel && !panel.contains(content) ) {
          
          panel.innerHTML = "";
          panel.append(content);

          main(target, panel);
        }
    }, 1000);
})();