- Firefox-Version
- –
- Betriebssystem
- –
(Entsprechend der Hinweise in unten folgenden Antworten überarbeitet.)
Symbole in Skripten werden bisher, soweit ich es bemerkt habe, entweder mit Absolutpfaden angegeben oder als Data-URI mit Base64-kodiertem Inhalt.
Ich hatte nun eine Idee und bei Aris nachgefragt, ob man es umsetzen könne, dass ein Skript seinen eigenen Pfad erkennt, so dass man dann Symbole aus auch einem relativ verlinkten Verzeichnis unterhalb dieses Skriptpfads auslesen könnte – und in der Tat, man kann (dem folgte die zuerst hier präsentierte, inzwischen überarbeitete Version).
Man fügt in die userChrome.js oder jedes einzelne Schaltflächenskript ganz zu Beginn diese Zeile ein (Konstantenname ziemlich egal):
const ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome'));Und das kann man dann weiterverwenden. Ich gebe mal ein Beispiel, bei mir als website_mozilla-addons.uc.js gespeichert, Anmerkungen nach dem Skript:
// external-link-button.uc.js
/*
* Speravir, https://www.camp-firefox.de/forum/thema/135807/
* basiert auf Aris-t2, about_button.uc.js,
* https://github.com/Aris-t2/CustomJSforFx/blob/4111b9769ca005adf4dd710b7ed15c154949a3fd/scripts/about_button.uc.js
* und Aris-t2 in https://github.com/Aris-t2/CustomJSforFx/discussions/60#discussioncomment-4493915
*/
(function() {
if (!window.gBrowser) return;
const ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome'));
// Konfiguration
const Link = "https://addons.mozilla.org/",
Button_ID = "AMO-Button",
Label = "AMO",
Tooltiptext = "Link zu AMO (addons.mozilla.org)",
IconPath = "scriptimages/amo.png", // Pfad muss im ProfilePath liegen, Notation ohne Schrägstrich zu Beginn
MoreCSS = "";// zusätzliche CSS-Deklarationen, mit Semikolon innerhalb der Anführungszeichen abschließen
// Ende Konfiguration
const CSS = "list-style-image: url('" + ProfilePath + IconPath + "');" + MoreCSS;
// stattdessen mit vollständigem Pfad zu zentraler Dateiablage, hier unter C:\Users\Public:
//const CSS = "list-style-image: url('file:///C:/Users/Public/Pictures/Icons/amo.png');" + MoreCSS;
// oder mit Data-URI
//const CSS = "list-style-image: url('data:image/png;base64,DURCH-BASE64-CODE-ERSETZEN');" + MoreCSS;
try {
CustomizableUI.createWidget({
id: Button_ID,
type: 'custom',
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
let toolbaritem = aDocument.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "toolbarbutton");
let props = {
id: Button_ID,
class: "toolbarbutton-1 chromeclass-toolbar-additional",
label: Label,
tooltiptext: Tooltiptext,
style: CSS,
onclick: "if (event.button == 0) { openTrustedLinkIn('"+Link+"', 'tab'); };"
};
for (let p in props)
toolbaritem.setAttribute(p, props[p]);
return toolbaritem;
}
});
} catch(e) { };
})();Die Datei muss wie üblich in UTF-8 abgespeichert werden; ich hatte das selbst zunächst nicht berücksichtigt und nach dem nicht vorhandenen Fehler im Skript gesucht (beachte in den Kommentaren die Umlaute, die kein ASCII sind).
Ich habe also zusätzlich noch einen Parameter IconPath (als Konstante) angelegt und darin einen Pfad zu einer Datei; wie im Kommentar nachzulesen, muss sich dieser Pfad zur Bilddatei innerhalb des Profils befinden. Wie Sören unten in Beitrag #9 gezeigt hat, könnte man auch direkt das Unterverzeichnis in ProfilePath registrieren (oder sogar weitere Unterunterverzeichnisse, siehe meine Frage in Beitrag #11 und Sörens folgende Antwort), die Variante in meinem Beispiel bietet aber etwas mehr Variabilität.
Innerhalb von const CSS werden dann beide Konstanten genutzt. Statt " + ProfilePath + IconPath + " könnte man aber auch weiterhin einen Absolutpfad – das kann auch ein chrome-URI für ein mit dem Firefox ausgeliefertes Symbol sein – oder einen Data-URI eintragen. MoreCSS ist vor allem sinnvoll für CSS-Filter oder zusätzliche Umrandungen oder einen anderen Hintergrund pro Symbol.
Vorteile:
- Man spart sich die Base64-Kodierung.
- Wenn ich mich nicht irre, verringert das Laden einer Bilddatei den Speicherbedarf.
- Man muss keine Absolutpfade angeben und die Bilddateien befinden sich direkt im Profil, was zusammen die Portabilität erhöht (Testprofile, Sicherungen).
Unabhängig davon hat der Konfigurationsbereich mit Variablen oder Konstanten meiner Meinung nach noch weitere Vorteile:
- Alles, was für jedes Skript individuell zu ändern ist, steht in einem Block sehr weit vorn.
- Allein die Button-ID wird immer mindestens zweimal benötigt (im AnimationToggleButton-Skript immerhin achtmal), was ohne Variable/Konstante die Fehleranfälligkeit bei Änderungen erhöht. Achtung: In einigen Skripten (das AnimationToggleButton-Skript ist ein Beispiel) gibt es einen Bereich mit einer OnClick- oder OnCommand-Funktion, wo die ID weiterhin explizit eingetragen werden muss (wobei man es auf einmal optimieren kann), weil dieser Teil so wie eingetragen in das Browser-DOM eingefügt wird.
- Alles in allem weit geringerer Änderungsaufwand, auch wegen des Wegfalls der Base64-Kodierung.
Wenn es um externe Webseiten geht, besteht das größte Problem nun nur noch darin, das Seitensymbol (Favicon) herunterzuladen und unter Umständen in ein kleineres Format zu konvertieren (in meinem Beispiel amo.png: 
).
