☰

Discord - Custom Background Image

You can set custom background image of Discord;

目前為 2021-11-23 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Discord - Custom Background Image
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  You can set custom background image of Discord;
  6. // @author       You
  7. // @match        https://discord.com/channels/*
  8. // @match        https://discord.com/channels/*/*
  9. // @icon         https://www.google.com/s2/favicons?domain=discord.com
  10. // @grant        GM.xmlHttpRequest
  11. // @grant        GM.registerMenuCommand
  12. // @grant        GM.getValue
  13. // @grant        GM.setValue
  14. // @grant        GM.addElement
  15. // @connect      i.imgur.com
  16. // @license      MIT
  17. // ==/UserScript==
  18.  
  19. (async window => {
  20.     'use strict';
  21.     let intervalTime = 30 * 1000;
  22.     let urls = [
  23.         'https://i.imgur.com/cHKbKQT.jpeg',
  24.         'https://i.imgur.com/sqmqy20.png',
  25.         'https://i.imgur.com/cCL6TPk.jpeg',
  26.         'https://i.imgur.com/Z6GYpxh.jpeg',
  27.         'https://i.imgur.com/FNJdY5h.jpeg',
  28.         'https://i.imgur.com/uKVG1XM.jpeg'
  29.     ];
  30.     let g_elm = null;
  31.     const del = () => {
  32.         if(g_elm) {
  33.             g_elm.remove();
  34.             g_elm = null;
  35.             return true;
  36.         }
  37.         else return false;
  38.     };
  39.     const addInput = async value => {
  40.         if(del()) return;
  41.         g_elm = await GM.addElement(document.body, 'div', {});
  42.         Object.assign(g_elm.style, {
  43.             'position': 'fixed',
  44.             'width': '100vw',
  45.             'height': '100vh',
  46.             'display': 'flex',
  47.             'flex-wrap': 'wrap',
  48.             'justify-content': 'center',
  49.             'align-items': 'center',
  50.             'z-index': Infinity
  51.         });
  52.         const input = await GM.addElement(g_elm, 'textarea', {
  53.             textContent: value
  54.         });
  55.         Object.assign(input.style, {
  56.             'width': '50vw',
  57.             'height': '30vh',
  58.             'font-size': '24px',
  59.             'font-weight': 'bold'
  60.         });
  61.         const btnSave = await GM.addElement(g_elm, 'button', {
  62.             textContent: 'save'
  63.         });
  64.         await GM.addElement(g_elm, 'div', {
  65.             textContent: '　'
  66.         });
  67.         const btnCancel = await GM.addElement(g_elm, 'button', {
  68.             textContent: 'cancel'
  69.         });
  70.         for(const v of [btnSave, btnCancel]) Object.assign(v.style, {
  71.             'color': 'white',
  72.             'backgroundColor': 'red'
  73.         });
  74.         return new Promise((resolve, reject) => {
  75.             btnSave.addEventListener('click', () => del() && resolve(input.value));
  76.             btnCancel.addEventListener('click', () => del() && reject());
  77.         });
  78.     };
  79.     const key1 = 'intervalTime';
  80.     GM.registerMenuCommand('config interval time', async () => {
  81.         const res = await addInput(await GM.getValue(key1, intervalTime));
  82.         if(!res) return;
  83.         const n = res.match(/[0-9]+/);
  84.         if(!n) return;
  85.         intervalTime = n;
  86.         GM.setValue(key1, n);
  87.     });
  88.     intervalTime = await GM.getValue(key1, intervalTime);
  89.     const key2 = 'URL';
  90.     GM.registerMenuCommand('config URL', async () => {
  91.         const res = await addInput(await GM.getValue(key2, urls.join('\n')));
  92.         if(!res) return;
  93.         const a = findURL(res);
  94.         if(!a.length) return;
  95.         urls = a;
  96.         GM.setValue(key2, a.join('\n'));
  97.     });
  98.     urls = (await GM.getValue(key2, urls.join('\n'))).split('\n');
  99.     const findURL = str => {
  100.         const m = str.match(/(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/g);
  101.         return m ? m : [];
  102.     };
  103.     const memo = new Map;
  104.     const get = async url => {
  105.         if(memo.has(url)) return memo.get(url);
  106.         const res = await GM.xmlHttpRequest({
  107.             method: 'GET',
  108.             url: url,
  109.             withCredentials: true,
  110.             responseType: 'arraybuffer',
  111.         });
  112.         const _url = URL.createObjectURL(new Blob([res.response], {type: 'application/octet-binary'}));
  113.         memo.set(url, _url);
  114.         return _url;
  115.     };
  116.     let g_url = await get(urls[0]);
  117.     const wait = resolve => {
  118.         if(document.querySelector('[class^="chatContent"]')) return resolve();
  119.         setTimeout(() => wait(resolve), 500);
  120.     };
  121.     await new Promise(resolve => wait(resolve));
  122.     const set = () => {
  123.         for(const v of document.querySelectorAll('.app-1q1i1E *')) v.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  124.         document.body.children[0].children[3].style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  125.         Object.assign(document.body.children[0].style, {
  126.             'background-image': 'url("' + g_url + '")',
  127.             'background-attachment': 'fixed',
  128.             'background-position': 'center center',
  129.             'background-size': 'cover',
  130.             'background-repeat': 'no-repeat',
  131.             'transition-duration': '1.5s'
  132.         });
  133.     };
  134.     set();
  135.     let _url = location.href,
  136.         _time = 0,
  137.         index = 0;
  138.     const update = async () => {
  139.         const time = performance.now();
  140.         if(time - _time > intervalTime) {
  141.             g_url = await get(urls[(++index) % urls.length]);
  142.             _time = performance.now();
  143.             set();
  144.         }
  145.         else {
  146.             const url = location.href;
  147.             if(url !== _url) {
  148.                 _url = url;
  149.                 set();
  150.             }
  151.         }
  152.         requestAnimationFrame(update);
  153.     };
  154.     update();
  155. })(window.unsafeWindow || window);