Wetterfuchsbutton Script für userChrome.js

Endor

Hallo Mira_Belle und Wetterfuchsfreunde.
Ich habe bei Github jetzt die Dateien für den Wetterfuchs mit obiger Version aktualisiert.
Auch die CSS Dateien und das Symbol für die Schaltfläche habe ich hoch geladen.

userChrome.js/wetterfuchsbutton at master · Endor8/userChrome.js

Skripte für die Firefox-Erweiterung userChromeJS. Contribute to Endor8/userChrome.js development by creating an account on GitHub.

github.com

Vielen Dank besonders an Mira_Belle für die ganze Mühe.

Mfg.
Endor

Mira_Belle

Endor
Da für mich die Symbole fest zum Skript gehören,
habe ich das CSS auch da reingepackt!
Und was ich über base64 denke, ist bekannt.

Also ganz einfach folgenden Code ans Ende des Skripts einfügen.

JavaScript

  }, 30000);

  let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'image'));

  let css =`

    #wetterfuchs-toolbarbutton .toolbarbutton-menu-dropmarker {
      display: none ! important;
    }   
  
    /* Gemeinsame Basis für ALLE menu/menuitem-Elemente in diesem Kontext */
    menu[label^="DE Wetter"],
    menu[label^="DE Wetter"] menuitem,
    menu[label="DE Wetterkarten"],
    menu[label="DE Wetterkarten"] menuitem,
    menu[label="EU Wetter"],
    menu[label="EU Wetter"] menuitem,
    menu[label="Welt Wetter"],
    menu[label="Welt Wetter"] menuitem,
    menu[label="Blitzortung"],
    menu[label="Blitzortung"] menuitem,
    menu[label="Regionales Wetter"],
    menu[label="Regionales Wetter"] menuitem {
      appearance: none !important;
      min-height: 24px !important;
      padding-left: 28px !important;
      background-position: 4px 50% !important;
      background-repeat: no-repeat !important;
    }

    /* Hover-Effekt zentral */
    
    menu[label^="DE Wetter"]:hover,
    menu[label^="DE Wetter"] menuitem:hover,
    menu[label="DE Wetterkarten"]:hover,
    menu[label="DE Wetterkarten"] menuitem:hover,
    menu[label="EU Wetter"]:hover,
    menu[label="EU Wetter"] menuitem:hover,
    menu[label="Welt Wetter"]:hover,
    menu[label="Welt Wetter"] menuitem:hover,
    menu[label="Blitzortung"]:hover,
    menu[label="Blitzortung"] menuitem:hover,
    menu[label="Regionales Wetter"]:hover,
    menu[label="Regionales Wetter"] menuitem:hover {
      background-color: #ecf0f6  !important;
    }
    
    menu[label="DE Wetterdaten"] { background-image: url("${ProfilePath}/Wetterdaten_1.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Wetter aktuell"] { background-image: url("${ProfilePath}/Wetterdaten_2.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Vorhersage"] { background-image: url("${ProfilePath}/Wetterdaten_3.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Pollenbelastung"] { background-image: url("${ProfilePath}/Wetterdaten_4.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Wetterlage"] { background-image: url("${ProfilePath}/Wetterdaten_5.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="UV-Index"] { background-image: url("${ProfilePath}/Wetterdaten_6.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Gesund. Beschwerden"] { background-image: url("${ProfilePath}/Wetterdaten_7.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Thermische Belastung"] { background-image: url("${ProfilePath}/Wetterdaten_8.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Flusspegel"] { background-image: url("${ProfilePath}/Wetterdaten_9.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Regenradar"] { background-image: url("${ProfilePath}/Wetterdaten_10.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Regenradar Vorhersage"] { background-image: url("${ProfilePath}/Wetterdaten_11.png") !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Satellitenbild"] { background-image: url("${ProfilePath}/Wetterdaten_12.png") !important; }

    menu[label="DE Wetterkarten"] { background-image: url("${ProfilePath}/Wetterkarten_1.png") !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Wetter aktuell"] { background-image: url("${ProfilePath}/Wetterkarten_2.png") !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Vorhersage"] { background-image: url("${ProfilePath}/Wetterkarten_3.png") !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Unwetterwarnung"] { background-image: url("${ProfilePath}/Wetterkarten_4.png") !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Regenradar aktuell"] { background-image: url("${ProfilePath}/Wetterkarten_5.png") !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Regenradarprognose"] { background-image: url("${ProfilePath}/Wetterkarten_6.png") !important; }

    menu[label="EU Wetter"] { background-image: url("${ProfilePath}/Wetter_1.png") !important; }
    menu[label="EU Wetter"] menuitem[label="Aktuell und Vorhersage"] { background-image: url("${ProfilePath}/Wetter_2.png") !important; }
    menu[label="EU Wetter"] menuitem[label="Regenradar aktuell"] { background-image: url("${ProfilePath}/Wetter_3.png") !important; }
    menu[label="EU Wetter"] menuitem[label="Unwetterwarnung"] { background-image: url("${ProfilePath}/Wetter_4.png") !important; }
    menu[label="EU Wetter"] menuitem[label="Regenradarprognose"] { background-image: url("${ProfilePath}/Wetter_5.png") !important; }

    menu[label="Welt Wetter"] { background-image: url("${ProfilePath}/Welt_1.png") !important; }
    menu[label="Welt Wetter"] menuitem[label="Aktuell"] { background-image: url("${ProfilePath}/Welt_2.png") !important; }
    menu[label="Welt Wetter"] menuitem[label="Vorhersage"] { background-image: url("${ProfilePath}/Welt_3.png") !important; }

    menu[label="Blitzortung"] { background-image: url("${ProfilePath}/Blitz_1.png") !important; }
    menu[label="Blitzortung"] menuitem[label="Mitteleuropa"] { background-image: url("${ProfilePath}/Blitz_2.png") !important; }
    menu[label="Blitzortung"] menuitem[label="Europa"] { background-image: url("${ProfilePath}/Blitz_3.png") !important; }
    menu[label="Blitzortung"] menuitem[label="Welt"] { background-image: url("${ProfilePath}/Blitz_4.png") !important; }

    menu[label="Regionales Wetter"] { background-image: url("${ProfilePath}/Regio_1.png") !important; }
    menu[label="Regionales Wetter"] menuitem[label="Aktuell und Vorhersage"] { background-image: url("${ProfilePath}/Regio_2.png") !important; }
    menu[label="Regionales Wetter"] menuitem[label="Unwetterwarnung"] { background-image: url("${ProfilePath}/Regio_3.png") !important; }
    menu[label="Regionales Wetter"] menuitem[label="Regenradar aktuell"] { background-image: url("${ProfilePath}/Regio_4.png") !important; }
    menu[label="Regionales Wetter"] menuitem[label="Regenradarprognose"] { background-image: url("${ProfilePath}/Regio_5.png") !important; }

  `;

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Die Grafiken gehören in den Ordner "image" unter "chrome"

images.zip

Mira_Belle

Wer doch lieber eine separate CSS verwenden möchte, ...

CSS

/*Wetterfuchs Button*/

@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
	
    #wetterfuchs-toolbarbutton .toolbarbutton-menu-dropmarker { display: none ! important; }   

    /* Gemeinsame Basis für ALLE menu/menuitem-Elemente in diesem Kontext */
    menu[label^="DE Wetter"],
    menu[label^="DE Wetter"] menuitem,
    menu[label="DE Wetterkarten"],
    menu[label="DE Wetterkarten"] menuitem,
    menu[label="EU Wetter"],    
    menu[label="EU Wetter"] menuitem,
    menu[label="Welt Wetter"],
    menu[label="Welt Wetter"] menuitem,
    menu[label="Blitzortung"],
    menu[label="Blitzortung"] menuitem,
    menu[label="Regionales Wetter"],
    menu[label="Regionales Wetter"] menuitem {
        appearance: none !important;
        min-height: 24px !important;
        padding-left: 28px !important;
        background-position: 6px 8px !important;
        background-repeat: no-repeat !important;
    }

    /* Hover-Effekt zentral */
    menu[label^="DE Wetter"]:hover,
    menu[label^="DE Wetter"] menuitem:hover,
    menu[label="DE Wetterkarten"]:hover,
    menu[label="DE Wetterkarten"] menuitem:hover,
    menu[label="EU Wetter"]:hover,
    menu[label="EU Wetter"] menuitem:hover,
    menu[label="Welt Wetter"]:hover,
    menu[label="Welt Wetter"] menuitem:hover,
    menu[label="Blitzortung"]:hover,
    menu[label="Blitzortung"] menuitem:hover,
    menu[label="Regionales Wetter"]:hover,
    menu[label="Regionales Wetter"] menuitem:hover {
        background-color: #ecf0f6 !important;
    }

    /* Icons als Custom Properties definieren (einmalig!) */
    :root {
        /* DE Wetterdaten Hauptmenü */
        --de-wetterdaten_1:     url("../image/Wetterdaten_1.png") !important;
        /* DE Wetterdaten → Untermenü-Icons */
        --de-wetterdaten_2:     url("../image/Wetterdaten_2.png") !important;
        --de-wetterdaten_3:     url("../image/Wetterdaten_3.png") !important;
        --de-wetterdaten_4:     url("../image/Wetterdaten_4.png") !important;
        --de-wetterdaten_5:     url("../image/Wetterdaten_5.png") !important;
        --de-wetterdaten_6:     url("../image/Wetterdaten_6.png") !important;
        --de-wetterdaten_7:     url("../image/Wetterdaten_7.png") !important;
        --de-wetterdaten_8:     url("../image/Wetterdaten_8.png") !important;
        --de-wetterdaten_9:     url("../image/Wetterdaten_9.png") !important;
        --de-wetterdaten_10:    url("../image/Wetterdaten_10.png") !important;
        --de-wetterdaten_11:    url("../image/Wetterdaten_11.png") !important;
        --de-wetterdaten_12:    url("../image/Wetterdaten_12.png") !important;

        /* DE Wetterkarten Hauptmenü */
        --de-wetterkarten_1:    url("../image/Wetterkarten_1.png") !important;
        /* DE Wetterkarten → Untermenü-Icons */
        --de-wetterkarten_2:    url("../image/Wetterkarten_2.png") !important;
        --de-wetterkarten_3:    url("../image/Wetterkarten_3.png") !important;
        --de-wetterkarten_4:    url("../image/Wetterkarten_4.png") !important;
        --de-wetterkarten_5:    url("../image/Wetterkarten_5.png") !important;
        --de-wetterkarten_6:    url("../image/Wetterkarten_6.png") !important;

        /* EU Wetter Hauptmenü */
        --eu-wetter_1:          url("../image/Wetter_1.png") !important;
        /* EU Wetter → Untermenü-Icons */
        --eu-wetter_2:          url("../image/Wetter_2.png") !important;
        --eu-wetter_3:          url("../image/Wetter_3.png") !important;
        --eu-wetter_4:          url("../image/Wetter_4.png") !important;
        --eu-wetter_5:          url("../image/Wetter_5.png") !important;

        /* Welt Wetter Hauptmenü */
        --welt-wetter_1:        url("../image/Welt_1.png") !important;
        /* Welt Wetter → Untermenü-Icons */
        --welt-wetter_2:        url("../image/Welt_2.png") !important;
        --welt-wetter_3:        url("../image/Welt_3.png") !important;

        /* Blitzortung Hauptmenü */
        --blitz_1:              url("../image/Blitz_1.png") !important;
        /* Blitzortung → Untermenü-Icons */
        --blitz_2:              url("../image/Blitz_2.png") !important;
        --blitz_3:              url("../image/Blitz_3.png") !important;
        --blitz_4:              url("../image/Blitz_4.png") !important;

        /* Regionales Wetter Hauptmenü */
        --regio-wetter_1:       url("../image/Regio_1.png") !important;
        /* Regionales Wetter → Untermenü-Icons */
        --regio-wetter_2:       url("../image/Regio_2.png") !important;
        --regio-wetter_3:       url("../image/Regio_3.png") !important;
        --regio-wetter_4:       url("../image/Regio_4.png") !important;
        --regio-wetter_5:       url("../image/Regio_5.png") !important;
    }

    menu[label="DE Wetterdaten"] { background-image: var(--de-wetterdaten_1) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Wetter aktuell"] {background-image: var(--de-wetterdaten_2) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Vorhersage"] {background-image: var(--de-wetterdaten_3) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Pollenbelastung"] { background-image: var(--de-wetterdaten_4) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Wetterlage"] { background-image: var(--de-wetterdaten_5) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="UV-Index"] { background-image: var(--de-wetterdaten_6) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Gesund. Beschwerden"] { background-image: var(--de-wetterdaten_7) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Thermische Belastung"] { background-image: var(--de-wetterdaten_8) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Flusspegel"] { background-image: var(--de-wetterdaten_9) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Regenradar"] { background-image: var(--de-wetterdaten_10) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Regenradar Vorhersage"] { background-image: var(--de-wetterdaten_11) !important; }
    menu[label="DE Wetterdaten"] menuitem[label="Satellitenbild"] { background-image: var(--de-wetterdaten_12) !important; }

    menu[label="DE Wetterkarten"] { background-image: var(--de-wetterkarten_1) !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Wetter aktuell"] { background-image: var(--de-wetterkarten_2) !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Vorhersage"] { background-image: var(--de-wetterkarten_3) !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Unwetterwarnung"] { background-image: var(--de-wetterkarten_4) !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Regenradar aktuell"] { background-image: var(--de-wetterkarten_5) !important; }
    menu[label="DE Wetterkarten"] menuitem[label="Regenradarprognose"] { background-image: var(--de-wetterkarten_6) !important; }

    menu[label="EU Wetter"] { background-image: var(--eu-wetter_1) !important; }
    menu[label="EU Wetter"] menuitem[label="Aktuell und Vorhersage"] { background-image: var(--eu-wetter_2) !important; }
    menu[label="EU Wetter"] menuitem[label="Regenradar aktuell"] { background-image: var(--eu-wetter_3) !important; }
    menu[label="EU Wetter"] menuitem[label="Unwetterwarnung"] { background-image: var(--eu-wetter_4) !important; }
    menu[label="EU Wetter"] menuitem[label="Regenradarprognose"] { background-image: var(--eu-wetter_5) !important; }

    menu[label="Welt Wetter"] { background-image: var(--welt-wetter_1) !important; }
    menu[label="Welt Wetter"] menuitem[label="Aktuell"] { background-image: var(--welt-wetter_2) !important; }
    menu[label="Welt Wetter"] menuitem[label="Vorhersage"] { background-image: var(--welt-wetter_3) !important; }

    menu[label="Blitzortung"] { background-image: var(--blitz_1) !important; }
    menu[label="Blitzortung"] menuitem[label="Mitteleuropa"] { background-image: var(--blitz_2) !important; }
    menu[label="Blitzortung"] menuitem[label="Europa"] { background-image: var(--blitz_3) !important; }
    menu[label="Blitzortung"] menuitem[label="Welt"] { background-image: var(--blitz_4) !important; }

    menu[label="Regionales Wetter"] { background-image: var(--regio-wetter_1) !important; }
    menu[label="Regionales Wetter"] menuitem[label="Aktuell und Vorhersage"] { background-image: var(--regio-wetter_2) !important; }
    menu[label="Regionales Wetter"] menuitem[label="Unwetterwarnung"] { background-image: var(--regio-wetter_3) !important; }
    menu[label="Regionales Wetter"] menuitem[label="Regenradar aktuell"] { background-image: var(--regio-wetter_4) !important; }
    menu[label="Regionales Wetter"] menuitem[label="Regenradarprognose"] { background-image: var(--regio-wetter_5) !important; }

}

Alles anzeigen

Endor

Hallo Mira_Belle .
Vielen Dank. Das war eigentlich mein Plan als nächstes zu machen.

Ich ziehe die externe Version vor. Aber jeder so wie er es mag.

Zitat von Mira_Belle

Und was ich über base64 denke, ist bekannt.

Da bin ich ganz Deiner Meinung .
Nochmals vielen Dank.
Mfg.
Endor

Mira_Belle

Zitat von Endor

Das war eigentlich mein Plan als nächstes zu machen.

Na dann kannst Du Dich ja jetzt anderen Dingen widmen.

Endor

Haha. Ja sieht beinahe so aus.

Mfg.
Endor

Boersenfeger

Mira_Belle + Endor

Vielen lieben Dank! Hier ist jetzt auch wieder alles hübsch. Jetzt muss nur noch das Wetter gut werden...

Endor

Was mich betrifft wie immer gern geschehen.

Zitat von Boersenfeger

nur noch das Wetter

Hier Regnet es. Soll die ganze nächste Woche schlechtes Wettersein.
Es kann nur besser werden.

Mfg.
Endor