in bestehende *uc.js Datei ein eigenes Icon als png einfügen ?

Dato

Hallo,

wie kann man in diesem Script (zeigt ein kleines gelbes Icon an für das Profil) ein eigenes png einfügen und wie muß der genaue Pfad in für Windows 10 lauten ?

JavaScript

(function() {

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

    try {

             CustomizableUI.createWidget({
             id: 'Profilordner',
             type: 'custom',
             defaultArea: CustomizableUI.AREAS,
             onBuild: function(aDocument) {         
                var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                   id: 'Profilordner',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: true,
                   label: 'Profil Button"',
                   tooltiptext: '',
                   style: 'list-style-image: url(data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=)',
                   oncommand: "Services.dirsvc.get('ProfD', Ci.nsIFile).launch();"
                };            
                for (var p in props)
                   toolbaritem.setAttribute(p, props[p]);            
                return toolbaritem;
             }      
});
} catch(e) { };

})();

Alles anzeigen

Zitronella

Das ist ein 16x16 Bild als base64 kodiert

Nimm ein anderes Bild im 16x16 Größe und gehe zb. nach hier https://freeonlinetools24.com/base64-image , lade es hoch und drück "Encode" nimm den untersten Link bei "Browser view" und tausche anstelle von

Code

data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=

fügst du den neuen Pfad ein.

Dato

Danke.

nach dem ich heute irgendwo im Netz gelesen habe das das mit base64 länger beim Laden dauert habe ich folgendes gefunden

CSS

style: 'list-style-image: url(file:///C:/Users/xx/AppData/Roaming/Mozilla/Firefox/Profiles/xxx.default-release/chrome/icon/userProfil.svg)',

darauf hin habe ich mir ein schönes icon als SVG besogt umbenannt und siehe da es funktioniert sogar

kann vielleicht noch kurzer geschrieben werden, was ich aber nicht weis.

kann man das auch so lassen für die zukunft oder ist das Qutsch gegenüber den base64 ?

ich Frage nur weil wenn es doch rausgenommen wird von Mozialla, dann muß ich alles wieder neu Suchen und wer weis ob ich dann noch weis wie und wo.

Sören Hentzschel

Zitat von Dato

kann man das auch so lassen für die zukunft oder ist das Qutsch gegenüber den base64 ?

Zitat von Sören Hentzschel

Vermeidung von data:-URIs
Hintergrundgrafiken können als Grafik auf dem Dateisystem oder als base64-kodierte data:-URI angegeben werden. Letzteres hat natürlich den Vorteil, keine weiteren Dateien zu benötigen, man kann alles mit dem CSS mitgeben. Auf den about:-Seiten von Firefox funktioniert dies in Zukunft aber nicht mehr, da data:-URIs XSS-Sicherheitslücken begünstigen. Und ganz unabhängig davon sind diese um ein vielfaches langsamer und erzeugen mehr CPU-Last, als wenn Grafiken auf dem konventionellen Weg eingebunden werden. Daher ist der Weg, Grafiken zu verwenden, definitiv der bessere Weg.

Best Practices für CSS-Beispiele

Dato

Hallo Sören,

also wen ich das rihtig verstanden habe, ist es doch besser kein base64 zu nutzen.

Sören Hentzschel

Richtig.

Dato

ok also doch richtig im Kopf gehabt

na dann wollen wir mal.

ERLEDIGT für mich.

Dato

ist ja der Hammer, das klappt sogar mit Extrahierter "ico" Datei.

kurze Frage noch zu den Pfad.

ich habe die Bilder im PrfilOrdner, sind die dort ok oder lieber auf einer anderen SSD, HDD ?

Sören Hentzschel

Für Firefox ist das egal, von wo die Bilder kommen. Aber rein von der Organisation her betrachtet ergibt das in deinem Profil, wo ja auch deine Anpassungen sind, wahrscheinlich am meisten Sinn.

Dato

alles klar Sören.

nur noch ganz kurz

wenn ich eine Bilddatei z.B. png in ienem Script einbinden möchte muß dieser ja so lautet

JavaScript

 style: 'list-style-image: url(file:///C:/Users/username/AppData/Roaming/Mozilla/Firefox/Profiles/profilname/chrome/icon/userProfil.ico)',

könnte man es nicht irgendwie verkürzen die Pfadangabe ?

ala

style: 'list-style-image: url(/icon/userProfil.ico)',