☰

Twitch Chatroom Essential

Show users with essential badge(s) only.

当前为 2021-08-26 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Twitch Chatroom Essential
// @namespace    https://wiki.gslin.org/wiki/TwitchChatroomEssential
// @version      0.20210826.0
// @description  Show users with essential badge(s) only.
// @author       Gea-Suan Lin <[email protected]>
// @match        https://www.twitch.tv/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let toggle_css = document.createElement('style');
    document.getElementsByTagName('head')[0].appendChild(toggle_css);

    let sheet = document.createElement('style');
    sheet.innerHTML = '#toggle_essential {padding-left:0.5em;width: 100%;}\n#toggle_essential input {vertical-align: middle;}';
    document.getElementsByTagName('head')[0].appendChild(sheet);

    let opt = document.createElement('div');
    opt.setAttribute('id', 'toggle_essential');
    opt.innerHTML = '<input id="toggle_essential_checkbox" type="checkbox"> <label for="toggle_essential_checkbox">Show essential messages only</label>';
    opt.querySelector('#toggle_essential_checkbox').addEventListener('change', function() {
        if (this.checked) {
            toggle_css.innerHTML = '.notessential {display:none;visibility:hidden;}';
        } else {
            toggle_css.innerHTML = '';
        }
    });

    // Install checkbox.
    let ob = new window.MutationObserver(events => {
        if (null === document.getElementById('toggle_essential')) {
            let el = document.querySelector('div.chat-input__buttons-container');
            if (el) {
                el.insertAdjacentElement('afterend', opt);
                console.debug('toggle_essential installed');
            }
        }

        events.forEach(ev => {
            ev.addedNodes.forEach(node => {
                if (!node.classList || !node.classList.contains('chat-line__message')) {
                    return;
                }

                // Add .notessential class.
                let n = 0;
                for (let img of node.querySelectorAll('.chat-badge')) {
                    if ('GLHF Pledge badge' === img.getAttribute('aria-label')) {
                        continue;
                    }
                    if ('GlitchCon 2020 badge' === img.getAttribute('aria-label')) {
                        continue;
                    }

                    n++;
                }

                if (0 === n) {
                    node.classList.add('notessential');
                }
            });
        });
    });

    ob.observe(document.getElementById('root'), {
        childList: true,
        subtree: true,
    });
})();