Twitch BetterTTV without extension and better dark theme

Greasy Fork is available in English.

Twitch BetterTTV without extension and better dark theme

This script load bttv without having to download the extension; Also have a better dark theme, try it!

当前为 2017-12-05 提交的版本，查看最新版本。

换行

// ==UserScript==
// @name         Twitch BetterTTV without extension and better dark theme
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  This script load bttv without having to download the extension; Also have a better dark theme, try it!
// @author       Daybr3akz
// @license      MIT
// @copyright    2017, daybreakz (https://openuserjs.org/users/daybreakz)
// @match        https://www.twitch.tv/*
// @grant        none
// ==/UserScript==

(function betterttv() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://cdn.betterttv.net/betterttv.js';
    script.onload = () => console.log('BetterTTV loaded');
    const head = document.getElementsByTagName('head')[0];
    if (!head) return;
    head.appendChild(script);
})();


const DEFAULT_DARK_THEME = 'https://userstyles.org/styles/userjs/148766/dark-theme-for-twitchtv.user.js';
(function darkThemeManager() {
    function loadStyle(src, callback) {
        // nothing malicious, this is a Stylish userscript loading some css;
        // we are going to hook that css, allowing to disable it in light mode

        // we need the style element that is added to the DOM by this script;
        const oldCreateElement = document.createElement;
        document.createElement = function(tagName) {
            const node = oldCreateElement.apply(this, arguments);
            if (tagName === 'style') {
                node.setAttribute('media', 'none'); // disableCSS on load
                callback(node);
                document.createElement = oldCreateElement;
            }
            return node;
        };

        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        const head = document.getElementsByTagName('head')[0];
        if (!head) return;
        head.appendChild(script);
    }

    let styleNode;
    function onThemeChange(isDark) {
        if (!styleNode) return;
        styleNode.setAttribute('media', isDark ? '' : 'none');
    }

    let bodyObserver;
    function setupObserver() {
        let bodyHasDark = 'unknown';
        bodyObserver = new MutationObserver(() => {
            const current = $('body').hasClass('theme--dark');
            if (bodyHasDark !== current) {
                bodyHasDark = current;
                onThemeChange(current);
            }
        });

        bodyObserver.observe(document.body, {
            attributes: true,
            childList: false,
            characterData: false
        });
    }

    loadStyle(DEFAULT_DARK_THEME, loadedStyleNode => {
        styleNode = loadedStyleNode;
        onThemeChange($('body').hasClass('theme--dark'));
    });

    setupObserver();
})();