AEM 6420 - CRXDE Environment Indicator

Goal

ACS Commons AEM Environment Indicator is a great tool for showing env specific visual pointers when a user has multiple tabs open in browser accessing different AEM servers, however it's only for Touch and not Classic or CRXDe Lite..

If you need a similar indicator for CRXDe Lite use the following chrome extension based method, avoiding adding server side code (If you need the script added on server and so to execute for all users try the method in this post, NOT RECOMMENDED, or modify the CRXDE Lite response using servlet filters)

Demo | Github

Solution

1) Install a chrome extension for injecting custom javascript eg. CJS - Custom JavaScript for websites

2) Click the CJS extension icon to open script editor; for specific AEM env, check the option enable cjs for this host

3) Add the following script, modify variable message accordingly

(function(){
    function changeNavColorCRXDELite(switcher){
        var message = "!!! CAUTION PUBLISH !!!";

        var inner = switcher.firstChild;
     
        inner.style.background = "#FFFF33";
     
        var publishText = '<span style="font-size:30px; font-weight: bold; color:red; margin-left: 700px">' + message +'</span>';
     
        inner.insertAdjacentHTML('beforeend', publishText);
    }    
    
    Ext.onReady(function(){
        var INTERVAL = setInterval(function(){
            var switcher = document.getElementsByClassName("crx-switcher");

            if(switcher.length > 0){
                clearInterval(INTERVAL);
                changeNavColorCRXDELite(switcher[0]);
            }
        }, 250);
    });
}())