☰

Greasy Fork is available in English.

Coursera subtitles(outside the video)

Coursera subtitles outside the video.

  1. // ==UserScript==
  2. // @name         Coursera subtitles(outside the video)
  3. // @description  Coursera subtitles outside the video.
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.2
  6. // @author       木杉
  7. // @include      http://www.coursera.org/*
  8. // @include      https://www.coursera.org/*
  9. // @grant        none
  10. // @run-at       document-end
  11. // ==/UserScript==
  12. (function () {
  13.     const contentStyle = `
  14.     color: black;
  15.     font-size: 18px;
  16.     line-height: 25px;
  17.     background: beige;
  18.     padding: 12px;
  19.   `;
  20.     function main(target, panel) {
  21.         panel.style.justifyContent = "center";
  22.         const content = document.createElement("div");
  23.         content.style.cssText = contentStyle;
  24.         panel.innerHTML = "";
  25.         panel.append(content);
  26.         if (target && panel && document.querySelector("video")) {
  27.             const options = {
  28.                 attributes: true,
  29.                 attributeFilter: ["class"],
  30.                 childList: true,
  31.                 subtree: true
  32.             };
  33.             const mb = new MutationObserver(() => {
  34.                 const active = target.querySelector(".active");
  35.                 content.innerHTML = active.innerHTML;
  36.             });
  37.             mb.observe(target, options);
  38.         }
  39.     }
  40.     const interval = setInterval(() => {
  41.         const target = document.querySelector(".rc-Transcript");
  42.         const panel = document.querySelector(".rc-VideoToolbar.horizontal-box.align-items-spacebetween");
  43.         if (target && panel) {
  44.             main(target, panel);
  45.             window.clearInterval(interval);
  46.         }
  47.     }, 500);
  48. })();