Show img-s on page in a grid

javascript:(() => {
    const root_class = 'my-images-overlay';
    const has_root = document.querySelector('.' + root_class);
    let last_big = undefined;
    if (has_root) {
        document.body.removeChild(has_root);
    } else {
        const root = document.createElement('div');
        root.classList.add(root_class);
        root.style = (
            'width: 97vw; height: 100vh; position: fixed; z-index: 2147483647; ' +
            'overflow: scroll; background: #444; padding: 10px;'
        );
        document.body.insertBefore(root, document.body.childNodes[0]);
        const list1 = add_list(root);
        const hr = document.createElement('hr');
        hr.style = 'margin: 2rem 0;';
        root.appendChild(hr);
        const list2 = add_list(root);
        for (const img of document.querySelectorAll('img')) {
            let href = img.src;
            if (href === '' || href.startsWith('chrome-extension://')) {continue}
            if (img.srcset !== '') {
                try {
                    const hrefs = img.srcset.trim().split(/\s*,\s*/)
                        .map(rec => [...rec.split(/\s+/), '1x'])
                        .sort((a, b) => ((+b[1].replace(/x$/, '')) - (+a[1].replace(/x$/, ''))));
                    href = hrefs[0][0];
                } catch (error) { }
            }
            add_card(list1, list2, href, 1);
        }
    }
    function add_list(root) {
        const list = document.createElement('div');
        list.classList.add('list');
        list.style = 'display: flex; flex-wrap: wrap; gap: 10px;';
        root.appendChild(list);
        return list;
    }
    function add_card(list1, list2, href, attempt) {
        const card = document.createElement('div');
        card.classList.add('card');
        card.style = (
            'position: relative; display: flex; flex-direction: column; ' +
            'padding: 4px; border: 1px solid #555; background: #222;'
        );
        const link = document.createElement('a');
        link.setAttribute('href', href);
        link.setAttribute('target', '_blank');
        const img2 = document.createElement('img');
        if (attempt === 1 && href.includes('hqdefault')) {
            const href2 = href.replace('hqdefault', 'maxresdefault');
            link.setAttribute('href', href2);
            img2.src = href2;
        } else {
            img2.src = href;
        }
        img2.style = `max-width: 300px; max-height: 300px;`;
        const cap = document.createElement('div');
        cap.classList.add('cap');
        img2.addEventListener('load', function () {
            const w = img2.naturalWidth;
            const h = img2.naturalHeight;
            if (w === 120 && h === 90 && attempt === 1) {
                add_card(list1, list2, href, 2);
            }
            cap.innerText = (w * h / 1e6).toFixed(1).replace(/\.?0+$/, '') + ` - ${w}x${h}`;
            if (w * h >= 1280 * 720) {
                list1.appendChild(card);
                last_big = card;
            }
        });
        cap.style = (
            'position: absolute; padding: 2px 4px; background: #000a; ' +
            'right: 4px; bottom: 4px; font-size: 1.2rem; color:#ddd;'
        );
        link.appendChild(img2);
        card.appendChild(link);
        card.appendChild(cap);
        list2.appendChild(card);
    }
})();