decorate-localhost.user.js

// ==UserScript==
// @name Decorate backend UI on local implementation
// @version 0.1
// @author Procurios
// @match http://*.peter/*
// @grant none
// ==/UserScript==

(function (global) {
    'use strict';

    const doc = global.document;
    const body = doc.querySelector('body');
    const iconUrl = 'https://procurios.klantsite.net/l/library/download/urn:uuid:fb6f55b2-9c93-4cab-9893-a756d4126297/icon-local.png';

    if ((body.id === 'empty' || body.classList.contains('empty')) && !body.classList.contains('uiTypeDialog')) {
        // Skip decorating frames
        return;
    }

    // Insert prominent / distinct logo
    addLocalhostLogo();

    if (!body.classList.contains('uiTypeDialog')) {
        // Update favicon and tab title
        updateFavIcon();
        updateTitle();
    }

    function updateFavIcon () {
        let favIcon = doc.querySelector('link[rel="shortcut icon"]');

        if (!favIcon) {
            return;
        }

        favIcon.href = iconUrl;
    }

    function addLocalhostLogo () {
        let logo = document.createElement('div');
        let textStyleParts = [
            'margin: 0 0 -5px 5px;',
            'vertical-align: bottom;',
            'font-size: 10px;',
            'font-family: monospace;',
            'text-transform: uppercase;',
            'background: rgba(255, 255, 255, .8);',
            'color: #000;',
        ];

        logo.innerHTML =
            '<img src="' + iconUrl + '" width="27" height="27" />' + 
            '<span style="' + textStyleParts.join(' ') + '">localhost</span>';

        if (body.classList.contains('uiTypeDialog')) {
            logo.setAttribute('style', 'position: fixed; bottom: 15px; right: 14px; z-index: 300000;');
        } else {
            logo.setAttribute('style', 'position: absolute; top: 10px; left: 14px; z-index: 300000;');
        }

        body.appendChild(logo);
    }

    function updateTitle () {
        let titleElem = doc.querySelector('title');

        if (!titleElem) {
            return;
        }

        titleElem.innerHTML = 'localhost: ' + titleElem.innerHTML;
    }
})(window);