First Chrome extension - Which environment am I looking at?

Occasionally I have an issue where I am deploying to and testing in different environments and the server name in the address bar is just not a strong enough visual cue for me, and sometimes others on my team, to realise what environment we are working in.

A Sitecore MVP @jammykam has implemented a Sitecore environment styler for this but I wanted something I could use with any technology and even when there are errors. Of course there is a compromise with my approach: a Chrome extension will only work on Chrome.

I have created a very simple Chrome extension which can be installed to provide stronger feedback on the environment you are currently working in.

• Create files below in a new directory
• Modify the value of 'domains' for local, development, test, and production environments
• In Chrome, navigate to chrome://extensions
• Enable developer mode
• Load unpacked extension from the new directory you created

In future I will explore making the environments and the schemes manageable via the browser.

/* manifest.json */

{
  "name": "environments",
  "description": "Make the environment you are on really obvious",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["background.js"]
    }
  ],
  "manifest_version": 2
}

/* background.js */

var hosts = [
    {
        name: 'local',
        domains: ['local.com'],
        scheme: 'black',
        message: 'Local development environment'
    },
    {
        name: 'development',
        domains: ['dev.net'],
        scheme: 'blue',
        message: 'Shared development environment'
    },
    {
        name: 'test',
        domains: ['test.com'],
        scheme: 'green',
        message: 'Test environment'
    },
    {
        name: 'production',
        domains: ['prod.com', 'anotherprod.com'],
        scheme: 'red',
        message: 'Production environment'
    }
];

var schemes = [
    {
        name: 'black',
        backgroundColor: 'black',
        color: 'white',
        border: 'white 2px solid',
    },
    {
        name: 'blue',
        backgroundColor: 'blue',
        color: 'white',
        border: 'white 2px solid',
    },  
    {
        name: 'green',
        backgroundColor: 'green',
        color: 'white',
        border: 'white 2px solid',
    },
    {
        name: 'red',
        backgroundColor: 'red',
        color: 'yellow',
        border: 'yellow 2px solid',
    }
];



for (var i = 0; i < hosts.length; i++) 
{ 
    if (hosts[i].domains.includes(window.location.hostname))
    {
        drawEnvironmentDiv(hosts[i].scheme, hosts[i].message);
        break;
    }   
}

function drawEnvironmentDiv(scheme, message)
{
    var div = getDefaultDiv();
    
    for (var i = 0; i < schemes.length; i++)
    {
        if (schemes[i].name == scheme)
        {
            div.style.backgroundColor = schemes[i].backgroundColor;
            div.style.color = schemes[i].color;
            div.style.border = schemes[i].border;
        }
    }

    div.innerHTML = message;
    document.body.appendChild(div);
}


function getDefaultDiv()
{
    var div = document.createElement("div");
    
    div.style.position = "fixed";
    div.style.top = "10px";
    div.style.right = "10px";
    div.style.zIndex = "99999";
    
    div.style.width = "120px";
    div.style.height = "80px";
    div.style.paddingLeft = "5px";
    div.style.paddingRight = "5px";
    div.style.paddingTop = "5px";
    div.style.fontSize = "16px";
    
    return div;
}