Get Twitch emojis

under construction ...

当前为 2021-11-14 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Get Twitch emojis
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  under construction ...
// @author       Lee-7723
// @match        https://www.twitch.tv/*
// @exclude      https://www.twitch.tv/
// @icon         https://static.twitchcdn.net/assets/favicon-16-52e571ffea063af7a7f4.png
// @grant        none
// ==/UserScript==

'use strict';

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

var main;
var emoji_btn;
var all_emojis = new Array();
var emojis;
var load_status;
var img_srcset = new Array();
var img_alt = new Array();



get_emoji_after_button ()
async function get_emoji_after_button () {
    await get_button()
    //await get_emoji()
    //console.log('loaded' + emoji_btn.getElementsByTagName('div')[0])
    main = document.getElementsByTagName('body')[0];
    emoji_btn.onclick = function(){output()}
}

//set_btn_click ()
//async function set_btn_click () {
//    emoji_btn.getElementBysTagName('div')[0].onclick = "function(){alert('clicked')}"
//    console.log('2nd' + emoji_btn)}
//}

async function get_button() {
    'use strict';
    for (var i = 0; !emoji_btn; i) {
        await sleep(1000);
        emoji_btn = document.querySelectorAll('button[data-a-target="emote-picker-button"]')[0];
        //console.log(emoji_btn)
    }
}

async function get_emoji() {
    
    for (var i = 0; !emojis; i) {
        console.log('starting to fetch emojis')
        await sleep(1000);
        all_emojis = document.getElementsByClassName('Layout-sc-nxg1ff-0 lmlxil');
        if(all_emojis.length == 1) emojis = all_emojis[0];
            else emojis = all_emojis[1]//.getElementsByTagName("img");
        //for (var j = 0; j < emojis.length; j++){
        //    console.log(emojis[j].srcset)
        //}
        if (emojis) {
            emojis = emojis.getElementsByTagName("img")
            for (var j = 0; j < emojis.length; j++) {
                if (j == 1) {
                    img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x,")[1];
                } else {
                    img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x, ")[1];
                }
                img_alt[j-1] = emojis[j].alt;
                //if (j != 0) console.log(img_alt[j-1])
        }
        //console.log(emojis)
        }
    }
}


async function output() {
    await get_emoji();
    var head;
    if(all_emojis.length == 1) head = all_emojis[0].children[0];
            else head = all_emojis[1].children[0];
    console.log(head)
    var log_button = document.createElement('div');
    log_button.class = "Layout-sc-nxg1ff-0 jreOmo";
    log_button.id = 'emoji_url_pop_box';
    log_button.innerHTML = `<div class="Layout-sc-nxg1ff-0 emWtQg">
    <div style="display: inherit;">
    <button id='emoji_url_pop' class="ScCoreButton-sc-1qn4ixc-0 jGqsfG ScButtonIcon-sc-o7ndmn-0 fNzXyu">
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentcolor">
    <path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 9h-4V3H9v6H5l7 7 7-7zm-8 2V5h2v6h1.17L12 13.17 9.83 11H11zm-6 7h14v2H5z"/></svg>
    </svg>
    </button>
    </div>
    </div>`;
    if(!document.getElementById('emoji_url_pop'))head.insertBefore(log_button , head.children[1])
    document.getElementById('emoji_url_pop').onclick=function(){pop_up()}
    function pop_up () {
        main.append(output_box)
    }


    var output_box = document.createElement("div")
    output_box.style = `position: absolute;
    top: 5rem; left: 5rem;
    padding: 10px;
    z-index: 9999;
    height: 500px;
    width: ${main.clientWidth*0.6}px;
    background-color: var(--color-background-alt);
    border-radius: 10px;
    border: 1.6px solid var(--color-background-pill);
    box-shadow: 4px 4px 10px #000a`;
    output_box.id = "emoji_url_box";

    var output_text = document.createElement("textarea")
    output_text.style = `height: 400px; width: 100%; resize: none; padding: 12px; background-color: var(--color-background-input); color: var(--color-text-input);`;
    output_text.id = "emoji_url_text";

    var output_author = document.createElement("p")
    output_author.style = `color: #888; margin-left: 10px; position: absolute`;
    output_author.innerHTML = `script by Lee-7723`;

    var output_close_btn = document.createElement("button")
    output_close_btn.style = `left: ${output_box.style.width.replace('px','')-75}px; top: 8px; position: relative; height: 30px; width: 50px; text-align: center; white-space: nowrap; border-radius: 6px; color: var(--color-text-button-primary); background-color: var(--color-background-button-primary-default); font-weight: bold;`;
    output_close_btn.onmouseover = function () {output_close_btn.style.backgroundColor = 'var(--color-background-button-primary-hover)';}
    output_close_btn.onmouseleave = function () {output_close_btn.style.backgroundColor = 'var(--color-background-button-primary-default)';}
    output_close_btn.id = "emoji_url_close_btn";
    //console.log(output_box.style.width.replace('px',''), output_box.style.height)
    output_close_btn.onclick = function () {close_emoji_box()};
    output_close_btn.appendChild(document.createTextNode('关闭'))

    var usage = document.createElement("p")
    usage.style = `text-color: #FFF; margin-bottom: 10px; margin-left: 10px; font-weight: bold;`;
    usage.appendChild(document.createTextNode('将下面文本框中内容 全选->复制,粘贴到emoji.txt中'))
    usage.id = "function_readme";

    for (var i = 0; i < img_srcset.length; i++) {
        output_text.appendChild(document.createTextNode(img_alt[i] + ' ' + img_srcset[i] + '\n'))
    }
    output_box.append(usage)
    output_box.append(output_text)
    output_box.append(output_author)
    output_box.append(output_close_btn)
    //main.append(output_box)
}

function close_emoji_box() {
    document.getElementById('emoji_url_box').remove()//document.getElementById('emoji_url_box')
    document.getElementById('emoji_url_pop_box').remove()
}