Wieder mal etwas Code für die userChrome.css
von Firefox. Nachfolgender, bei Reddit veröffentlichter, Code färbt die Adressleiste, je nach Sicherheitsstatus farbig ein.
Die Adressleiste sieht anschließend so wie im obigen Screenshot aus. Der Code funktioniert mit Firefox 70
/*
* new-colored-urlbar
* färbt die Adressleiste je nach Sicherheitsstatus ein
* https://www.reddit.com/r/FirefoxCSS/comments/dnggfj/color_your_url_bar_based_on_website_security_ff_70/
*/
#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;
transition: background 500ms linear; /* Fade in/out effekt */
}
/* BLUE..: about:config */
#urlbar[pageproxystate='valid'] #identity-box.chromeUI::after { background: #0a84ff; }
/* GREEN.: https://www.github.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity:after{ background: #058b00; }
/* GREEN.: https://www.google.com/ */
#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain:after{ background: #12bc00; }
/* YELLOW: https://mixed-script.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked:after { background: #d7b600; }
/* YELLOW: https://mixed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent:after { background: #d7b600; }
/* YELLOW: https://very.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked:after { background: #d7b600; }
/* YELLOW: https://self-signed.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden:after { background: #ffe900; }
/* YELLOW: Don't know an example for this */
#urlbar[pageproxystate='valid'] #identity-box.weakCipher:after { background: #a47f00; }
/* YELLOW: https://mixed-script.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent:after { background: #d70022; }
/* RED..: http://http-login.badssl.com/ */
#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms:after { background: #a4000f; }
/* RED..: http://www.httpvshttps.com/ */
#urlbar[pageproxystate='valid'] #identity-box.notSecure::after { background: #a4000f; }
Wichtig: userContent.css
und userChrome.css
verändern das Aussehen. Während die Datei userContent.css
das Aussehen von Webseiten verändert, verändert userChrome.css
das Aussehen von Firefox. Die Dateien gehören in den Ordner chrome
des Profils und müssen dort erzeugt werden. Um nun an den Profilordner zu kommen muss man via „Burgermenü“ => „Fragezeichen“ den Menüpunkt „Informationen zur Fehlerbehebung“ öffnen. Der Profilordner wird im Windows-Explorer geöffnet, wenn ihr den Button „Ordner anzeigen“ in der Zeile „Profilordner“ nutzt. Legt dort einen neuen Ordner mit dem Namen chrome
an. In diesem neu angelegten Ordner müsst ihr dann Textdateien mit der Bezeichnung userChrome.css
und userContent.css
erzeugen. Das ist eigentlich schon alles. Ihr müsst die so erzeugten Dateien nur noch mit einem ordentlichen Texteditor öffnen und mit den passenden Codeschnipsel füllen. Die Codezeilen werden nach einem Browser-Neustart wirksam.
Mozilla ändert ab Firefox 69, um die Startzeit des Browsers zu verkürzen, den Umgang mit den Dateien userChrome.css
und userContent.css
Beide beachtet der Browser ab dieser Version in der Standardeinstellung nicht. Um die Dateien zu nutzen muss man ab Firefox 69 vorher per „about:config“ den Schalter „toolkit.legacyUserProfileCustomizations.stylesheets“ auf „true“ stellen.