LiveReload.js

// Получить все css на странице, записать их веса и даты в localstorage
// по таймеру делать head-запрос, сверять. Если изменился - добавлять в адрес гет-параметр

!function(){function n(){

    var whitelistDomains = [
        'allpans.su',
    ];
    var timeout = 700;

    if (!(whitelistDomains.indexOf(window.location.hostname) + 1) ){
        console.log('LiveReload: домен не в списке разрешённых! Уходим');
        return true;
    } else {
        console.log('LiveReload: начинаем мониторинг');
    }

    // Получает объект из localStorage, либо новый
    function getCssObj(name){
        // try {
        //     var localStorageCssObj = localStorage.getItem(name);
        //     var cssObj = JSON.parse(localStorageCssObj);
        //     return cssObj;
        // } catch (error) {
        //     console.log('Ошибка ' + e.name + ":" + e.message + "\n" + e.stack);
        //     return {};
        // }

        if (window[name]){
            return window[name];
        } else {
            return {};
        }
    }

    function setCssObj(name, obj){
        window[name] = obj;
    }

    function makeRequest(method, url) {
        return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0");
            xhr.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
			xhr.setRequestHeader("Pragma", "no-cache");
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr);
                } else {
                    reject(xhr);
                }
            };
            xhr.onerror = function () {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText
                });
            };
            xhr.send();
        });
    }

    function updateElHref(el){
        var href = el.getAttribute('href');
        var url = new URL(href, window.location.protocol + '//' + window.location.hostname);
        url.searchParams.delete('hdden__livereload');
        url.searchParams.append('hdden__livereload', Date.now());

        var newSearchParams = url.searchParams.toString();

        href = href.split('?')[0] + '?' + newSearchParams;
        el.setAttribute('href', href);
    }

    function debounce(func, wait, immediate) {
        let timeout;

        return function executedFunction() {
            const context = this;
            const args = arguments;

            const later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };

            const callNow = immediate && !timeout;

            clearTimeout(timeout);

            timeout = setTimeout(later, wait);

            if (callNow) func.apply(context, args);
        };
    };

    // нужно получить имеющийся объект, и в него уже писать данные. Если объекта нет - создать.
    var cssObj = getCssObj('hdden__liveReload');

    // декремент
    var decrement;

    // получаем все css, запрашиваем актуальный размер, если он изменился - пишем ему гет-параметр
    function main(){
        //console.log('LiveReload: так');

        // получим все css
        var css = document.querySelectorAll('link[rel="stylesheet"][href]');

        decrement = css.length;

        css.forEach(function(el, ind){
            // в качестве ключа - url без get-параметров
            var href = el.getAttribute('href').split('?')[0];

            // работаем, если хост совпадает с текущим
            var url = new URL(href, window.location.protocol + '//' + window.location.hostname);

            if (url.hostname !== window.location.hostname){
                return true;
            }

            // запрашиваем данные по нему
            makeRequest('HEAD', url).then(function(xhr){
                //console.log(xhr.getAllResponseHeaders());
                var size = xhr.getResponseHeader('content-length');
                var time = xhr.getResponseHeader('last-modified');

                // сверка с массивом
                if (cssObj[href]){
                    if (cssObj[href]['time'] && (cssObj[href]['time'] != time) ){
                        // перезагрузка
                        //debugger;
                        console.log('update el get-param', el);
                        updateElHref(el);
                    } else if (cssObj[href]['size'] && (cssObj[href]['size'] != size)){
                        // перезагрузка
                        //debugger;
                        console.log('update el get-param', el);
                        updateElHref(el);
                    }
                }

                // обновляем
                cssObj[href] = {
                    'size': size,
                    'time': time,
                }

                // декремент
                decrement--;

                if (decrement <= 0){
                    // отправка в window
                    setCssObj('hdden__liveReload', cssObj);
                }
            });
        });
    }

    // дебаунс
    var timer = setInterval(function(){
        //console.log('LiveReload: тик');
        //debounce(main, timeout);
        main();
    }, timeout);

}"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",function(){n()})}();