Render the full size version of all thumbnails on the page

image_expander.js

// ==UserScript==
// @name     Image Opener
// @version  10
// @grant    none
// ==/UserScript==

function clearBody(){
    while(document.body.firstChild){
        document.body.removeChild(document.body.firstChild);
    }
}

function addMenuButton(name, callback){
    function pageMutated(mutationsList){
        var node = document.getElementById("post-menu");
        if (node == null){
            return;
        }
        var list = node.querySelector("ul");
        if (list.classList.contains("added")){
            //this event can fire multiple times per menu, so only add elements if you don't see any elements added yet.
            //todo: use an approach that lets you add multiple unique buttons.
            return;
        }
        list.classList.add("added");

        var li = document.createElement("LI");
        var postid = list.querySelector("li").getAttribute("data-id")
        li.innerHTML = name;
        li.onclick = callback.bind(null, postid);
        list.appendChild(li);        
    }

    var config = { childList: true };
    var observer = new MutationObserver(pageMutated);
    observer.observe(document.body, config);
}

function skipUntil(seq, func){
    let result = [];
    let found = false;
    for(item of seq){
        if (!found && func(item)){
            found = true;
        }
        if (found){
            result.push(item);
        }
    }
    return result;
}

function buttonClicked(postid){
    var posts = document.querySelectorAll(".post");
    posts = skipUntil(posts, post=>post.id=="p" + postid);
    var urls = [];
    for(let post of posts){
        let img = post.querySelector(".fileThumb");
        if(img != null && img.href != null && !img.href.endsWith("webm")){
            urls.push(img.href);
        }
    }
    clearBody();
    createImages(urls, 0);
}

function createImages(urls, idx){
    if (idx >= urls.length){return;}

    var img = document.createElement("img");
    img.style.maxWidth = "100%";
    document.body.appendChild(img);
    document.body.appendChild(document.createElement("br"));
    img.onload = createImages.bind(null, urls, idx+1);

    //note: don't move this above `img.onload = ...` or else the callback may fail to fire for fast loading images
    img.src = urls[idx]; 
}

addMenuButton("Expand all images", buttonClicked);