draft-mode-indicator.user.js

// ==UserScript==
// @name         Stage / Draft mode indicator
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Replaces the admin-mode favicon with a more distinguishable icon
// @author       Mosse
// @match        https://*.stage.crasman.fi/*
// @match        https://*.stage.crasman.cloud/*
// @grant        none
// @updateURL    https://gist.github.com/thykka/3c924861bf7db32e29638f4964c9d975/raw/draft-mode-indicator.user.js
// @downloadURL  https://gist.github.com/thykka/3c924861bf7db32e29638f4964c9d975/raw/draft-mode-indicator.user.js
// @icon         https://crasman.stage.crasman.fi/favicon.ico
// ==/UserScript==

(function() {
'use strict';
    const matched = document.location.origin.match(/^https:\/\/(.+)-admin\.stage\.crasman\.fi/);
    const isDraftMode = !!matched;
    if(isDraftMode) {
        const siteKey = matched.length && matched[1];
        const siteColor = parseInt(siteKey, 36) % 360;

        document.querySelectorAll('link[rel*="shortcut"]').forEach(el => el.parentNode.removeChild(el))
        const canvas = document.createElement('canvas');
        canvas.width = 32;
        canvas.height = 32;

        const ctx = canvas.getContext('2d');
        ctx.fillStyle = `hsl(${siteColor}, 50%, 50%)`;
        ctx.fillRect(0,0,32,32);
        ctx.fillStyle = '#FFFFFF';
        ctx.font = 'bold 12px sans-serif';
        ctx.fillText(siteKey, 0, 10, 32);
        ctx.fillText('draft', 2, 28);

        const link = document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = canvas.toDataURL("image/x-icon");
        document.getElementsByTagName('head')[0].appendChild(link);
    }
})();