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

Endor

Hallo an die Wetterfuchs Front.
Nur eine kurze Frage, wenn ich beim Wetterfuchs ein Fenster öffne
lässt es sich nicht mehr schließen. Ist das bei euch au so.
Muss Firefox neu starten. Egal ob aus Menü oder klick auf Schaltfläche.

Mfg.
Endor

milupo

Zitat von Endor

Nur eine kurze Frage, wenn ich beim Wetterfuchs ein Fenster öffne
lässt es sich nicht mehr schließen. Ist das bei euch au so.

Ja, ist bei mir auch so, schon länger. War nur bisher zu faul, mich mal deswegen zu melden. Ich bin vor längerer Zeit das Skript mal durchgegangen, hatte aber keine Idee.

Jetzt habe ich doch eine Idee. Suche mal nach diesen Zeilen:

JavaScript

panel.setAttribute('onpopuphiding', "wetterfuchs.clearPanel()");
panel.setAttribute('onmousedown', "if (event.button == 1) wetterfuchs.openUrlFromPanel()");

Das sieht mir stark nach Inline-Eventhandler aus (onpopuphiding, onmousedown). Hier müsste m. E. mit addEventListener umgebaut werden.

Hast du diese Zeilen auch so?

Endor

Ich verwende die aktuelle von Mira_Belle von hier:

Beitrag

RE: Wetterfuchsbutton Script für userChrome.js

Sorry, ich konnte nicht anders!
Ich finde die Aufteilung so im Skript einfach besser
und Symbole erst zu generieren, bzw. zu laden finde ich auch nicht so dolle.

Also ist DAS dabei herausgekommen:

(Quelltext, 315 Zeilen)

Das Skript funktioniert auch ohne security.allow_unsafe_dangerous_privileged_evil_eval auf true zu setzen.
Betätigen des Buttons mit linkem Doppelklick, Mittelklick und Linksklick öffnet ein Panel (Popup) mit entsprechenden Seiten.
Das Menü, bzw. das Öffnen der entsprechenden Seiten…

Mira_Belle

7. Februar 2026 um 17:22

da gibt es nur sowas:

JavaScript

  // Panel erstellen
  function createPanel() {
    let doc = document;
    let panel = doc.createXULElement('panel');
    panel.id = "wetterfuchs-panel";
    panel.setAttribute('noautohide', "false");
    panel.setAttribute('type', "arrow");
    panel.setAttribute('position', "after_end");

    panel.addEventListener('popuphiding', () => {
      clearPanel();
    });

    panel.addEventListener('mousedown', event => {
      if (event.button == 1) {
        openUrlFromPanel();
      }
    });

Alles anzeigen

Mfg.
Endor

milupo

Hm, da sind die zwei Zeilen schon umgeschrieben.

Endor

Mittelklick ins Paneel schließt es, öffnet aber zugleich einen neuen Tab mit Inhalt des Paneels.

FuchsFan

Endor

Vor einiger Zeit hatte Freund Büssen mich gebeten sein Script zum öffnen einer analogen Uhr wieder funktionstüchtig zu machen. Es lag genau das Problem an, dass die Uhr nur nach einem Neustart wieder geschlossen wurde. Mit KI konnte ich es dann wieder so lauffähig machen, dass bei einem Klick irgendwo in das Fenster die Uhr wieder geschlossen wird. Das ist der Abschnitt, der in das Script eingearbeitet wurde, eventuell hilft es weiter.

JavaScript

  // Close listener installieren wenn Panel offen ist
			panel.addEventListener('popupshown', event => {
				if (this._closeListener)
					return;

				const btn = document.getElementById('uhr-toolbarbutton');
				this._closeListener = (ev) => {
					try {
						// Panel / Button Klick nicht zum Schließen nutzen
						if (ev.target && panel.contains && panel.contains(ev.target))
							return;
						if (btn && ev.target && btn.contains && btn.contains(ev.target))
							return;

						// irgendwo im Browserfenster => schließen
						if (panel.state === "open")
							panel.hidePopup();
					} catch (e) {}
				};

				// Capture: zuverlässiger auch in neuen FF-Versionen
				window.addEventListener('mousedown', this._closeListener, true);
				window.addEventListener('touchstart', this._closeListener, true);
			});

Alles anzeigen

Mira_Belle

milupo Endor

Hi ihr Lieben.
Warum habt ihr Euch nicht schon vorher gemeldet?
Ich selber nutze das Skript doch gar nicht.
Von daher kann es mir gar nicht aufgefallen sein.

Aber es gibt eine ganz einfache Lösung

Fügt diesen Code-Block direkt vor der letzten Zeile })(); in Euer Skript ein:

JavaScript

  // ESC-Taste zum Schließen des Wetterfuchs-Panels
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' || event.keyCode === 27) {
      const panel = document.getElementById('wetterfuchs-panel');
      if (panel) panel.hidePopup();
    }
  });

Wie es dann funktioniert, ist klar, oder?

Oder braucht ihr eine andere Lösung?

FuchsFan

Oder im Script die Funktion // Panel erstellen durch diesen Abschnitt ersetzen.

JavaScript

  // Panel erstellen
  function createPanel() {
    let doc = document;
    let panel = doc.createXULElement('panel');
    panel.id = "wetterfuchs-panel";
    panel.setAttribute('noautohide', "false");
    panel.setAttribute('type', "arrow");
    panel.setAttribute('position', "after_end");

    // Panel bei Klick außerhalb schließen
    panel.addEventListener('popuphiding', clearPanel);

    // Klick ins Panel: bei Linksklick schließen
    panel.addEventListener('mousedown', (event) => {
      if (event.button === 0) panel.hidePopup();
      else if (event.button === 1) openUrlFromPanel();
    });

    // Klick außerhalb: Panel schließen
    document.addEventListener('click', (event) => {
      if (panel.state === "open" && !panel.contains(event.target) && event.target.id !== id) {
        panel.hidePopup();
      }
    });

    let vbox = doc.createXULElement('vbox');
    vbox.setAttribute('flex', '1');
    panel.appendChild(vbox);

    let browser = doc.createXULElement('browser');
    browser.id = "wetterfuchs-iframe";
    browser.setAttribute('type', 'content');
    browser.setAttribute('flex', '1');
    browser.setAttribute('remote', 'true');
    browser.setAttribute('maychangeremoteness', 'true');
    browser.setAttribute('disableglobalhistory', 'true');
    browser.setAttribute('src', wfthrobber);
    vbox.appendChild(browser);

    doc.getElementById('mainPopupSet').appendChild(panel);
    return panel;
  }

Alles anzeigen

Mira_Belle

Es muss gar nicht so viel geändert werden

Es reicht einfach nach

JavaScript

    panel.addEventListener('popuphiding', () => {
      clearPanel();
    });

folgendes ein zu fügen:

JavaScript

    // Klick ins Panel: bei Linksklick schließen
    panel.addEventListener('mousedown', (event) => {
      if (event.button === 0) panel.hidePopup();
      else if (event.button === 1) openUrlFromPanel();
    });

    // Klick außerhalb: Panel schließen
    document.addEventListener('click', (event) => {
      if (panel.state === "open" && !panel.contains(event.target) && event.target.id !== id) {
        panel.hidePopup();
      }
    });

Alles anzeigen

FuchsFan Aber danke für den Code.

Mira_Belle

Mh, das Ganze hat aber auch den Nachteil, dass keine Links angeklickt werden können!

Dann eben den Code in Zeile 227 so belassen wie er ist!
Aber den Code für "Klick außerhalb: Panel schließen" dennoch einfügen.

Dann gibt es die Möglich keit eben per ESC und Linksklich außerhalb des Panels
das Panel zu schließen.

FuchsFan

Zitat von Mira_Belle

Mh, das Ganze hat aber auch den Nachteil, dass keine Links angeklickt werden können!

Mira_Belle

Sorry, darauf habe ich nicht geachtet (weil ich auch nicht damit arbeite). Dann hier der neue Absatz // Panel erstellen, da können dann auch Links geöffnet werden, Panel schließt nur bei Klick außerhalb.

JavaScript

// Panel erstellen
  function createPanel() {
    let doc = document;
    let panel = doc.createXULElement('panel');
    panel.id = "wetterfuchs-panel";
    panel.setAttribute('noautohide', "false");
    panel.setAttribute('type', "arrow");
    panel.setAttribute('position', "after_end");

    panel.addEventListener('popuphiding', () => {
      clearPanel();
    });
	
    // Klick außerhalb: Panel schließen
    function closePanel(event) {
    if (panel.state !== "open")
    return;

    const button = document.getElementById(id);

    // Klick auf den Button -> Menü/Panel nicht sofort schließen
    if (button && button.contains(event.target))
    return;

    // Klick innerhalb des Panels -> Links funktionieren lassen
    if (panel.contains(event.target))
    return;

    panel.hidePopup();
    }

    document.addEventListener("mousedown", closePanel, true);
    
    let vbox = doc.createXULElement('vbox');
    vbox.setAttribute('flex', '1');
    panel.appendChild(vbox);

    let browser = doc.createXULElement('browser');
    browser.id = "wetterfuchs-iframe";
    browser.setAttribute('type', 'content');
    browser.setAttribute('flex', '1');
    browser.setAttribute('remote', 'true');
    browser.setAttribute('maychangeremoteness', 'true');
    browser.setAttribute('disableglobalhistory', 'true');
    browser.setAttribute('src', wfthrobber);
    vbox.appendChild(browser);
	
	// Mittelklick auf den Browser öffnet die aktuelle Seite in einem neuen Tab
    browser.addEventListener("auxclick", event => {
    if (event.button === 1) {
        event.preventDefault();
        openUrlFromPanel();
      }
    });

    doc.getElementById('mainPopupSet').appendChild(panel);
    return panel;
  }

Alles anzeigen

Endor

Hallo FuchsFan!

Mit deiner ersten Version genau das selbe Problem wie vom Mira_Belle
beschrieben. Die obige teste ich noch. Vielen Dank.

Mira_Belle

Ich habe jetzt wie Du geschrieben hast nur diese beiden Absätze entsprechend eingefügt:

JavaScript

    // Klick außerhalb: Panel schließen
    document.addEventListener('click', (event) => {
      if (panel.state === "open" && !panel.contains(event.target) && event.target.id !== id) {
        panel.hidePopup();
      }
    });

und:

JavaScript

  // ESC-Taste zum Schließen des Wetterfuchs-Panels
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' || event.keyCode === 27) {
      const panel = document.getElementById('wetterfuchs-panel');
      if (panel) panel.hidePopup();
    }
  });

Funktioniert prima.
Vielen Dank.
Mfg.
Endor