Button ändern bei einem Skript

geldhuegel

Ich verwende folgendes Skript (von aborix?), das für den Button einen Base64 Code enthält:

JavaScript

/* aboutabout_ToolbarButton.uc.js */
//  aboutabout-button.uc.js
  
  (function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'aboutabout-ToolBarButton',
            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: 'aboutabout-ToolBarButton',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'About:About',
                    tooltiptext: 'About:About',
                    style: 'list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAACcPAAAnDwGrs%2B%2FJAAAAB3RJTUUH1AwRDyUGYuIbjQAAAwRJREFUOMuFkV1rWwUAhp%2BTnnNyPpOsbjVZsSC6sVHY1hXZ1RiIon%2FAC7%2BmF16Jv2RjwnDTXfiBoHUoanQLrDpvhMKgiHajq7NN89E0aU6bpM35zDnJOV5YpmMXPnfvzcPL%2BwoAFy9%2BPh4nPB3HcT6Oh4U4Jm%2FoSkHTtbyiyAVZlvOSLOYdx3V%2BujX%2F2tzc1dvsI1y%2B%2FNV7x6afeT%2BbMSVFVdDUNIqiMIpHhGFEGIYMwoixVIqG43Ll65uN%2B1370nZ57Vqw8E0g3Cgt9E%2FNHDdr9SbBICQMI6IoIkl4hPstC236CAefyLO49CfFYrFU%2B%2FLSK6m0LJqO4xEEIfVala3WJrqmYegaVrvJtSsXWL67SM12mDhUwB9EjOKEzPihl0mNnUulhARVkdF0jbkvPuZW6XsUJY2ma%2Bz2djhz5jQvvXiWqYkD%2FHZvlXsra1TrG3St1oB4NC4igKKkMXQDSRRRNQ1VVZEkGV03mDlxhEqlwrBapqNO8nt9i85W02%2F%2FemMBuCNG0RAhJaLrGrphYJomuq4hSTJpWeKTTz%2Fj2PGTvHH%2BHXIZgzfPv11bunn9AjAPrIuDcISQGkPXVQQgk8lgGBqiKJHNZZl4cpITJ2cwDB0vCEmGowgoAk2AVBAMIIkxNYmppw7T2Wkhjf2TTT1NLmOQyyiYmoTtOAxHw0feET0%2FIApD5GyaQiHP7Ows3%2F7wHTsHpqh3XTpDjeclEVkWsPsuw%2BFjAh%2FH9TBNheXlFYIgoDc5zQtnn%2BOw5bGo6hSXNzl9KqJvO48LfM%2FHdnyyXsirr7%2BF67r8aEW0dny6uzau51Hd3KbXc%2Bh0domiMAGSfwV%2BgG17eEHEs0enASgVb7P4xwq247Be3eBgHDH%2Fyx3Kq38l9Vp5A%2FAfClzPGz5YrYjt7Q6eH%2BC6HnnX5uelu%2FQTkqDd9MWg53xQut5rtxtrltX4ENh7KKitlz9ybOdd294Lt62mY7Wbvf5et9Xv71Z6PetBGA7WK1Dfv60DuP%2FdQABk4ByQAxrAJtDdrznif%2FgbTgGEQikOjI8AAAAASUVORK5CYII%3D)',
                    onclick: 'if (event.button == 0) { \
                                        openTrustedLinkIn("about:about", "tab");\
                                 }; '
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
   
})();

Alles anzeigen

Kann man das ändern und statt dessen auf eine Datei zugreifen? Würde mir jemand von den Skript-Könnern die dafür notwendigen Zeilen einbauen?

Vielen Dank.

Mitleser

JavaScript

// JavaScript Document
//  MyLinkButton.uc.js
  (function() {
// start config----------------------------------

let buttonIcon = "16_checkbox-circle_white.svg" // Name & Dateiendung des anzuzeigenden Symbols
let buttonPath = "/chrome/css/image/" // Pfad zum Ordner der das Icon beinhaltet

// end config-----------------------------------
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
       try {
          CustomizableUI.createWidget({
             id: 'aboutabout-ToolBarButton',
             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: 'aboutabout-ToolBarButton',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: 'true',
                   label: 'About:About',
                   accesskey: '',
                   tooltiptext: 'About:About',
                   style: "list-style-image: url('" + PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)) + buttonPath + buttonIcon + "');",
                   onclick: 'if (event.button == 0) { \
                            openTrustedLinkIn("about:about", "tab");\
                            }; ' 
               };            
                for (var p in props)
                   toolbaritem.setAttribute(p, props[p]);            
                return toolbaritem;
              }      
          });
        } catch(e) { };
})();

Alles anzeigen

2002Andreas

Zitat von geldhuegel

die dafür notwendigen Zeilen einbauen?

Weitere Möglichkeit:

JavaScript

/* aboutabout_ToolbarButton.uc.js */
//  aboutabout-button.uc.js
  
  (function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'aboutabout-ToolBarButton',
            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: 'aboutabout-ToolBarButton',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'About:About',
                    tooltiptext: 'About:About',
                    style: 'list-style-image: url(file:///C:/Users/Andi/Icons%20Firefox/4.jpg)',
                    onclick: 'if (event.button == 0) { \
                                        openTrustedLinkIn("about:about", "tab");\
                                 }; '
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
   
})();

Alles anzeigen

In Zeile 20 den genauen Pfad angeben.

In meinem Beispiel sieht das dann so aus:

Und hier dein Icon als .png zum Download:

Mira_Belle

Und eine weitere hätt' ich auch noch beizutragen.

JavaScript

// JavaScript Document
// QuickLinkButton-cf.uc.js
// Source file https://www.camp-firefox.de/forum/thema/135613-quicklink-button/?postID=1213791#post1213791
(function() {
   if (location.href !== 'chrome://browser/content/browser.xhtml') return;  
   try {
      CustomizableUI.createWidget({
         id: 'link-button-about',
         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: 'link-button-about',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Quicklink: about:about',
               tooltiptext: 'Quicklink:\nabout:about',
               onclick: 'if (event.button == 0) { \ openTrustedLinkIn("about:about", "tab");\ }; '
            };            
            for (var p in props)
            toolbaritem.setAttribute(p, props[p]);            
            return toolbaritem;
         }      
      });
   } catch(e) { };
   let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons')); // Pfad zum Profilordner und gleich in den entsprechenden Unterordner
   let ButtonIcon = "firefox-logo.svg"; // Name & Dateiendung des anzuzeigenden Symbols!
   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(`
      #link-button-about { list-style-image: url("${ProfilePath}/${ButtonIcon}") }
      #link-button-about.toolbarbutton-1.chromeclass-toolbar-additional image.toolbarbutton-icon {
         width: 30px !important;
         height: 30px !important;
         fill: #f1b508 !important;
         fill-opacity: 1 !important;
         }
      `), null, null);
   sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
})();

Alles anzeigen

geldhuegel

Du hast die Wahl, welchen Weg Du nach Rom nimmst.

milupo

Noch ein Weg nach Rom, eine Variante von Andreas' Weg. Kurze Pfadangabe in Zeile 20:

JavaScript

/* aboutabout_ToolbarButton.uc.js */
//  aboutabout-button.uc.js
  
  (function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'aboutabout-ToolBarButton',
            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: 'aboutabout-ToolBarButton',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'About:About',
                    tooltiptext: 'About:About',
                    style: 'list-style-image: url("..//icons/4.jpg")',
                    onclick: 'if (event.button == 0) { \
                                        openTrustedLinkIn("about:about", "tab");\
                                 }; '
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
   
})();

Alles anzeigen

Die kurze Pfadangabe funktioniert aber nicht immer. Sowohl die Version von Andreas als auch die auf seiner Version basierende Version von mir setzen voraus, dass das Skript im Ordner chrome (also wie immer) ist und es darin einen Unterordner icons gibt, der die Grafik enthält.

milupo

Ach, Mensch, habe ich es doch wieder geahnt.

geldhuegel

Heissa Juchei! Ich danke euch Allen. Ich werde mal studieren um daraus zu lernen.

Ich habe vorhin schon mal probiert. Zeile 20 entfernt und dort aus dem Mira_Belle Skript bzgl. zweites Profil den entsprechenden Part eingefügt. Das hat aber nicht funktioniert. Ihr Beispiel zeigt, dass ich es am Ende hätte hinzufügen müssen.

Dass man statt des Base64 dort auch einfach den Pfad zu einer Datei angeben kann hätte ich gar nicht gedacht.

Und jetzt macht den PC aus und widmet euch euren Partnern oder anderen schönen Sachen.

milupo Was hast du geahnt?

milupo

Zitat von geldhuegel

Was hast du geahnt?

Dass der relative Pfad nicht funktioniert. Denn so ist es bei mir.

Mira_Belle

geldhuegel

Wenn ich ehrlich bin und Du eine ganz normale Grafik verwenden willst,

also ein png oder jpg, dann würde ich Dir das Skript von 2002Andreas ans legen.

Einfach und überschaubar.

Möchtest Du aber eine Vektorgrafik verwenden, na dann ....

Da kannst Du die Größe und die Farbe bestimmen.

Wenn Du ein Skript angepasst haben möchtest, weil z.B. etwas nicht so recht klappt,

dann frag einfach, wir alle helfen Dir ja gerne.

2002Andreas

Zitat von milupo

Sowohl die Version von Andreas..setzen voraus, dass das Skript im Ordner chrome (also wie immer) ist

Sollte ich dich falsch verstanden haben, dann sorry.

Wenn der genaue Pfad angegeben wird, dann ist es egal in welchem Ordner das Skript liegt.

Mira_Belle

Hä?

Nur für meine Gedanken!

Einem JavaScript ist es erst einmal völlig egal, wo es abgespeichert ist.

Wichtigste Voraussetzung ist, damit es funktioniert, es muss richtig eingebunden sein!

Dafür haben "wir" ja die userChrome.js.

Damit aber auch Symbole, bzw, Grafiken genutzt werden können, muss immer genaue der Pfad angegeben werden!

Das kann auf verschiedenen Wegen geschehen.

Man kann ganz "klasisch" den genauen Pfad angeben, z.B. so => list-style-image: url(file:///C:/Users/Andi/Icons%20Firefox/4.jpg)

Oder man verwendet Variablen im Skript und in den Pfadangaben.

z.B. let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");

wobei let ProfilePath die Variable ProfilePath für das Skript definiert und

Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/" dann den Pfad zum Profilordner "berechnet".

Daraus würde sich dann style: 'list-style-image: url("' + ("file:" + ProfilePath + "4.jpg") +'");' ergeben.

Gleiches gilt für let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir ));.

PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir "berechnet" den Pfad zum Profilordner.

style: "list-style-image: url('" + PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir)) + "4.jpg" + "');",

Weiterhin gibt es noch die Möglichkeit per CSS im Skript, s.o., das ganze zu kombinieren.

Und es gibt dann noch weitere Möglichkeiten, z.B. wenn der Ordner in dem die Grafiken sich befinden,

eben mithilfe einer anderen "Windows-Variable" erreichbar wäre,

aber das spreng jetzt hier den Rahmen.

Am besten ist es, finde ich jedenfalls, der Ordner befindet sich im Profil und da unterhalb des Ordners chrome.

geldhuegel

Leider habe ich heute kaum Zeit für das Thema. Vorab jedoch folgendes:

Das Skript von Mitleser funktioniert bestens. Jedoch möchte ich den Button in 62x32 px und nicht Standard.

Mira_Belle funktioniert auch. Nach Änderung der Größenangaben habe ich den Button wie gewünscht.

2002Andreas habe ich seinen Pfad durch meinen ersetzt. Das ergibt jedoch nur einen Platzhalter, kein Bild.

Aber nun muss ich mich um andere Dinge kümmern. Nochmals vielen Dank für das großartige Echo auf meine Anfrage.

2002Andreas

Zitat von geldhuegel

habe ich seinen Pfad durch meinen ersetzt.

Dann bitte den Pfad mal ganz genau überprüfen, das muss funktionieren.

Zitat von geldhuegel

nun muss ich mich um andere Dinge kümmern.

Das reale Leben geht immer vor

milupo

Zitat von 2002Andreas

Sollte ich dich falsch verstanden haben, dann sorry.
Wenn der genaue Pfad angegeben wird, dann ist es egal in welchem Ordner das Skript liegt.

Das schon, aber wir haben doch hier eine Konvention, dass wir empfehlen, für die Grafiken einen Unterordner icons im Ordner chrome des Profils zu nutzen. Das meinte ich. Jeder kann natürlich seine Grafiken sonst wohin schieben. Ich denke, es sollte eine Konvention geben.

Mitleser

Was denn nun A oder B?

A.

Zitat von milupo

wir haben doch hier eine Konvention, dass wir empfehlen, für die Grafiken einen Unterordner icons im Ordner chrome des Profils zu nutzen

(Link wäre hilfreich)

oder

B.

Zitat von milupo

Ich denke, es sollte eine Konvention geben

Warum meinst du das? Eine Begründung wäre schön.

milupo

Zitat von Mitleser

Warum meinst du das? Eine Begründung wäre schön.

Um Anfänger nicht zu verwirren. Auch Anfänger nutzen Skripte. Ich bin immer für eine einheitliche Linie. Und für eine vollständige Pfadangabe mag das unerheblich sein, aber für eine relative Pfadangabe, wie ich sie angeboten habe sollte man darauf schon achten. Was jeder privat macht ist seine Sache, aber als Helfer sollten wir schon eine Orientierung geben. Anpassen kann dann auch noch jeder selbst.

Horstmann

Zitat von Mitleser

Zitat von milupo

wir haben doch hier eine Konvention, dass wir empfehlen, für die Grafiken einen Unterordner icons im Ordner chrome des Profils zu nutzen

(Link wäre hilfreich)

Zitat von milupo

Ich denke, es sollte eine Konvention geben

Warum meinst du das? Eine Begründung wäre schön.

Es ist eher eine Art Gewohnheit, irgendwo müssen die Icons ja hin, und das wird halt öfters benutzt.

Kann jeder machen wie er will; wer sich mit Scripts rumplagt, schafft es vermutlich auch noch einen Ordnernamen oder Dateipfad anzupassen.

BrokenHeart

Zitat von milupo

Ich denke, es sollte eine Konvention geben.

Genau das hatte ich mir auch schon überlegt . Das Base64-Format hat ja nur wirklich den einzigen Vorteil, dass das Skript dann sofort "Ready-To-Use" ist, aber ist eben auch mit etlichen Nachteilen behaftet: Performance, Unübersichtlichkeit, etc. .

Das Ermitteln des aktuellen Profilpfades und die Angabe eines Standard-Verzeichnisses für Icons/Images im 'chrome'-Pfad wären sicher die beste Lösung (z.B. 'icons' oder 'images'), so wie Mira_Belle es in #11 beschrieben hat. Man könnte dann dieses Standard-Verzeichnis auch schon in die Zip-Datei für das Einrichten der User-Skripte mitaufnehmen. Also ein Bilder-Verzeichnis, auf dessen Vorhandensein man sich verlassen kann. Ergänzend könnte man in dem Verzeichnis für die Bilder auch schon ein Universal-Standard-Icon mit dazu packen (keine Weltkugel!!!! ), damit wenigstens etwas angezeigt wird....

So als Idee...

.

2002Andreas

Zitat von milupo

für die Grafiken einen Unterordner icons im Ordner chrome des Profils zu nutzen

Kann man doch auch machen.

Dann eben der genaue Pfad zum Ordner Icons im Ordner chrome.

Code

file:///C:/Users/Andi/AppData/Roaming/Mozilla/Firefox/Profiles/x9uzmnty.Test ohne/chrome/Icons/Hilfe8.png

Und das Skript ist dabei im Ordner Skripte

Dharkness

Zitat von Mira_Belle

Und eine weitere hätt' ich auch noch beizutragen.

Hm, welche Variante ist das, die die bei mir nicht funktionieren sollte, oder die die funktioniert, oder ist es ein Glücksspiel?

P.S.:

Ja, das Script funktioniert hier ohne Probleme.

Button ändern bei einem Skript

Ähnliche Themen

Skript für Add-ons Update - Pfad zum Icon ändern

Auto Reload Skript per neuen Skript stoppen/aktivieren

Rechtsklick auf ein Icon von einem Skript ändern

Hintergrund für Anwendungsmenü-Button ändern

Skript für Add-ons Update

Youtube Wiedergabegeschwindigkeit ändern