☰

Custom Twitch hacks

Various custom enhancements for Twitch

当前为 2023-03-29 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Custom Twitch hacks
// @namespace    TODO
// @version      0.2
// @description  Various custom enhancements for Twitch
// @author       buzz
// @match        *://*.twitch.tv/*
// @grant        none
// @license      GPLv3 or later
// ==/UserScript==

/**
 * - Adds following link to user card/also on moderator page
 * - Enlarges user card chat messages height
 */

(function() {
  'use strict';

  const moderator = window.location.pathname.startsWith('/moderator/');

  const heartSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 20c-6.6-6.1-10-9.2-10-12.9C3.5 4 5.9 1.6 9 1.6c1.7 0 3.4.8 4.5 2.1c1.1-1.3 2.8-2.1 4.5-2.1c3.1 0 5.5 2.4 5.5 5.5c0 3.8-3.4 6.9-10 12.9M12 21.1C5.4 15.2 1.5 11.7 1.5 7v-.6c-.6.9-1 2-1 3.2c0 3.8 3.4 6.9 10 12.8l1.5-1.3Z"/></svg>`

  let bodyObserver;
  let userCardObserver;
  let followingLink;

  const observerOptions = {
    childList: true,
    attributes: false,
    subtree: true
  }

  function debounce(fn, wait) {
    let timeout
    return function (...args) {
      clearTimeout(timeout)
      timeout = setTimeout(() => fn.call(this, ...args), wait)
    }
  }

  function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
  }

  const addFollowingLink = debounce((headerNode) => {
    console.log('CTH addFollowingLink');
    if (headerNode.querySelector('.followinglink')) return;
    const username = headerNode.innerText.trim();
    if (username === '') return;
    followingLink = document.createElement('a');
    followingLink.className = 'followinglink';
    followingLink.setAttribute('target', '_blank');
    followingLink.setAttribute('title', 'View following list');
    followingLink.setAttribute('href', `https://twitch-tools.rootonline.de/followinglist_viewer.php?username=${username}`);
    followingLink.innerHTML = heartSvg;
    headerNode.appendChild(followingLink);
  }, 100);

  function bodyObserverCallback(records) {
    for (const record of records) {
      if (record.addedNodes.length > 0 &&
          (record.target.className.includes('viewer-card-header__display-name')
           || record.target.className.includes('viewer-card-header__overlay'))) {
        const headerNode = record.target.querySelector('h4');
        if (headerNode) {
          console.log('CTH', record.target);
          addFollowingLink(headerNode);
        }
      }
    }
  }

  addGlobalStyle(`
.followinglink {
  margin-left: 0.5rem;
}

.followinglink > svg {
  transform: scale(0.8);
}

.bttv-moderator-card-messages .message-list {
  max-height: 700px !important;
}
`);

  const bodyNode = document.querySelector("body");

  if (bodyNode) {
    bodyObserver = new MutationObserver(bodyObserverCallback);
    bodyObserver.observe(bodyNode, observerOptions);
  }
})();