☰

Get Twitch emojis

under construction ...

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

  1. // ==UserScript==
  2. // @name         Get Twitch emojis
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  under construction ...
  6. // @author       Lee-7723
  7. // @match        https://www.twitch.tv/*
  8. // @exclude      https://www.twitch.tv/
  9. // @icon         https://static.twitchcdn.net/assets/favicon-16-52e571ffea063af7a7f4.png
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. 'use strict';
  14.  
  15. function sleep (time) {
  16.     return new Promise((resolve) => setTimeout(resolve, time));
  17. }
  18.  
  19. var main;
  20. var emoji_btn;
  21. var all_emojis = new Array();
  22. var emojis;
  23. var load_status;
  24. var img_srcset = new Array();
  25. var img_alt = new Array();
  26.  
  27.  
  28.  
  29. get_emoji_after_button ()
  30. async function get_emoji_after_button () {//加载出表情按钮之后
  31.     await get_button()
  32.     //await get_emoji()
  33.     //console.log('loaded' + emoji_btn.getElementsByTagName('div')[0])
  34.     main = document.getElementsByTagName('body')[0];
  35.     emoji_btn.onclick = function(){output()}//给聊天区的表情按钮添加功能，指向output（）
  36. }
  37.  
  38. //set_btn_click ()
  39. //async function set_btn_click () {
  40. //    emoji_btn.getElementBysTagName('div')[0].onclick = "function(){alert('clicked')}"
  41. //    console.log('2nd' + emoji_btn)}
  42. //}
  43.  
  44. async function get_button() {//监视获取聊天区的表情按钮
  45.     'use strict';
  46.     for (var i = 0; !emoji_btn; i) {
  47.         await sleep(1000);
  48.         emoji_btn = document.querySelectorAll('button[data-a-target="emote-picker-button"]')[0];
  49.         //console.log(emoji_btn)
  50.     }
  51. }
  52.  
  53. async function get_emoji() {//获取表情名img_alt，及表情链接img_srcset
  54.     
  55.     for (var i = 0; !emojis; i) {
  56.         console.log('starting to fetch emojis')
  57.         await sleep(1000);
  58.         all_emojis = document.getElementsByClassName('Layout-sc-nxg1ff-0 lmlxil');
  59.         if(all_emojis.length == 1) emojis = all_emojis[0];
  60.             else emojis = all_emojis[1]//.getElementsByTagName("img");
  61.         //for (var j = 0; j < emojis.length; j++){
  62.         //    console.log(emojis[j].srcset)
  63.         //}
  64.         if (emojis) {
  65.             emojis = emojis.getElementsByTagName("img")
  66.             for (var j = 0; j < emojis.length; j++) {
  67.                 if (j == 1) {
  68.                     img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x,")[1];
  69.                 } else {
  70.                     img_srcset[j-1] = emojis[j].srcset.replace(' 3.0x','').split(" 2.0x, ")[1];
  71.                 }
  72.                 img_alt[j-1] = emojis[j].alt;
  73.                 //if (j != 0) console.log(img_alt[j-1])
  74.         }
  75.         //console.log(emojis)
  76.         }
  77.     }
  78. }
  79.  
  80.  
  81. async function output() {
  82.     await get_emoji();//等待获取表情完成
  83.     var head;
  84.     if(all_emojis.length == 1) head = all_emojis[0].children[0];//未登录状态表情区只有一个分类
  85.             else head = all_emojis[1].children[0];//登录状态选择表情区第二个分类
  86.     console.log(head)
  87.     var log_button = document.createElement('div');
  88.     log_button.className = "Layout-sc-nxg1ff-0 jreOmo";
  89.     log_button.id = 'emoji_url_pop_box';
  90.     log_button.innerHTML = `<div class="Layout-sc-nxg1ff-0 emWtQg">
  91.     <div style="display: inherit;">
  92.     <button id='emoji_url_pop' class="ScCoreButton-sc-1qn4ixc-0 jGqsfG ScButtonIcon-sc-o7ndmn-0 fNzXyu">
  93.     <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentcolor">
  94.     <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>
  95.     </svg>
  96.     </button>
  97.     </div>
  98.     </div>`;
  99.     if(!document.getElementById('emoji_url_pop'))head.insertBefore(log_button , head.children[1])
  100.     document.getElementById('emoji_url_pop').onclick=function(){pop_up()}
  101.     function pop_up () {
  102.         main.append(output_box)
  103.     }
  104.  
  105.  
  106.     var output_box = document.createElement("div")
  107.     output_box.style = `position: absolute;
  108.     top: 5rem; left: 25%;
  109.     padding: 10px;
  110.     z-index: 9999;
  111.     height: 70%;
  112.     width: 50%;
  113.     background-color: var(--color-background-alt);
  114.     border-radius: 10px;
  115.     border: 1.6px solid var(--color-background-pill);
  116.     box-shadow: 4px 4px 10px #000a;`;
  117.     output_box.id = "emoji_url_box";
  118.  
  119.     var output_text = document.createElement("textarea")
  120.     output_text.style = `height: 85%; width: 100%;
  121.     resize: none;
  122.     padding: 12px;
  123.     background-color: var(--color-background-input);
  124.     color: var(--color-text-input);
  125.     margin: 2px 2px 5px;
  126.     display: flex;`;
  127.     output_text.id = "emoji_url_text";
  128.  
  129.     var output_author = document.createElement("p")
  130.     output_author.style = `color: #888; margin-left: 10px; position: absolute`;
  131.     output_author.innerHTML = `script by Lee-7723`;
  132.  
  133.     var output_close_btn = document.createElement("button")
  134.     output_close_btn.style = `position: absolute; right: 8px; bottom: 8px; width: 50px; border-radius: 6px;`;
  135.     output_close_btn.className = "ScCoreButton-sc-1qn4ixc-0 ScCoreButtonPrimary-sc-1qn4ixc-1 jGqsfG ksFrFH";
  136.     output_close_btn.id = "emoji_url_close_btn";
  137.     output_close_btn.onclick = function () {close_emoji_box()};
  138.     output_close_btn.appendChild(document.createTextNode('关闭'))
  139.  
  140.     var preview_btn = document.createElement("button")
  141.     preview_btn.style = `position: absolute; right: 66px; bottom: 8px; width: 50px; border-radius: 6px; `;
  142.     preview_btn.className = "ScCoreButton-sc-1qn4ixc-0 ScCoreButtonPrimary-sc-1qn4ixc-1 jGqsfG ksFrFH";
  143.     preview_btn.id = "emoji_url_preview_btn";
  144.     preview_btn.onclick = function () {preview_emoji_box()};
  145.     preview_btn.appendChild(document.createTextNode('预览'))
  146.  
  147.     var usage = document.createElement("p")
  148.     usage.style = `text-color: #FFF; margin-bottom: 10px; margin-left: 10px; font-weight: bold;`;
  149.     usage.appendChild(document.createTextNode('将下面文本框中内容 全选->复制，粘贴到emoji.txt中'))
  150.     usage.id = "function_readme";
  151.  
  152.     for (var i = 0; i < img_srcset.length; i++) {
  153.         output_text.appendChild(document.createTextNode(img_alt[i] + ' ' + img_srcset[i] + '\n'))
  154.     }
  155.     output_box.append(usage,output_text,output_author,preview_btn,output_close_btn)
  156. }
  157.  
  158. function close_emoji_box() {
  159.     document.getElementById('emoji_url_box').remove()//document.getElementById('emoji_url_box')
  160.     document.getElementById('emoji_url_pop_box').remove()
  161. }
  162.  
  163. function preview_emoji_box() {
  164.     document.getElementById('emoji_url_text').style.display = 'none';
  165.     var preview_box = document.createElement("div")
  166.     preview_box.style = `height: 85%; width: 100%;
  167.     resize: none; margin: 2px 2px 5px;
  168.     padding: 12px;
  169.     background-color: var(--color-background-input);
  170.     color: var(--color-text-input);
  171.     border: 1px solid rgb(118, 118, 118);
  172.     border-radius: 2px;
  173.     overflow-y: scroll;
  174.     display: flex;
  175.     flex-wrap: wrap;
  176.     justify-content: center;`;
  177.     preview_box.id = "emoji_url_preview";
  178.  
  179.     for (var j = 0; j < img_srcset.length; j++) {
  180.         var pics = document.createElement("a")
  181.         var pic_img =`<img src=${img_srcset[j]} alt=${img_alt[j]} style="margin: 5px 5px 1px;
  182.         border: 2px solid #FFF;
  183.         border-radius: 4px;
  184.         width: 112px; height: 112px;">
  185.         <p style="text-align: center; margin-bottom: 3px">${img_alt[j]}</p>`;
  186.         pics.innerHTML = pic_img;
  187.         pics.href = img_srcset[j];
  188.         pics.target = 'view emoji';
  189.         pics.download = img_alt[j];
  190.         pics.style.cssText = 'width: 122px; overflow: hidden;'
  191.         preview_box.appendChild(pics)
  192.     }
  193.  
  194.     document.getElementById('emoji_url_box').insertBefore(preview_box , document.getElementById('emoji_url_box').getElementsByTagName('p')[1])
  195.     document.getElementById("emoji_url_preview_btn").innerHTML = '返回';
  196.     document.getElementById("function_readme").innerHTML = '下列表情点击可跳转，可以手动保存';
  197.     document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_url_box()};
  198. }
  199.  
  200. function return_emoji_url_box() {
  201.     document.getElementById('emoji_url_text').style.display = 'flex';
  202.     document.getElementById('emoji_url_preview').style.display = 'none';
  203.     document.getElementById("emoji_url_preview_btn").innerHTML = '预览';
  204.     document.getElementById("function_readme").innerHTML = '将下面文本框中内容 全选->复制，粘贴到emoji.txt中';
  205.     document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_preview_box()};
  206. }
  207.  
  208. function return_emoji_preview_box() {
  209.     document.getElementById('emoji_url_text').style.display = 'none';
  210.     document.getElementById('emoji_url_preview').style.display = 'flex';
  211.     document.getElementById("emoji_url_preview_btn").innerHTML = '返回';
  212.     document.getElementById("function_readme").innerHTML = '下列表情点击可跳转，可以手动保存';
  213.     document.getElementById("emoji_url_preview_btn").onclick = function () {return_emoji_url_box()};
  214. }