Ein Icon ins base64 Format umwandeln

Boersenfeger

Da nun der andere Thread geschlossen wurde, erlaube ich mir, hier eine Supportanfrage zu stellen: Falls nicht gewünscht, bitte auslagern!

Code

//  Browsertoolbox.uc.js

(function() {

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

    try {
        CustomizableUI.createWidget({
            id: 'browser-konsole-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                    id: 'browser-konsole-button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Browser-Konsole',
                    tooltiptext: 'Browser-Konsole öffnen',
                    style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADaSURBVHjaYvz//z8DJYAJn+SFuYy+IEyWAUCN0/iEGDaBMIhNkgFQDZlK2gwMIAxi4zIElwsyDWwRHCg7kygD8DkXmxwTVtsdeBgYmFExWAyLK5iw2sAqCMZZvbEMAcXOcD42VzBh2O5lBFQsCsbPnz9nePLkCZwPlkNzBROm7SJw/PjxY4YfP36giKG7ghGWEoGC/w2Cw4lKfRfWrmQwSP7PCHcB3ES0gNO2vsyganoWQxxZD9gFYNvDkknKAxdWzQW7gomBQsACpacDTcwkUe90lEAkFwAEGACHlFPNBrHqNAAAAABJRU5ErkJggg==)',			   
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
					toolbaritem.addEventListener('command', event => {				   
					document.getElementById("menu_browserConsole").click();
			   });
                return toolbaritem;
            }
        });
        CustomizableUI.registerToolbarNode(tb);
       } catch(e) { };  

    function onCommand() {
        var document = event.target.ownerDocument;
        if (!document.getElementById('menu_browserConsole')) {
            let { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs", {});
            require("resource://devtools/client/webconsole/browser-console-manager");
        };
        document.getElementById('menu_browserConsole').click();
    };

})();

Alles anzeigen

Hätte jemand ein Icon im base64 Format oder auch anders eingebunden? Zum Beispiel den Schraubenschlüssel aus dem Anpassen-Fenster für die Browsertoolbox?

2002Andreas

Zitat von Boersenfeger

im base64 Format

Teste bitte:

Code

url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHA6Ly9tb3ppbGxhLm9yZy9NUEwvMi4wLy4gLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8cGF0aCBmaWxsPSJjb250ZXh0LWZpbGwgbGlnaHQtZGFyayhibGFjaywgd2hpdGUpIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiBkPSJNMTQuNTU1IDMuMmwtMi40MzQgMi40MzZhMS4yNDMgMS4yNDMgMCAxIDEtMS43NTctMS43NTdMMTIuOCAxLjQ0NUEzLjk1NiAzLjk1NiAwIDAgMCAxMSAxYTMuOTc2IDMuOTc2IDAgMCAwLTMuNDM0IDYuMDJsLTYuMjczIDYuMjczYTEgMSAwIDEgMCAxLjQxNCAxLjQxNEw4Ljk4IDguNDM0QTMuOTYgMy45NiAwIDAgMCAxMSA5YTQgNCAwIDAgMCA0LTQgMy45NTYgMy45NTYgMCAwIDAtLjQ0NS0xLjh6Ii8+DQo8L3N2Zz4=)

Boersenfeger

Äh, das klappt, warum gelöscht?

2002Andreas

Zitat von Boersenfeger

Äh, das klappt, warum gelöscht?

Bei mir eben aber nicht

Ok, dann öffne ich meinen Beitrag wieder.

Freut mich wenn es doch funktioniert

milupo

Zitat von 2002Andreas

Bei mir eben aber nicht

Ich wollte den Code mal in ein Symbol umwandeln lassen, statt dessen öffnet sich eine Suchseite von Google. Liegt vielleicht am Mime-Typ svg+xml.

2002Andreas

Zitat von milupo

Liegt vielleicht am Mime-Typ svg+xml.

Du darfst das nur so in die Urlbar eintragen:

Code

data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHA6Ly9tb3ppbGxhLm9yZy9NUEwvMi4wLy4gLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8cGF0aCBmaWxsPSJjb250ZXh0LWZpbGwgbGlnaHQtZGFyayhibGFjaywgd2hpdGUpIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiBkPSJNMTQuNTU1IDMuMmwtMi40MzQgMi40MzZhMS4yNDMgMS4yNDMgMCAxIDEtMS43NTctMS43NTdMMTIuOCAxLjQ0NUEzLjk1NiAzLjk1NiAwIDAgMCAxMSAxYTMuOTc2IDMuOTc2IDAgMCAwLTMuNDM0IDYuMDJsLTYuMjczIDYuMjczYTEgMSAwIDEgMCAxLjQxNCAxLjQxNEw4Ljk4IDguNDM0QTMuOTYgMy45NiAwIDAgMCAxMSA5YTQgNCAwIDAgMCA0LTQgMy45NTYgMy45NTYgMCAwIDAtLjQ0NS0xLjh6Ii8+DQo8L3N2Zz4=

milupo

Zitat von 2002Andreas

Du darfst das nur so in die Urlbar eintragen:

Ach ja, ich wusste, dass ich etwas falsch mache. Habe das auch lange nicht mehr gemacht.

Danke.

Ich habe hier ein Werkzeugkasten-Symbol:

Heißt bei mir werkzeugkasten.png.

Horstmann

Zitat von Boersenfeger

Hätte jemand ein Icon im base64 Format oder auch anders eingebunden? Zum Beispiel den Schraubenschlüssel aus dem Anpassen-Fenster für die Browsertoolbox?

In diesem Fall (mit diesem Script) könntest du mal das hier in der userChrome.css probieren:

CSS

#browser-konsole-button {
    list-style-image: url("chrome://global/skin/icons/developer.svg") !important; 
}

Das base64 Zeug würde ich selber vermeiden, für permanent sichtbare Buttons wg. eventueller Leistungseinbußen (?), und weil sie alle wie Gülle aussehen.

.DeJaVu

Base64 Image Encoder

Zitat

JPG, PNG, GIF, WebP, SVG or BMP

oder https://base64.guru/converter/encode/image

Sören Hentzschel

Zitat von Horstmann

und weil sie alle wie Gülle aussehen.

Das ergibt keinen Sinn. Von der Darstellung her kann es keinen Unterschied gegenüber der Einbindung als Bild-Datei geben. Wenn die Grafik „wie Gülle“ aussieht, liegt es an der Grafik.

Man sollte data:-URIs aber dennoch vermeiden, weil diese eine hohe CPU-Last verursachen und deutlich schlechter für die Performance sind.

milupo

Zitat von Sören Hentzschel

Man sollte data:-URIs aber dennoch vermeiden, weil diese eine hohe CPU-Last verursachen und deutlich schlechter für die Performance sind.

Die Symbole sind aber dadurch unabhängig vom Pfad. Für die Beispielskripte bei Endor auf Github hätten dann alle beim Speichern der Skripte das entsprechende Symbol. Es bleibt dann natürlich noch jedem unbenommen, daraus einen lokalen Pfad zu machen.

Sören Hentzschel

Dieser einzige Vorteil von data:-URIs ist mir bekannt. Allerdings ist das in meinen Augen ein schwaches Argument, wenn der Preis dafür eine erhöhte CPU-Last ist. Das wiegt für mich deutlich schwerer als etwas Bequemlichkeit. Außerdem sind data:-URIs auch aus einer Sicherheitsperspektive die schlechtere Wahl und könnten jederzeit via CSP verboten werden. Aktuell schränkt Mozilla ja sehr aktiv mittels CSP ein, was Scripts dürfen und was nicht, ist also auch wieder eine potenzielle Baustelle in der Zukunft, die ma einfach von Anfang an vermeiden könnte. Daher habe ich vor Jahren schon darauf hingewiesen:

Zitat von camp-firefox.de

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.

milupo

Zitat von Sören Hentzschel

Allerdings ist das in meinen Augen ein schwaches Argument, wenn der Preis dafür eine erhöhte CPU-Last ist. Das wiegt für mich deutlich schwerer als etwas Bequemlichkeit.

Was den ersten Satz angeht, bin ich durchaus deiner Meinung. Es ging mir aber nicht um Bequemlichkeit, sondern um es für alle Nutzer zu vereinfachen, dass Skript sofort verwenden zu können und bei der Diskussion über ein Skript eine für alle sofort verfügbar Schaltfläche zu haben. Aber nun ja, war nur so ein Gedanke.

Horstmann

Zitat von milupo

Zitat von Sören Hentzschel

Allerdings ist das in meinen Augen ein schwaches Argument, wenn der Preis dafür eine erhöhte CPU-Last ist. Das wiegt für mich deutlich schwerer als etwas Bequemlichkeit.

Was den ersten Satz angeht, bin ich durchaus deiner Meinung. Es ging mir aber nicht um Bequemlichkeit, sondern um es für alle Nutzer zu vereinfachen, dass Skript sofort verwenden zu können und bei der Diskussion über ein Skript eine für alle sofort verfügbar Schaltfläche zu haben. Aber nun ja, war nur so ein Gedanke.

~~Das ist ein guter Punkt, wobei man auch svg Grafiken in ein Script einbinden kann, ist ja auch nur Code.~~
~~Ob sich das auch negativ auf die Performance auswirkt kann ich allerdings nicht sagen~~.

Nachtrag: svg braucht wohl auch data URIs zur Einbindung ...

Boersenfeger

Zitat von 2002Andreas

Bei mir eben aber nicht
Ok, dann öffne ich meinen Beitrag wieder.

Hm, 2002Andreas , neuer Tag, neue Nightly-Version und jetzt klappt das o.a. Script nicht mehr.

Wenn ich den von Haus aus mitgelieferten, Button mit dem identischen Icon aus dem Anpassen-Fenster auf meine Addon-Bar ziehe, dort dann aus dem Menü die Browser-Konsole aufrufe, diese dann wieder schließe und nun auf das Icon, das durch das Script erzeugt wird, klicke, öffnet sich auch dann die Konsole. Also irgendwas passt doch nicht.
Horstmann Wenn ich im Script die Anzeige des Icon auskommentiere und deinen Code in die userChromeCSS eintrage, habe ich das Icon verfügbar. Allerdings klappt ja das Script in dieser Version nicht.

2002Andreas

Zitat von Boersenfeger

klappt ja das Script in dieser Version nicht.

Es gibt doch schon ein angepasstes dafür:

Beitrag

RE: Div. Skripte funktionieren im aktuellem Nightly nicht mehr

FuchsFan
Teste mal meines:

(Quelltext, 44 Zeilen)

Dafür hat mir Horstmann doch geholfen.
Nochmals vielen Dank dafür.
Mfg.
Endor

Endor

16. Januar 2025 um 17:03

So wäre das mit deinem base64 Icon:

JavaScript

//  browsertoolbox.uc.js

(function() {

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

	try {
		CustomizableUI.createWidget({
			id: 'browser-toolbox-button',
			type: 'custom',
			defaultArea: CustomizableUI.AREA_MENUBAR,
			onBuild: function(aDocument) {
				var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
				var props = {
					id: 'browser-toolbox-button',
					class: 'toolbarbutton-1 chromeclass-toolbar-additional',
					label: 'Browser-Werkzeuge',
					tooltiptext: 'Browser-Werkzeuge',
					style: 'list-style-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHA6Ly9tb3ppbGxhLm9yZy9NUEwvMi4wLy4gLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPg0KICA8cGF0aCBmaWxsPSJjb250ZXh0LWZpbGwgbGlnaHQtZGFyayhibGFjaywgd2hpdGUpIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiBkPSJNMTQuNTU1IDMuMmwtMi40MzQgMi40MzZhMS4yNDMgMS4yNDMgMCAxIDEtMS43NTctMS43NTdMMTIuOCAxLjQ0NUEzLjk1NiAzLjk1NiAwIDAgMCAxMSAxYTMuOTc2IDMuOTc2IDAgMCAwLTMuNDM0IDYuMDJsLTYuMjczIDYuMjczYTEgMSAwIDEgMCAxLjQxNCAxLjQxNEw4Ljk4IDguNDM0QTMuOTYgMy45NiAwIDAgMCAxMSA5YTQgNCAwIDAgMCA0LTQgMy45NTYgMy45NTYgMCAwIDAtLjQ0NS0xLjh6Ii8+DQo8L3N2Zz4=)',
				};
				for (var p in props)
					toolbaritem.setAttribute(p, props[p]);
					toolbaritem.addEventListener('click', event => {
				    if (event.button == 0) {
                         onCommand()
                    }
				});
				return toolbaritem;
			}
		});
       } catch(e) { };  

	function onCommand() {
		var document = event.target.ownerDocument;
		if (!document.getElementById('menu_browserToolbox')) {
			let { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs", {});
			require("devtools/client/framework/devtools-browser");
		};
		document.getElementById('menu_browserToolbox').click();
	};

})();

Alles anzeigen

Zitat von Boersenfeger

deinen Code in die userChromeCSS eintrage

Geht doch auch gleich im Skript:

JavaScript

//  browsertoolbox.uc.js

(function() {

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

	try {
		CustomizableUI.createWidget({
			id: 'browser-toolbox-button',
			type: 'custom',
			defaultArea: CustomizableUI.AREA_MENUBAR,
			onBuild: function(aDocument) {
				var toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
				var props = {
					id: 'browser-toolbox-button',
					class: 'toolbarbutton-1 chromeclass-toolbar-additional',
					label: 'Browser-Werkzeuge',
					tooltiptext: 'Browser-Werkzeuge',
					style: 'list-style-image: url(chrome://global/skin/icons/developer.svg)',
				};
				for (var p in props)
					toolbaritem.setAttribute(p, props[p]);
					toolbaritem.addEventListener('click', event => {
				    if (event.button == 0) {
                         onCommand()
                    }
				});
				return toolbaritem;
			}
		});
       } catch(e) { };  

	function onCommand() {
		var document = event.target.ownerDocument;
		if (!document.getElementById('menu_browserToolbox')) {
			let { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs", {});
			require("devtools/client/framework/devtools-browser");
		};
		document.getElementById('menu_browserToolbox').click();
	};

})();

Alles anzeigen

Boersenfeger

Danke, aber leider klappt das nicht, es öffnet nicht die Toolbar. Gleiches Verhalten wie in #16 geschildert

2002Andreas

Zitat von Boersenfeger

es öffnet nicht die Toolbar.

In deinem Skript aus Beitrag Nr. 1 steht in Zeile 1:
// Browsertoolbox.uc.js

Und davon bin ich ausgegangen.

Wenn es also ein ganz anderes Skript ist, und der Name nicht stimmt, dann solltest du das ändern und einen neuen Thread dafür erstellen, denn das hat ja dann nichts mit dem Icon in base64 zu tun.

Boersenfeger

Ich meine schon die Browserkonsole.

Übrigens sind 33 meiner Scripts mit Fehler-Einträgen dort bedacht. Diese habe ich mal alle deaktiviert, außer denen, die abgebildet sind. Viele von denen haben ähnliche Eintragungen wie gBrowser ist not defined mit einem Verweis auf die Datei utilities.js im userChromeJS Ordner des Installationsordners von Nightly. Darunter sind auch einige, die jetzt gerade neu umgeschrieben wurden.

Beitrag von Mitleser (25. Januar 2025 um 21:44)

Vermeidung von data:-URIs

RE: Div. Skripte funktionieren im aktuellem Nightly nicht mehr