userChrome.js Scripte für den Fuchs (Diskussion)

bege

Zitat von FuchsFan

Zitat von bege

also im Fx 126 nicht mehr funktionieren dürften

Das war ab Version 127 erforderlich, damit das Script wieder funktionierte.

Danke! Ich dachte, das betrifft schon v125 oder 126.

Mitleser

Hallo,
ich suche einen 'EventListener', der 'feuert' wenn sich ein Attribut einer ID ändert, zum Beispiel so ähnlich:
document.getElementById('context-bookmarkpage').addEventListener('irgendwas mit attribute und changed/modified o.ä.', funktionsname);
Konkret geht es um den Bookmarkstern im ContextMenu (oben in der menugroup). In der Konsole wird je nach 'Lesezeichen gespeichert/nicht gespeichert'
document.getElementById('context-bookmarkpage').getAttribute('starred');
dies ausgegeben: "true"/null
Hier das funktionierende Test-Script mit einem Test-EventListener (der ununterbrochen feuert und NICHT verwendet werden sollte):
Vielen Dank für die Mühe!

Spoiler anzeigen

JavaScript

// JavaScript Document
// M_BookmarkThisPage_126_Test08.uc.js
(function () {
  if (location.href !== 'chrome://browser/content/browser.xhtml') 
    return;
// ■■ START UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const buttonIcon1 = 'bookmark-hollow.svg';  // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const buttonIcon2 = 'bookmark.svg';  // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
const iconPath = '/chrome/icons/'; // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
const label1 = 'Als Lesezeichen speichern'; // [starred=null]
const label2 = 'Lesezeichen bearbeiten'; // [starred="true"]
const tooltiptext = 'Site als Lesezeichen speichern/bearbeiten';
// ■■ END UserCustomisation ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
const oncommand = 'gContextMenu.bookmarkThisPage();';
const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
const menuitem1 = document.createXULElement('menuitem');
      menuitem1.id = 'contextBookmarkpage';
      menuitem1.setAttribute('tooltiptext', tooltiptext);
      menuitem1.setAttribute('oncommand', oncommand);
      menuitem1.classList.add('menuitem-iconic');
const refItem1 = document.getElementById('context-inspect');
   	  refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
// Status aktualisieren

//document.getElementById('context-bookmarkpage').addEventListener('irgendwas mit attribute und changed/modified', funktionsname); ?

gBrowser.tabContainer.addEventListener('TabAttrModified', exc);// NUR für Testzwecke zu gebrauchen ! 
function exc() {
		  setTimeout(() => {
// Label aktualisieren
		if (menuitem1.getAttribute('starred') == ''){
			menuitem1.setAttribute('label', 'funzt');
			}
   else if (menuitem1.getAttribute('starred') == "null"){
			menuitem1.setAttribute('label', label1);
			}
   else if (menuitem1.getAttribute('starred') == "true"){
			menuitem1.setAttribute('label', label2);
			}
      else {
			menuitem1.setAttribute('label', 'funzt nicht');
			}
// starred-attribut vom Original 'context-bookmarkpage' clonen
menuitem1.setAttribute('starred', "null");
const orig = document.getElementById('context-bookmarkpage');
let duplic = orig.getAttributeNode('starred');
menuitem1.setAttributeNode(duplic.cloneNode(true));
  }, 700);
//-----------------------------------------
	let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
	let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
	#contextBookmarkpage[starred="true"] image {
		list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
		transform: scale(0.9) !important;
		-moz-context-properties: fill;
		fill: orange !important;
	}
	#contextBookmarkpage[starred="true"]:hover image {
		list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
		fill: lightgreen !important;
	}
	#contextBookmarkpage[starred=null] image/*, 
	#contextBookmarkpage image*/{
		list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
		transform: scale(0.9) !important;
		-moz-context-properties: fill;
		fill: orange !important;
	}
	#contextBookmarkpage[starred=null]:hover image/*, 
	#contextBookmarkpage:hover image*/{
		list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
		fill: lightgreen !important;
	}
	`), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
//-------------------------------------
      };
})();

Alles anzeigen

icons.zip

Ja, ich weiß ...Bookmarksterne sind auf der Browseroberfläche mehrfach vorhanden (z.B.: urlbar), dies ist einfach nur ein Test für ContextMenu-Einträge.

caveman

Hab jetzt keinen fertigen Code, aber könnte man sowas nicht mit MutationObservern erreichen?

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation…

developer.mozilla.org

Mitleser

Danke für den Tipp! Ich werde mich in den nächsten Tagen mal damit beschäftigen.

Mira_Belle

Mitleser Ich verstehe nur Bahnhof. Sorry.

Was soll das Skript bezwecken, wo für soll es sein?

Mitleser

Es fügt dem Kontextmenü einen neuen Eintrag hinzu (Lesezeichen speichern/bearbeiten) und ist lediglich ein Test für Kontextmenüeinträge.
EDIT: Ein Vorteil wäre vieleicht, dass der Eintrag in allen Kontextmenüs erscheint (auch bei rechte Maus über Bild/Link/usw.).

Mira_Belle

Ob ich das jetzt verstanden habe?

Also, im Kontextmenü gibt es schon das Sternchen, mit allen gewünschten Eigenschaften.
Aber Du möchtest das Klonen, damit es einen neuen Eintrag im Menü gibt.
Diese soll immer da sein, damit auch andere Ding, also nicht nur Seiten (Pages) als Lesezeichen abgelegt werden können,
sondern auch Bildern usw.
Richtig?

Mitleser

Genau falsch! Es dreht sich um die ganz normale Funktion des Bookmarken einer Site. Und das Ganze ist eine Übung/ein Test für andere Menüeinträge.

Zitat von Mitleser

Ja, ich weiß ...Bookmarksterne sind auf der Browseroberfläche mehrfach vorhanden (z.B.: urlbar), dies ist einfach nur ein Test für ContextMenu-Einträge.

Mira_Belle

Sorry, dann verstehe ich nicht. Auch wenn es nur ein Test sein soll, so verstehe ich einfach nicht,
was Du bezwecken willst. Vielleicht lasse ich es auch noch einmal sacken und lese Deine Beiträge
nochmal und ein anderes Mal.

Erkläre es mir bitte doch noch einmal mit dem Reloadbutton, oder besser mit einer Funktion,
die so im Menü nicht vorkommt! Z.B. "Reload userChrome.css" oder "Downloadfenster öffnen" oder
"Anwendungsmenü öffnen" (Hamburgermenü).

Mitleser

Oder Du probierst das Script aus Beitrag #3.823 einfach mal aus!

milupo

Zitat von caveman

Hab jetzt keinen fertigen Code, aber könnte man sowas nicht mit MutationObservern erreichen?

Mitleser Nur so zur Information, weil ich das zufällig gesehen habe: Auf Pontoon sind einige ähnliche Strings angekommen, unter anderem:

Pontoon

Diese Strings besagen, dass man statt MutationEvent jetzt MutationObserver nutzen soll. Da du schon auf MutationObserver hingewiesen wurdest, sind die Strings nicht weiter relevant.

Mitleser

milupo Danke! Genau so (MutationObserver) werde ich das am Wochemende machen.

Mira_Belle Die Funktion kannst du in Zeile 14 ändern.
const oncommand = 'gContextMenu.bookmarkThisPage();';

Zitat von Mira_Belle

Erkläre es mir bitte doch noch einmal mit dem Reloadbutton, oder besser mit einer Funktion,
die so im Menü nicht vorkommt! Z.B. "Reload userChrome.css" oder "Downloadfenster öffnen" oder
"Anwendungsmenü öffnen" (Hamburgermenü).

Einen Menüeintrag einer Funktion hinzufügen kann man auch (siehe #23).
Das ist hier aber nicht die 'Aufgabenstellung'.

Mira_Belle

Zitat von Mitleser

Das ist hier aber nicht die 'Aufgabenstellung'.

Ich stehe z.Z. wirklich total auf dem Schlauch!
Was wäre denn die Aufgabenstellung?
Ich bin irgendwie total begriffsstutzig.

Hatte gerade einen Geistesblitz, hoffe ich.

Dir geht es nicht um die Funktion, die das Skript implementiert,
sondern WIE es das macht. Richtig?

Mitleser

Mira_Belle Kann es sein dass du mich veräppelst?
Meine 'Aufgabenstellung'(wird demnächst mit 'MutationObserver' gelöst werden): Einen '~~EventListener'~~ der in der Lage ist, ein Attribut einer ID auf Veränderung zu prüfen, um eine Funktion anzustoßen
[konkret: #context-bookmarkpage[starred="true"] wird zum Beispiel genutzt um das list-style-image zu ändern (gefüllter/umrandeter Stern)]. Dazu nutze ich das oben erwähnte - leicht nachvollziehbare - Beipiel.

Mira_Belle

Zitat von Mitleser

Mira_Belle Kann es sein dass du mich veräppelst?

Nein! Es scheint wirklich heute nicht mein Tag zu sein!
Auch mit Deiner Erklärung, Danke dafür, und Deiner Geduld, fürchte ich,
weiß ich immer noch nicht so genau, was genau gemacht werden soll.

Aber lass es jetzt gut sein, ich peil das wahrscheinlich eh nicht,
Dennoch vielen Dank, hoffe für Dich, Du bekommst das so hin, wie Du Dir das wünschst.

Nachtrag!
Nun ja, ich glaube, wir haben da in gewissen Stellen aneinander vorbeigeschrieben!
Aber auch, dass ich irgendwie nicht verstanden habe, was genau Du meinst.
Du hast Dich für mich aber auch so technisch gelesen!
Schau Dir mal das Skript an, wenn ich das nun doch entlich geschnackelt habe,
könnte das so sein, wie Du beabsichtigst.

JavaScript

// BookmarkThisPage_Test.uc.js

(function () {
    if (location.href !== 'chrome://browser/content/browser.xhtml') 
      return;

  //    ## START UserCustomisation ##
  const buttonIcon1 = 'bookmark-hollow.svg';    // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const buttonIcon2 = 'bookmark.svg';           // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const iconPath = '/chrome/icons/';            // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
  const label1 = 'Als Lesezeichen speichern';   // [starred=null]
  const label2 = 'Lesezeichen bearbeiten';      // [starred="true"]
  const tooltiptext = 'Site als Lesezeichen speichern/bearbeiten';
  // ## END UserCustomisation ##

  const oncommand = 'gContextMenu.bookmarkThisPage();';
  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
  const menuitem1 = document.createXULElement('menuitem');
        menuitem1.id = 'contextBookmarkpage';
        menuitem1.setAttribute('tooltiptext', tooltiptext);
        menuitem1.setAttribute('oncommand', oncommand);
        menuitem1.classList.add('menuitem-iconic');
  const refItem1 = document.getElementById('context-inspect');
        refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
  
  // Status aktualisieren
  const orig = document.getElementById('context-bookmarkpage');
  
  // Funktion zum Aktualisieren des Labels und Icons
    function updateMenuItem() {
        const starred = orig.getAttribute('starred');
            if (starred == '') {
            menuitem1.setAttribute('label', 'funzt');
            } else if (starred == "null") {
          menuitem1.setAttribute('label', label1);
            } else if (starred == "true") {
          menuitem1.setAttribute('label', label2);
            } else {
          menuitem1.setAttribute('label', 'funzt nicht');
        }
  
      // starred-attribut vom Original 'context-bookmarkpage' clonen
      menuitem1.setAttribute('starred', starred);
    }
  
  // MutationObserver einrichten
  const observer = new MutationObserver(updateMenuItem);
  observer.observe(orig, { attributes: true, attributeFilter: ['starred'] });
  
  // Initiales Update
  updateMenuItem();
  
  let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
  let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
        #contextBookmarkpage[starred="true"] image {
        list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
        transform: scale(0.9) !important;
        -moz-context-properties: fill;
        fill: orange !important;
        }
        #contextBookmarkpage[starred="true"]:hover image {
        list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
        fill: lightgreen !important;
        }
        #contextBookmarkpage[starred=null] image/*, 
        #contextBookmarkpage image*/{
        list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
        transform: scale(0.9) !important;
        -moz-context-properties: fill;
        fill: orange !important;
        }
        #contextBookmarkpage[starred=null]:hover image/*, 
        #contextBookmarkpage:hover image*/{
        list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
        fill: lightgreen !important;
        }
    `), null, null);
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
  
})();

Alles anzeigen

Mitleser

Mira_Belle Bestimmt ist morgen dein Tag!
An deinem heutigen schlechten Tag kann ich nichts ändern, aber wenn dir ab morgen langweilig ist, baue doch einfach den 'MutationObserver' in das oben erwähnte Script ein. Du kannst das! Mit der Beschäftigung mit dem o.a. Script würdest du auch meiner Erklärung näherkommen.....

Dein 'Nachtrag' und mein Beitrag #3.837scheinen sich überschnitten zu haben.

Mitleser

Danke!

Das Icon funzt, das Label noch nicht..

[function updateMenuItem()]

Aber dies funzt (Zeile11):

Statt:

JavaScript

// Funktion zum Aktualisieren des Labels und Icons
    function updateMenuItem() {
        const starred = orig.getAttribute('starred');
            if (starred == '') {
            menuitem1.setAttribute('label', 'funzt');
            } else if (starred == "null") {
          menuitem1.setAttribute('label', label1);
            } else if (starred == "true") {
          menuitem1.setAttribute('label', label2);
            } else {
          menuitem1.setAttribute('label', 'funzt nicht');
        }

Alles anzeigen

Dies:

JavaScript

// Funktion zum Aktualisieren des Labels und Icons
    function updateMenuItem() {
        const starred = orig.getAttribute('starred');
            if (starred == '') {
            menuitem1.setAttribute('label', 'funzt');
            } else if (starred == "null") {
          menuitem1.setAttribute('label', label1);
            } else if (starred == "true") {
          menuitem1.setAttribute('label', label2);
            } else {
          menuitem1.setAttribute('label', label1);
        }

Alles anzeigen

Mira_Belle

Jetzt?

JavaScript

// BookmarkThisPage_Test03.uc.js

(function () {
    if (location.href !== 'chrome://browser/content/browser.xhtml') 
      return;
//    ## START UserCustomisation ##
  const buttonIcon1 = 'bookmark-hollow.svg';    // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const buttonIcon2 = 'bookmark.svg';           // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const iconPath = '/chrome/icons/';            // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
  const label1 = 'Als Lesezeichen speichern';   // [starred=null]
  const label2 = 'Lesezeichen bearbeiten';      // [starred="true"]
  const tooltiptext = 'Site als Lesezeichen speichern/bearbeiten';
// ## END UserCustomisation ##

  const oncommand = 'gContextMenu.bookmarkThisPage();';
  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
  const menuitem1 = document.createXULElement('menuitem');
        menuitem1.id = 'contextBookmarkpage';
        menuitem1.setAttribute('tooltiptext', tooltiptext);
        menuitem1.setAttribute('oncommand', oncommand);
        menuitem1.classList.add('menuitem-iconic');
  const refItem1 = document.getElementById('context-inspect');
        refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
  
// Status aktualisieren
  const orig = document.getElementById('context-bookmarkpage');
  
// Funktion zum Aktualisieren des Labels und Icons
    function updateMenuItem() {
        const starred = orig.getAttribute('starred');
        console.log(`starred attribute: ${starred}`); // Debugging-Ausgabe
    
        if (starred === "true") {
            menuitem1.setAttribute('label', 'funzt');
        } else {
            menuitem1.setAttribute('label', 'funzt nicht');
        }
    
        // starred-attribut vom Original 'context-bookmarkpage' clonen
        menuitem1.setAttribute('starred', starred);
    }
  
// MutationObserver einrichten
  const observer = new MutationObserver(updateMenuItem);
  observer.observe(orig, { attributes: true, attributeFilter: ['starred'] });
  
// Initiales Update
  updateMenuItem();
  
  let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
  let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
    #contextBookmarkpage[starred="true"] image {
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
      transform: scale(0.9) !important;
      -moz-context-properties: fill;
      fill: orange !important;
    }
    #contextBookmarkpage[starred="true"]:hover image {
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
      fill: lightgreen !important;
    }
    #contextBookmarkpage[starred=null] image/*, 
    #contextBookmarkpage image*/{
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
      transform: scale(0.9) !important;
      -moz-context-properties: fill;
      fill: orange !important;
    }
    #contextBookmarkpage[starred=null]:hover image/*, 
    #contextBookmarkpage:hover image*/{
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
      fill: lightgreen !important;
    }
  `), null, null);
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
  
})();

Alles anzeigen

Mitleser

Schon wieder überschnitten.

Zitat von Mira_Belle

Jetzt?

Leider nein.

Muss jetzt schlafen, gN8...morgen ist ein neuer Tag....

Mira_Belle

Ah!

JavaScript

// BookmarkThisPage_Test04.uc.js

(function () {
    if (location.href !== 'chrome://browser/content/browser.xhtml') 
      return;
//    ## START UserCustomisation ##
  const buttonIcon1 = 'bookmark-hollow.svg';    // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const buttonIcon2 = 'bookmark.svg';           // Name.Dateiendung des anzuzeigenden Symbols | Name.file extension of the symbol to be displayed
  const iconPath = '/chrome/icons/';            // Pfad zum Ordner der das Icon beinhaltet | Path to folder containing the icon
  const label1 = 'Diese Seite als Lesezeichen speichern';   // [starred=null]
  const label2 = 'Das Lesezeichen dieser Seite bearbeiten';      // [starred="true"]
  const tooltiptext = 'Site als Lesezeichen speichern/bearbeiten';
// ## END UserCustomisation ##

  const oncommand = 'gContextMenu.bookmarkThisPage();';
  const curProfDir = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir));
  const menuitem1 = document.createXULElement('menuitem');
        menuitem1.id = 'contextBookmarkpage';
        menuitem1.setAttribute('tooltiptext', tooltiptext);
        menuitem1.setAttribute('oncommand', oncommand);
        menuitem1.classList.add('menuitem-iconic');
  const refItem1 = document.getElementById('context-inspect');
        refItem1.parentNode.insertBefore(menuitem1, refItem1.nextSibling);
  
// Status aktualisieren
  const orig = document.getElementById('context-bookmarkpage');

// Funktion zum Aktualisieren des Labels und Icons
    function updateMenuItem() {
        const starred = orig.getAttribute('starred');

        if (starred == '') {
            menuitem1.setAttribute('label', 'funzt');
        } else if (starred == "null") {
            menuitem1.setAttribute('label', label1);
        } else if (starred == "true") {
            menuitem1.setAttribute('label', label2);
        } else {
            menuitem1.setAttribute('label', label1);
        }        

        // starred-attribut vom Original 'context-bookmarkpage' clonen
        menuitem1.setAttribute('starred', starred);
    }
  
// MutationObserver einrichten
  const observer = new MutationObserver(updateMenuItem);
  observer.observe(orig, { attributes: true, attributeFilter: ['starred'] });
  
// Initiales Update
  updateMenuItem();
  
  let sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
  let uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(`
    #contextBookmarkpage[starred="true"] image {
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
      transform: scale(0.9) !important;
      -moz-context-properties: fill;
      fill: orange !important;
    }
    #contextBookmarkpage[starred="true"]:hover image {
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon2}) !important;
      fill: lightgreen !important;
    }
    #contextBookmarkpage[starred=null] image/*, 
    #contextBookmarkpage image*/{
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
      transform: scale(0.9) !important;
      -moz-context-properties: fill;
      fill: orange !important;
    }
    #contextBookmarkpage[starred=null]:hover image/*, 
    #contextBookmarkpage:hover image*/{
      list-style-image: url(${curProfDir}${iconPath}${buttonIcon1}) !important;
      fill: lightgreen !important;
    }
  `), null, null);
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
  
})();

Alles anzeigen

Jetzt bin ich mal gespannt, was Du daraus basteln willst.
Denn genau genommen, sehe ich keine Verwendung genau für dieses Skript mit dieser Funktion.
Aber lehrreich war es.