Firefox Quantum: Color your URL bar based on website security  

  RSS

Harihara Kumar
(@hariharakumar)
Member Admin
Joined:1 year  ago
Posts: 8
09/12/2017 7:48 am  

You can change the color of url address bar based on the security of the website, that way you can easily know the difference between secure and non secure websites. I am attaching the image to this topic look at it for more info on how it looks on firefox quantum browser.

Add the following code in userChrome.css file and restart your quantum browser.

#urlbar {
position: relative;
z-index: 1;
}
#identity-box:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
background: white;
opacity: 0.2;
}
/* There is also grantedPermissions, but irrelevant. */
/* about:about */
#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity:after {
background: #ff0039; /* Firefox Red 50 */
}
/* about:config */
#urlbar[pageproxystate='valid'] #identity-box.chromeUI:after {
background: #0a84ff; /* Firefox Blue 50 */
}
/* uBlock Origin Dashboard */
#urlbar[pageproxystate='valid'] #identity-box.extensionPage:after {
background: #45a1ff; /* Firefox Blue 40 */
}
/*  https://www.github.com/  */
#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity:after{
background: #058b00; /* Firefox Green 70 */
}
/*  https://www.google.com/  */
#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain:after{
background: #12bc00; /* Firefox Green 60 */
}
/*  https://mixed-script.badssl.com/  */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked:after {
background: #30e60b; /* Firefox Green 50 */
}
/*  https://mixed.badssl.com/  */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent:after {
background: #d7b600; /* Firefox Yellow 60 */
}
/*  https://very.badssl.com/  */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked:after {
background: #d7b600; /* Firefox Yellow 60 */
}
/*  https://self-signed.badssl.com/  but add certificate exception */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after {
background: #ffe900; /* Firefox Yellow 50 */
}
/* Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after {
background: #a47f00; /* Firefox Yellow 70 */
}
/*  https://mixed-script.badssl.com/  but disable protection */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after {
background: #d70022;  /* Firefox Red 60 */
}
/*  http://http-login.badssl.com/  */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after {
background: #a4000f;  /* Firefox Red 70 */
}

let me know what you think of this code and it looked on your browser. Stay tuned to HinduGeek forum for more updates on userChrome.css, bookmark this forum for future reference.


ReplyQuote
  
Working

Please Login or Register