monkeyscripts/production.staging.highlight.js

// ==UserScript==
// @name         production.staging.highlight
// @namespace    http://tampermonkey.net/
// @version      0.1
// @updateURL    https://git.koehls.de/ric/monkeyscripts/raw/master/production.staging.highlight.js
// @description  Colors the local/staging/production site differently.
// @author       Richard Köhl
// @match        *://*.wikipedia.org/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
"use strict";

// in this example we use wikipedia where language subdomain "de" acts as local environment,
// "en" as staging and all other languages as productive environments.
let background = "rgba(170, 0, 0, 0.8)";
if ( window.location.href.match(/^https?:\/\/en\./) ) {
    background = "rgba(0, 130, 60, 0.8)";
} else if ( window.location.href.match(/^https?:\/\/de\./) ) {
    background = "rgba(90, 0, 130, 0.8)";
}

// color a specific element (e.g. header)
const navBar = document.querySelector("#mw-head-base");
if ( navBar ) {
    navBar.style.background = background;
}

// put an overlay over the page that colors the borders
const div = document.createElement("div");
div.style.pointerEvents = "none";
div.style.position = "fixed";
div.style.left = 0;
div.style.top = 0;
div.style.right = 0;
div.style.bottom = 0;
div.style.boxShadow = "0 0 50px 10px " + background + " inset";
div.style.zIndex = 100001;
document.body.appendChild(div);