Adressleiste in Firefox einfärben

Heute hier ein Artikel abseits von den News die es hier eigentlich zu lesen gibt. Nachfolgende Zeilen stellen eine kleine Bastelanleitung für Firefox-Nutzer dar. Dieser Browser ist sehr gut anpassbar. Alles was man dazu braucht in ein Texteditor und ein klein wenig Zeit.

Ihr wisst Browser markieren https-Seiten mit einem Schlosssymbol in der Adressleiste. Ich habe damit so meine Probleme. Es ist nämlich leicht zu übersehen. Hier setzt nun der nachfolgende Codeschnipsel für die userChrome.css (Wer jetzt Fragezeichen auf der Stirn hat sollte bis zum Ende weiter lesen) an. Dieser Code färbt die Adressleiste, wie im Screenshot zu sehen, farbig ein. https-Seiten werden grün, http-Seiten in rot dargestellt.

/* 
 * Färbt die Adressleiste auf Basis der Sicherheitsstufe ein
 * camp-firefox.de/forum/viewtopic.php?f=16&t=125132&p=1084549
 * reddit.com/r/FirefoxCSS/comments/7dkhuh/color_your_url_bar_based_on_website_security/
 */
 
#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: var(--toolbar-bgcolor); /* geändert; ursprünglich: white */
  opacity: 0.2;
  transition: background 250ms linear; /* ergänzt, Zeitspanne vergrößert */
}

#urlbar[pageproxystate='valid'] #identity-box.unknownIdentity::after {
  background: #ff0039; /* Firefox Red 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.chromeUI::after {
  background: #0a84ff; /* Firefox Blue 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.extensionPage::after {
  background: #45a1ff; /* Firefox Blue 40 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedIdentity::after {
  background: #058b00; /* Firefox Green 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.verifiedDomain::after {
  background: #12bc00; /* Firefox Green 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveBlocked::after {
  background: #30e60b; /* Firefox Green 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContent::after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedDisplayContentLoadedActiveBlocked::after {
  background: #d7b600; /* Firefox Yellow 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.certUserOverridden::after {
  background: #ffe900; /* Firefox Yellow 50 */
}

#urlbar[pageproxystate='valid'] #identity-box.weakCipher::after {
  background: #a47f00; /* Firefox Yellow 70 */
}

#urlbar[pageproxystate='valid'] #identity-box.mixedActiveContent::after {
  background: #d70022;  /* Firefox Red 60 */
}

#urlbar[pageproxystate='valid'] #identity-box.insecureLoginForms::after {
  background: #a4000f;  /* Firefox Red 70 */
}

#urlbar[pageproxystate='valid'][focused="true"] #identity-box::after {
  background: var(--toolbar-bgcolor);
}

Obige Zeilen gehören in die userChrome.css. 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 (Notepad geht notfalls auch) öffnen und mit den passenden Codeschnipsel füllen. Die Codezeilen werden nach einem Browser-Neustart wirksam.