A userscript that checks all the 3306 pages on milliondollarhomepage.com and greys out the offline ones

mdh_greyout.user.js

// ==UserScript==
// @name         Million Dollar Homepage Greyout
// @namespace    http://jangxx.com/
// @version      0.1
// @description  Greys out all the offline pages on milliondollarhomepage.com
// @author       /u/jangxx
// @match        http://milliondollarhomepage.com/
// @grant        GM_xmlhttpRequest
// @connect      *
// ==/UserScript==

//example result: https://i.imgur.com/RwVOslH.png

(function() {
    'use strict';

    var check_button = document.createElement('button');
    check_button.innerHTML = "Check offline pages";
    check_button.style.position = 'fixed';
    check_button.style.top = 0;
    check_button.style.left = 0;
    check_button.onclick = checkOffline;
    document.body.appendChild(check_button);
    
    var export_button = document.createElement('button');
    export_button.innerHTML = "Export overlay";
    export_button.style.position = 'fixed';
    export_button.style.top = 25;
    export_button.style.left = 0;
    export_button.onclick = exportOverlay;
    document.body.appendChild(export_button);
    
    var import_button = document.createElement('button');
    import_button.innerHTML = "Import overlay";
    import_button.style.position = 'fixed';
    import_button.style.top = 50;
    import_button.style.left = 0;
    import_button.onclick = importOverlay;
    document.body.appendChild(import_button);
    
    var overlay_canvas = document.createElement('canvas');
    overlay_canvas.width = 1000;
    overlay_canvas.height = 1000;
    overlay_canvas.style.position = 'absolute';
    overlay_canvas.style.top = 0;
    overlay_canvas.style.left = 0;
    overlay_canvas.style.pointerEvents = 'none';
    $$('#pixels')[0].appendChild(overlay_canvas);
    
    var ctx = overlay_canvas.getContext('2d');
    ctx.fillStyle = 'gray';
    
    var pages_done, pages_total;
    
    function checkOffline() {
        check_button.disabled = true;
        
        var pages = $$('map > area');
        pages_total = pages.length;
        pages_done = 0;
        pages.forEach(function(e, i) {
            //if(i > 100) return;
            setTimeout((function(e,i) {return function() {
                checkRect(e, pages.length, i);
            };})(e,i), i * 100);
        });
    }
    
    function exportOverlay() {
        var data_url = overlay_canvas.toDataURL();
        window.open(data_url, '_blank');
    }
    
    function importOverlay() {
        var import_image_url = prompt("Enter overlay url");
        if(import_image_url == null) return;
        
        var overlay_image = new Image();
        overlay_image.src = import_image_url;
        overlay_image.onload = function() {
            ctx.clearRect(0, 0, 1000, 1000);
            ctx.drawImage(overlay_image, 0, 0, 1000, 1000);
        };
    }
    
    function checkRect(area_elem, total, number) {
        var address = area_elem.href;
        var coords = parseCoords(area_elem.coords);
        
        GM_xmlhttpRequest({
            url: address,
            method: "GET",
            timeout: 30000, //30 seconds timeout
            onload: function(resp) {
                pages_done++;
                check_button.innerHTML = "Checked " + pages_done + " of " + pages_total;
            },
            onerror: function(resp) {
                pages_done++;
                check_button.innerHTML = "Checked " + pages_done + " of " + pages_total;
                
                ctx.fillStyle = 'gray';
                ctx.fillRect(coords.x1, coords.y1, coords.x2 - coords.x1, coords.y2 - coords.y1);
            },
            ontimeout: function(resp) {
                pages_done++;
                check_button.innerHTML = "Checked " + pages_done + " of " + pages_total;
                
                ctx.fillStyle = 'gray';
                ctx.fillRect(coords.x1, coords.y1, coords.x2 - coords.x1, coords.y2 - coords.y1);
            }
        });
    }
    
    function parseCoords(coords) {
        var c = coords.split(',');
        if(c.length < 4) throw new Error('Invalid parameter');
        
        return { x1: Number(c[0]), y1: Number(c[1]), x2: Number(c[2]), y2: Number(c[3]) };
    }
    
    function $$() {
        return document.querySelectorAll.apply(document, arguments);
    }
})();