Interesting Wikipedia userscript

Does evil things to wikipedia articles

Verzia zo dňa 20.08.2024. Pozri najnovšiu verziu.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name        Interesting Wikipedia userscript
// @namespace   roxwize
// @match       *://*.wikipedia.org/*
// @grant       none
// @version     1.4.2
// @author      roxwize
// @description Does evil things to wikipedia articles
// @license     GPL-3.0-or-later
// @homepageURL https://greasyfork.org/en/scripts/479665-interesting-wikipedia-userscript
// ==/UserScript==

const images = [
  "https://media.tenor.com/MBkt9DXPaUYAAAAd/ddostumka%C3%A7.gif",
  "https://media.tenor.com/C8aEDgYC1y4AAAAd/aphex-twin-come-to-daddy.gif",
  "https://media.tenor.com/4i00_7OrisUAAAAC/sandoz-canu-sandoz.gif",
  "https://media.tenor.com/hrNDlz8yD3UAAAAC/harley-quinn-margot-robbie.gif",
  "https://media.tenor.com/s1w-Sc5ahpEAAAAd/paz-pazzin.gif",
  "https://media.tenor.com/dWS427mpAZAAAAAd/secu-rity-meme.gif",
  "https://media.tenor.com/XUFDsSt48GYAAAAd/eminem.gif",
  "https://media.tenor.com/QgphpoWrjaAAAAAd/retro-retro-dev.gif",
  "https://media.tenor.com/uSo4lQu9dVgAAAAC/homer-smile.gif",
  "https://media.tenor.com/QMpyBmPBlhoAAAAC/wtf-roblox.gif",
  "https://media.tenor.com/47hdAGX-uAwAAAAC/charjabug-weegee.gif",
  "https://media.tenor.com/HcQ44DFmPccAAAAC/video-gaming.gif",
  "https://media.tenor.com/79djON9nNhMAAAAC/0001.gif",
  "https://media.tenor.com/U2ilbVQ-DAwAAAAC/jameis-winston-crab.gif",
  "https://c.tenor.com/jZlLTydic2UAAAAd/tenor.gif",
  "https://c.tenor.com/KE0dcwJ1VS4AAAAC/tenor.gif",
  "https://media1.tenor.com/m/cmiHJgTxV5AAAAAd/minccino-poketoon.gif",
  "https://media1.tenor.com/m/klfhGWhyzzYAAAAd/praise-allah.gif",
  "https://media1.tenor.com/m/TiJaOnPTFTsAAAAC/williams-evil.gif",
  "https://media1.tenor.com/m/sUey3ekTfDoAAAAC/slugcat-rain-world-artificer-dance.gif",
  "https://media1.tenor.com/m/gfZaN-s9gm0AAAAd/tsg-hoffenheim-fussball.gif",
  "https://media1.tenor.com/m/8fkcv1WDDM0AAAAC/robot-hello.gif",
  "https://media1.tenor.com/m/mMhU45-pZGsAAAAd/autechre-sean-booth.gif",
  "https://media1.tenor.com/m/I3wc0IZXfqYAAAAC/benedict-cumberbatch-doctor-strange.gif",
  "https://media1.tenor.com/m/D8GSu_9yYmAAAAAC/urkel-steve-urkel.gif",
  "https://media1.tenor.com/m/E2xaet0TtYsAAAAd/south-park-block13.gif",
  "https://media1.tenor.com/m/i9Ge9uKBVAcAAAAC/exorcist-prank.gif",
  "https://media1.tenor.com/m/1_JQdzkUcqQAAAAd/pepto-drink.gif",
  "https://media1.tenor.com/m/aRaj8_BOr4IAAAAC/philip-wikipedia.gif",
  "https://media1.tenor.com/m/jIEjhVJPlrsAAAAd/hitman-hitman2.gif",
  "https://media1.tenor.com/m/Vw16aqm7wiEAAAAd/rhythm-heaven-fail.gif",
  "https://media1.tenor.com/m/IQcO08GxscoAAAAd/smooth-criminal-cat.gif",
  "https://media1.tenor.com/m/BuXXCcVsbmcAAAAd/bogdan-moment-hl.gif",
  "https://media1.tenor.com/m/BImhqpdSqUUAAAAd/evil-villain.gif",
  "https://media1.tenor.com/m/iDbMu5kjwrkAAAAd/man-runnin.gif",
  "https://media1.tenor.com/m/hHwMQpLGCcQAAAAd/kermit-gay-kermit-potion.gif",
  "https://media1.tenor.com/m/T850EkA3rgMAAAAC/112hageland-leuven2.gif",
  "https://media1.tenor.com/m/rp8l7QTPjbMAAAAd/coca-cola-coke.gif",
  "https://media1.tenor.com/m/HL5dPXaDcgYAAAAC/din-barbaad.gif",
  "https://media1.tenor.com/m/wpaGL3wIw4kAAAAC/caprisun.gif",
  "https://media1.tenor.com/m/XBrPEFm-_14AAAAC/cat-lightning.gif",
  "https://media1.tenor.com/m/PsgKlEP-1PgAAAAd/creepy-minecraft.gif",
  "https://media1.tenor.com/m/t-l_c8Z9bJsAAAAd/%D0%BF%D0%B0%D1%81%D1%85%D0%B0%D0%BB%D0%BA%D0%BE-%D0%B4%D0%B6%D0%BE%D0%BA%D0%B5%D1%80.gif",
  "https://media1.tenor.com/m/LsGpcwpSsmoAAAAC/googliness-the-internship.gif",
  "https://media1.tenor.com/m/J7-lKCV1jjQAAAAd/fat-guy.gif",
  "https://media1.tenor.com/m/0rc0l8Qqx-kAAAAd/penguin.gif",
  "https://media1.tenor.com/m/ggtuNDdcGO0AAAAC/object-fool-eucerin.gif",
  "https://media1.tenor.com/m/cG7XQuWtkekAAAAC/link-counsciousness.gif",
  "https://media1.tenor.com/m/ZvPv7jkHXd8AAAAC/object-fool-eucerin.gif",
  "https://media1.tenor.com/m/m4Fy2lQd5j0AAAAC/trisha-tamil.gif",
  "https://media1.tenor.com/m/53ff8yADDDcAAAAC/arthritis-inflammation.gif",
  "https://media1.tenor.com/m/TxTQBaxnGwgAAAAC/bird-brain-mechanical.gif",
  "https://media1.tenor.com/m/rYscw0R2NqEAAAAC/mario-retro.gif",
  "https://media1.tenor.com/m/821Jm-bIScoAAAAd/dance-robot.gif",
  "https://media1.tenor.com/m/u_J8-0ocXfMAAAAC/homer-homer-simpson.gif",
  "https://media1.tenor.com/m/d7RH_KsFTWQAAAAd/five-nights-at-freddy%27s-fnaf.gif",
  "https://media1.tenor.com/m/6tJ8-Vu_CWQAAAAC/patapon-patapon3.gif",
  "https://media1.tenor.com/m/vRxgL6nyzK0AAAAd/dancing-3d.gif",
  "https://media1.tenor.com/m/s8mYduoNxQAAAAAC/home-alone-december.gif",
  "https://media1.tenor.com/m/H0TP37zS6j4AAAAC/pizza-tower-the-noise.gif",
  "https://media1.tenor.com/m/nnQsqX9g_YYAAAAd/tang916-happy-easter.gif",
  "https://media1.tenor.com/m/uCZPKgq0jDYAAAAC/ljarius-sneed-ljarius.gif",
  "https://media1.tenor.com/m/I-hb4OExuugAAAAC/bfdi-mouth.gif",
  "https://media1.tenor.com/m/s-7ru8cGJU0AAAAd/caveira-skull.gif",
  "https://media1.tenor.com/m/8NRi6VMAbR8AAAAC/bunny-maloney-jean-francois.gif",
  "https://media1.tenor.com/m/kBCP0yD9sVYAAAAd/thom-yorke-walking.gif",
  "https://media1.tenor.com/m/iNoVG4ZlXwUAAAAC/gta.gif",
  "https://media1.tenor.com/m/4H_vBUFCuEgAAAAd/skate-glitch.gif",
  "https://media1.tenor.com/m/MnKaoweSL7YAAAAd/sneed-bop.gif",
  "https://media1.tenor.com/m/e71nId8Yj4kAAAAd/shenmue-shenmue-forklift.gif",
  "https://media1.tenor.com/m/3-w0dE_SL7UAAAAC/o2-o2robot.gif",
  "https://media1.tenor.com/m/TPSxhmp-6lkAAAAC/roblox.gif",
  "https://media1.tenor.com/m/A4bTak1BWbgAAAAd/scolex-fish.gif",
  "https://media1.tenor.com/m/k0pf_TDz1DsAAAAd/aphextwin-idm.gif",
  "https://media1.tenor.com/m/ZetHEGNctWcAAAAd/click-here-to-upload-to-tenor-upload-your-own-gifs.gif",
  "https://media1.tenor.com/m/-7EhZTjdRQ8AAAAC/android-running-android.gif",
  "https://media1.tenor.com/m/CtgzUsEujTsAAAAC/sistersmoi-siss.gif",
  "https://media1.tenor.com/m/mMhU45-pZGsAAAAd/autechre-sean-booth.gif",
  "https://media1.tenor.com/m/wY95uJQ4DYoAAAAC/popsticky-popcorn-ab.gif",
  // thankyou to ellis for the gifs
  "https://64.media.tumblr.com/1a35ba4b9cc154ea6a1f7b323a817e9d/57edb24c0e90f3d4-92/s1280x1920/a2e0cf8398860a0e401e24d7560925f78be40d61.gif",
  "https://media1.tenor.com/m/LzikZYfpDwAAAAAC/sewing-sewing-machine.gif",
  "https://media1.tenor.com/m/hweQnVtO6UMAAAAC/spongebob-wall.gif",
  "https://media1.tenor.com/m/TVeq1AOlHQAAAAAC/bubsy-explode.gif",
  // thankyou to me for the gifs
  "https://media1.tenor.com/m/a0aS96FfutgAAAAd/radiohead-thom-yorke.gif",
  "https://media1.tenor.com/m/RCntpOKN4bQAAAAd/erm-what-the-sigma-sigma.gif",
  "https://media1.tenor.com/m/6CIKiVAesy0AAAAC/pubie-fulptube.gif",
  "https://media1.tenor.com/m/7peLhQT7GrcAAAAC/wacky-silly.gif",
  "https://media1.tenor.com/m/kw-zE0H3lSgAAAAC/wooper-roller-skates.gif",
  "https://media1.tenor.com/m/1BlDMUTDCZ4AAAAC/sackboy-little-big-planet.gif",
  "https://media1.tenor.com/m/y0Yub_nVmNYAAAAd/jerma-jerma985.gif",
  "https://media1.tenor.com/m/GnrqZuKrwzcAAAAC/snoop-dogg.gif",
  "https://media1.tenor.com/m/YyjJWH0YMxoAAAAd/william-shakespeare-shakespeare.gif",
  "https://media1.tenor.com/m/PBz8WbWestUAAAAC/dive-toilet.gif",
  "https://media1.tenor.com/m/bV6ObqR_dREAAAAC/rage-3kliksphilip.gif",
  "https://media1.tenor.com/m/sO8QSSzBXhkAAAAC/radiohead-bear.gif",
  "https://media1.tenor.com/m/ivG0cBBNSdMAAAAC/evil-bfdi.gif",
  "https://media1.tenor.com/m/dXAnXprr_h4AAAAC/morgana-persona-5.gif",
  "https://media1.tenor.com/m/SNKFpcrFWWAAAAAC/persona-5-morgana.gif",
  "https://media1.tenor.com/m/qFaVryk8_64AAAAC/morgana-dance-morgana.gif",
  // thankyou to jack for the gifs
  "https://media1.tenor.com/m/cjefIM5Y6KsAAAAd/the-orville-36-hours.gif",
  "https://media1.tenor.com/m/V3MyGNQiaEIAAAAC/dancing-twerk.gif",
  "https://media1.tenor.com/m/fwoJNI_CpjQAAAAC/skeleton-shocked.gif",
  "https://media1.tenor.com/m/SiJels-VZLkAAAAC/terminator-arnold-schwarzenegger.gif",
  "https://media1.tenor.com/m/XuT_ifWR91wAAAAC/rage-mad.gif",
  "https://media.tenor.com/qzA2L1B7nP0AAAAM/cali007.gif",
  "https://media1.tenor.com/m/8vQY3QJX_soAAAAC/andy-exhausted.gif",
  "https://media1.tenor.com/m/JHCBI26vkJIAAAAC/alien-alien-dance.gif",
  "https://media1.tenor.com/m/G2Hgohh0P-8AAAAC/jay-z-shot.gif",
  "https://media1.tenor.com/m/OFl-Kxj_D_8AAAAd/smart-iptv-iptv.gif",
  "https://media1.tenor.com/m/aqNxzTht6IAAAAAC/cat-fire.gif",
  "https://media1.tenor.com/m/HtFYNC0gUIEAAAAC/cave-story-sue-sakamoto.gif",
  "https://media1.tenor.com/m/AqG3VVVxwYMAAAAC/arvinguy.gif"
];
const imageWhitelist = new Array(images.length).fill(-1).map((_, i) => i);
const style = `
  #god{position:fixed;bottom:1em;left:1em;background:rgba(50,40,80,0.8);padding:1em;color:white;}
  #gantzgraf{position:fixed;bottom:1em;right:1em;background:rgba(50,40,80,0.8);padding:1em;color:white;text-align:right;}
  #gantzgraf .option{display:flex;align-items:center;gap:1em;}
  #gantzgraf .option label{flex-grow:1;text-align:right;}
  #giflist-root{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(245,248,242,0.85);padding:1rem;overflow-y:auto;box-sizing:border-box;}
  #giflist-root-header{height:10%;border-bottom:1px solid rgba(0,0,0,0.2);overflow-x:hidden;margin-bottom:1rem;}
  #giflist-root-header h1{font-size:300%;border-bottom:0;margin:0;font-weight:bold;}
  #giflist-root-list{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-auto-rows:minmax(120px,1fr);gap:2%;}
  #giflist-root-list div{display:flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.25);border-radius:10px;padding:6px;}
  #giflist-root-list div:hover{background-color:rgba(180,180,180,0.7);cursor:pointer;}
  #giflist-root-list div img{width:80%;max-height:80%;}
  #giflist-root-list div:hover img{filter:grayscale(1);}
  span.small{display:block;font-size:smaller;}
  span.sub{display:block;color:rgba(0,0,0,0.7);font-style:italic;}
  .iwusbox a{color:white;font-weight:bold;text-decoration:underline;}
`;
let words = [];

const config = {
  styleModifications: {
    label: "Modify page style",
    current: false
  },
  linkModifications: {
    label: "Modify links",
    current: true
  },
  figCaptions: {
    label: "Modify image captions",
    current: false
  },
  textualModifications: {
    label: "Screw up text nodes",
    current: true
  },
  excessive: {
    label: "<b>Overdrive</b>",
    current: true
  },
  chinese: {
    label: "Add random Chinese characters",
    current: true
  },
  randomLinks: {
    label: "Change links to be random",
    current: false
  }
};

function modify(e, f) {
  const n = e.childNodes;
  for (let d of n) {
    if (d.nodeType === Node.TEXT_NODE) f(d);
    else modify(d, f);
  }
}

const chance = () => Math.random() * 100;
const rand = (a) => a[Math.floor(Math.random() * a.length)];
const screwup = (str) => {
  const s = str.split("");
  let o = "";
  let i = 0;
  for (let l of s) {
    if (chance() > 60) continue;
    if (chance() < 20 && s[i+1]) o += s[i+1];
    if (chance() > 80 && s[i-1]) o += s[i-1];
    if (chance() < 80) o += l;
    if (chance() > 90) o += l;
    i++;
  }
  return o;
}
const applyRandomTransformation = (node, transformation, chance = 0.2) => {
  const chars = [];
  for (let i = 0; i < node.textContent.length; i++) {
    let c = node.textContent[i];
    if (Math.random() < chance) {
      c = transformation(c);
    }
    chars.push(c);
  }
  return chars.join("");
}
const applyRandomWordTransformation = (node, transformation, chance = 0.2) => {
  const words = node.textContent.split(" ");
  for (let i in words) {
    if (Math.random() < chance) words[i] = transformation(words[i]);
  }
  return words.join(" ");
}

(function() {
  // Add userscript styles
  const stylesheet = document.createElement("style");
  stylesheet.innerHTML = style;
  document.head.appendChild(stylesheet);
  // Root element.
  const rootEl = document.createElement("div");
  rootEl.id = "god";
  rootEl.classList.add("iwusbox");
  rootEl.innerHTML = `<span class="small">iwus v${GM.info.script.version} | <a href="https://greasyfork.org/en/scripts/479665-interesting-wikipedia-userscript" data-immune="true">greasyfork</a></span><input type="text" id="bregex" placeholder="regex" /><br/><input type="text" id="breplacement" placeholder="replacement" /><br/><button id="bok" style="cursor:pointer;">ok</button>`;
  document.body.appendChild(rootEl);
  document.getElementById("bok").addEventListener("click", () => {
    // Begin
    words = [];
    const regexp = new RegExp(document.getElementById("bregex").value, "g");
    const replce = document.getElementById("breplacement").value;
    const chchrs = ["桤","酒","垄","耐","撑","澉","颎","苦","耗","檎","霰","嗲","扩","京","柩","辨","蒿","蠓","湟","药","更","哇","迕","烬","陪","坭","摘","罹","徙","脖","溶","佬","岣","桅","看","缎"];
    const puncts = [" ? ", " ! ", " ?? ", " !! ", " ?! ", " !? ", "... "]
    const phrase = ["Chinese restaurant in the future never let you finish your sentence", "Chinese restaurant in the future", "never let you finish your sentence", "Lego Island"];
    document.querySelectorAll(`p, ${config.figCaptions.current ? "figcaption," : ""} th, td, li, h1, h2, h3, h4, h5, h6, dd`).forEach((e) => {
      modify(e, (node) => {
        node.textContent = node.textContent.replaceAll(regexp, replce);
        if (node.textContent.length > 2 && node.textContent !== ".") words.push(node.textContent);
        // == TEXTUAL MODIFICATIONS == //
        if (config.textualModifications.current) {
          if (config.excessive.current) {
            if (chance() > 90) {
              // 10% chance to remove all vowels and scramble
              node.textContent = screwup(node.textContent.replaceAll(/[aeiou]/g, ""));
            } else if (chance() > 90) {
              // 10% chance to scramble normally otherwise
              node.textContent = screwup(node.textContent);
            }
            // replace all punctuation with random in list or append to a given character with 20% chance
            node.textContent = applyRandomTransformation(node, (c) => {
              if (["!", "?", "."].includes(c) || Math.random() > 0.8) {
                return puncts[Math.floor(Math.random() * puncts.length)];
              }
            });
          }
          // 60% chance to make random letters uppercase with a 20% chance for each
          if (chance() > 60) {
            node.textContent = applyRandomTransformation(node, (c) => c.toUpperCase());
          }
          // 1% chance to add a random word
          node.textContent = applyRandomWordTransformation(node, (w) => phrase[Math.floor(Math.random() * phrase.length)], 0.01);
        }
        // 10% chance to add anywhere from 5 to 85 random chinese characters after a word
        if (Math.random() > 0.9 && config.chinese.current) {
          for (let i = 0; i < Math.floor(Math.random() * 80) + 5; i++) {
            node.textContent += chchrs[Math.floor(Math.random() * chchrs.length)];
          }
        }
      });
      // == STYLE MODIFICATIONS == //
      if (config.styleModifications.current) {
        e.style.color = `hsl(${Math.round(Math.random()*360)} 50% 50%)`;
        if (chance() > 75) e.style.backgroundColor = `hsl(${Math.round(Math.random()*360)} 50% 50%)`;
        e.style.textDecoration = chance() > 70 ? "underline" : "normal";
        e.style.fontStyle = chance() > 70 ? "italic" : "normal";
        if (chance() > 30) {
          e.style.transform = `translate(${Math.random()*25}px, ${Math.random()*50}px)`;
        } else {
          e.style.transform = `rotate(${Math.random()*5-2.5}deg)`;
          if (chance() > 45) {
            e.style.transform += ` scale(${Math.random()*2+0.5})`;
          }
        }
        e.style.fontSize = `${9 + Math.floor(Math.random()*10)}pt`;
      }
    });
    document.querySelectorAll("img").forEach((e) => {
      e.src = images[rand(imageWhitelist)];
    });
    // == LINK MODIFICATIONS == //
    if (config.linkModifications.current) {
      document.querySelectorAll("a").forEach((e) => {
        if (e.dataset.immune === "true") return;

        if (config.randomLinks.current) {
          e.setAttribute("href", "https://en.wikipedia.org/wiki/Special:Random");
        }
        modify(e, (node) => {
          e.dataset.original = node.textContent;

          node.textContent = rand(words);
          let _t;
          e.addEventListener("mouseover", () => {
            _t = document.createElement("div");
            _t.innerHTML = `<a href="https://en.wikipedia.org/wiki/${e.dataset.original.replaceAll(/ /g,'_')}">${e.dataset.original}</a>`;
            _t.style = "display:inline;font-size:smaller;background-color:rgba(0,0,0,0.3);padding:0.25rem;margin:0.25rem;";
            e.appendChild(_t);
          });
          e.addEventListener("mouseout", () => {
            if (_t) _t.remove();
          });
        });
      });
    }
  });
  // Config options
  const configEl = document.createElement("div");
  configEl.id = "gantzgraf";
  configEl.classList.add("iwusbox");
  for (let [k, v] of Object.entries(config)) {
    const e = document.createElement("div");
    e.classList.add("option");
    e.innerHTML = `<label for="bo-${k}">${v.label}</label>`;
    let o;
    if (typeof v.current === "number" && v.vals != undefined) {
      o = document.createElement("div");
      o.style = "display:block;"
      v.vals.forEach((el, i) => {
        const vO = document.createElement("input");
        vO.type = "radio";
        vO.name = `bo-${k}`;
        vO.id = `ro-${k}-${i}`;
        vO.value = i.toString();
        o.appendChild(vO);
        const vL = document.createElement("label");
        vL.setAttribute("for", vO.id);
        vL.innerHTML = el;
        vL.style.display = "block";
        o.appendChild(vL);
      });
    } else {
      o = document.createElement("input");
      o.type = "checkbox";
      o.checked = config[k].current;
      o.addEventListener("input", () => {
        config[k].current = o.checked;
      });
    }
    o.name = `bo-${k}`;
    o.id = o.name;
    e.appendChild(o);
    configEl.appendChild(e);
  }
  // Giflist opener
  const openGifListLink = document.createElement("a");
  openGifListLink.innerHTML = "open the gif list";
  openGifListLink.href = "javascript:void(0);"
  openGifListLink.onclick = renderGifList;
  openGifListLink.dataset.immune = true;
  configEl.appendChild(openGifListLink);
  document.body.appendChild(configEl);
})();

// Maybe run automatically on page load
function renderGifList() {
  // Root div
  const rootDiv = document.createElement("div");
  rootDiv.id = "giflist-root";
  rootDiv.innerHTML = `
    <div id="giflist-root-header">
      <h1>Giflist</h1><span class="sub">Click on a gif to remove it | <a href="javascript:document.getElementById('giflist-root').remove()" data-immune="true">close</a></span>
    </div>
  `;
  const rootList = document.createElement("div");
  rootList.id = "giflist-root-list";
  // Individual gif elements
  let i = 0;
  for (let gif of images) {
    const gifDiv = document.createElement("div");
    gifDiv.id = `iwusdiv-${i}`;
    gifDiv.dataset.index = i;
    gifDiv.innerHTML = `<img src="${gif}" alt="no.${i}">`;
    gifDiv.addEventListener("click", () => {
      if (imageWhitelist.length === 1) {
        alert("No");
        return;
      }
      imageWhitelist.splice(imageWhitelist.indexOf(parseInt(gifDiv.dataset.index)), 1);
      gifDiv.remove();
    });
    rootList.appendChild(gifDiv);
    i++;
  }
  rootDiv.appendChild(rootList);
  document.body.appendChild(rootDiv);
}