Get Twitch emojis

下载Twitch聊天区中的表情包

目前為 2021-11-14 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Get Twitch emojis
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  下载Twitch聊天区中的表情包
// @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()
}