JavaScript erlernen. Übungen mit "Firefox Translate" aus der URL-Leiste

Eigentlich wollte ich in diesem Beitrag: https://www.camp-firefox.de/forum/thema/136122/ von Boersenfeger nur helfen,

doch es kam anders!

Ich wurde gebeten einen neuen, eigenen Thread aufzumachen, was ich hiermit getan habe.

Also, habe es geschafft einen Button für das Vorhaben zu "erschaffen".

Was mir jedoch nicht gelingen will, dass bei Betätigen eben die richtige Aktion ausgelöst wird

Werde mich weiter darum bemühen.

Das Icon in der Adresszeile ließe sich ja dann per CSS ausblenden.

Hier mal der bisherige Stand:

(function() {

    if (location.href !== AppConstants.BROWSER_CHROME_URL) return;
    try {
       CustomizableUI.createWidget({
          id: 'link-button-Translations',
          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 currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");  // Pfadangabe zum Profilordner
             let buttonicon = "translation-color.svg"  // Name & Dateiendung des anzuzeigenden Symbols
             toolbaritem.onclick = event => onClick(event);
             var props = {
                id: 'link-button-Translations',
                class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                removable: 'true',
                label: 'Quicklink: Firefox Translations',
                accesskey: '',
                tooltiptext: 'Firefox Translations',
                style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
                onclick: 'if (event.button == 0) { \ openTrustedLinkIn("about:about", "tab");\ }; '

            };            
            for (var p in props)
            toolbaritem.setAttribute(p, props[p]);            
            return toolbaritem;
         }      
      });
   } catch(e) { };
}) ();

Und das Symbol (Icon):

icons.zip

Bin nun einen klitzekleinen Schritt weiter!

Habe mit den Browser-Werkzeugen den Button "Firefox Translations" untersucht.

Dabei fiel mir die Schaltfläche event auf.

Also draufgeklickt und da wird etwas angezeigt.

Da steht click!

Also wird da auf ein JavaScript verwiesen.

Dieses habe ich dann mal "extrahiert" und als Test.us.js in meinem Scriptordner gespeichert.

Nun wieder zu dem oben gezeigten JavaScript!

Ich dachte mir schon, dass ich mit dem onklickgedöhns etwas machen muss!

Hab' ich auch!

Und funktioniert auch so weit, aber ...

es tut sich nichts, wenn das Test.us.js -Script durch einen klick aufgerufen wird

(function() {
   if (location.href !== AppConstants.BROWSER_CHROME_URL) return;
   try {
      CustomizableUI.createWidget({
         id: 'link-button-Translations',
         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 currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");  // Pfadangabe zum Profilordner
            let buttonicon = "translation-color.svg"  // Name & Dateiendung des anzuzeigenden Symbols
            toolbaritem.onclick = event => onClick(event);
            let props = {
               id: 'link-button-Translations',
               class: 'toolbarbutton-1 chromeclass-toolbar-additional',
               removable: 'true',
               label: 'Quicklink: Firefox Translations',
               accesskey: '',
               tooltiptext: 'Firefox Translations',
               style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
//               onclick: 'if (event.button == 0) { \ openTrustedLinkIn("about:about", "tab");\ }; '
            };            
            for (var p in props)
               toolbaritem.setAttribute(p, props[p]);            
            return toolbaritem;
         }      
      });
   } catch(e) { };

   function onClick(event) {
      if (event.button != 0) { return; }
 
      var dir = Services.dirsvc.get('ProfD', Ci.nsIFile).path.replace(/\\/g, "/");
      dir.append('Test.uc.js');
      dir.launch();

   }

}) ();

Leider komme ich nicht weiter,

daher bitte ich um Hilfe aborix oder BrokenHeart

Zitat von Sören Hentzschel

Wozu? Wenn du den Button einfach nur verschiebst (siehe anderer Thread), musst du auch nichts neu implementieren, was längst vorhanden ist.

Ich denke, Du meinst es nur gut, aber da ich von JavaScript selber so gar keine Ahnung habe,

kann ich auch mit Deinem Code nicht wirklich etwas anfangen!

Ich habe also keine Ahnung, ob ich eines von beiden Scripten hier verwenden kann,

geschweige denn, wenn Dein Code da nur reingebastelt werden könnte, wo und wie.

Was ich kann, ich kann ein vorhandenes JavaScript lesen und ein klein wenig nachvollziehen, was da passiert.

Hier und/oder da, ist es mir auch möglich ein solches JavaScript ein kleines bisschen zu verändern,

das war es aber auch schon.

Ich habe mit Boersenfegers #1 Script etwas gebastelt (versucht).

Jedoch hat sich meine Vermutung, dass sich Schaltflächen erzeugt von Erweiterungen anders verhalten

als selbst erstellte für mich bestätigt.

Hier das von mir veränderte JavaScript.

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

  var css = `
    #new-toolbar {
        height: 28px; 
        direction: rtl;
         -moz-window-dragging: drag;
        /* border-top: 1px solid black !important; 
        background-color: rgba(0,0,0,0) !important;
        color: black !important; */
    }
    
    #statuspanel {
        bottom: 0px !important;
        left: 5px !important;
        height: 24px !important;
        max-width: 75% !important;
        transition: none !important;
    }
    
    #statuspanel-label{
        background:#7598ff!important;
        border: none !important;
        font: 17px Arial Rounded MT Bold !important;
        font-weight: normal !important;
        color: white !important;
    }
  `;

  var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
  var tb = document.createXULElement('toolbar');
  tb.id = 'new-toolbar';
  tb.setAttribute('customizable', true);
  tb.setAttribute('mode', 'icons');
  tb.setAttribute("context", "toolbar-context-menu");
  var vbox = document.createXULElement('vbox');
  document.getElementById('navigator-toolbox').parentNode.parentNode.insertBefore(
    vbox, document.getElementById('browser-bottombox'));
  vbox.style.backgroundColor = '#ffe4c4';
  vbox.appendChild(tb);

  CustomizableUI.registerArea('new-toolbar', {legacy: true});
  CustomizableUI.registerToolbarNode(tb);

// Schaltfläche in der Adressleiste finden
const pageActionButton = document.getElementById('pageAction-urlbar-firefox-translations-addon_mozilla_org');

// Toolbar finden
const navBar = document.getElementById('new-toolbar');

// Eine neue Schaltfläche erstellen, die der ursprünglichen Schaltfläche entspricht
const newButton = pageActionButton.cloneNode(true);

// Neue Schaltfläche in die Toolbar einfügen
 navBar.appendChild(newButton);

})();

setTimeout(function () {
  if (window.__SSi == 'window0') {
    return;
  }
  let tabbar = document.getElementById('TabsToolbar');
  let tab = gBrowser.selectedTab;
  tabbar.style.display = '-moz-box';
  duplicateTabIn(tab, 'tab');
  gBrowser.moveTabTo(gBrowser.selectedTab, tab._tPos);
  gBrowser.removeTab(tab);
  tabbar.style.display = '';
}, 1500);

Kurze Erklärung dazu.

Es wird anhand der id der Button gesucht.

Danach wird eine neue Schaltfläche in der Leiste am unteren Fensterrand erzeugt.

Und dann soll eine Kopie des gesuchten Buttons in die neue Schaltfläche eingefugt werden.

Das funktioniert auch alles mit all den selbst erstellten Buttons,

ja auch mit den Buttons in der Navbar (Home, Vor, Zurück und Reload).

Wenn nun aber ein Button wie z.B. von uBlock, MySession, Morning Coffe Quantum oder eben auch jener von Firefox Translation

per id genommen wird, verhalten diese Schaltflächen sich anders.

Entweder entsteht erst gar kein Button, oder wenn doch, sind diese dann per rechts Klick ohne Funktion.

Die erstgenannten (uBlock, MySession & Morning Coffe Quantum) sind per se verschiebbar und lassen sich

optisch kopieren, sind dann wie beschrieben ohne Funktion.

Firefox Translation (id='pageAction-urlbar-firefox-translations-addon_mozilla_org'), nicht verschiebbar,

lässt sich erst gar nicht "clonen" (kopieren).

Man müsste herausfinden, wie diese Schaltflächen nicht nur eindeutig zu identifizieren sind,

sondern wie man sie auch "packen" (greifen) kann.

Ich sah da keinen allzu großen Unterschied darin.

Jedoch habe ich ja feststellen müssen, dass auch das Kopieren der Schaltfläche inkl. deren Funktion nicht so einfach zu realisieren ist (für mich!)

Wenn es mit einem eigenen Button geklappt hätte, der frei verschiebbar gewesen wäre, wäre es auch möglich gewesen,

diesen in die "Boersenfeger's Leiste" zu schieben.

Das war in dem anderen Thread, in Boersefeger's Thread, nicht gewünscht.

Deshalb hatte ich mich auch hier noch ein Mal mit "seinem JavaScript beschäftigt!

Dass Mozilla nun Firefox Translations in den Browser integrieren möchte/wird, wusste ich ja nicht.

Und Du hast recht, das macht mein Bemühen absolut überflüssig!

Aber nun mal eine ganz theoretische Frage.

Müsste man, damit es funktioniert, ein Skript erstellen, dass den Aufruf des "eigentlichen" Script verzögert?

Oder kann die "Zeitschleife" auch direkt gleich an den Anfang des Skripts?

Es geht mir nur ums Verständnis und um "lernen".

Die Frage, die mir gerade durch den Kopf geht, es hätte also durchaus funktionieren können?

Habe das Ganze ja auch mit uBlock probiert und da wurde ein Button auf der Leiste generiert,

nur war diese ohne Funktion.

Wenn ich Dich also richtig verstanden habe, wurde das Skript einfach nur zu schnell abgearbeitet

und zwar schneller als der komplette Code von z.B. uBlock,

weshalb zwar das Icon kopiert werden konnte, aber die eigentlichen Funktionen nicht.

@Sören Hentzschel

Ich habe mal etwas mit

Zeile 5:    setTimeout(function() { ....
Zeile 63:   }, 5000);

herum experimentiert und an den verschiedensten Stellen in das JavaScript ein gefügt.
Ging alles in die Hose,
nie erschien der Button in der "Zusatzleiste"!

Ich schleiße nun dieses Experiment ab,
aber es wäre doch sehr nett, wenn Du mir erklären könntest, warum es auch mit
dieser "Verzögerung" einfach nicht gelingen will.
Möchte ja nicht dumm streben!

Zitat von Sören Hentzschel

Ich habe keine Möglichkeit, Scripts bei Programmstart zu testen, daher beschränken sich meine Script-Tests immer auf die Ausführung über die Konsole.

OK, danke.

@Boersenfeger

Ich bin mir jetzt nicht so ganz sicher, ob wir mal wieder aneinander vorbei "reden"?

Aber, wenn ich es so interpretiere, Firefox "laden", Leiste "laden", "Button" kopieren und in Leiste laden,

hast Du sicherlich recht.

Denn egal wie "groß" ich auch die Verzögerung eingestellt habe, es funktionierte nicht!

Also das Kopieren des "Buttons" samt Funktion.

Die Leiste startete schon recht früh ohne Probleme und andere "Buttons" samt Funktion klappten ja!

Nur eben keine, die von Erweiterungen angelegt wurden.

Bin aber mal gespannt, was Du aus dem Hut zauberst.

Und ich habe schon wieder etwas missverstanden!

Das Ganze wird erst in Zukunft, also in der v. 113 oder so Final werden,

oder halt schon in der Nightly.

Dir auch eine Gute Nacht.

@2002Andreas & @Mary-J.

Ihr beiden habt aber mit Sicherheit einfach die Buttons der Anwendungen da hinverschoben.

Richtig?

Denn wenn ich das so mit der Leiste von "Boersenfeger" so gemacht habe, z.B. uBlock, funktionierte dies auch wunderbar.

Jedoch wenn per JavaScript der Button inkl. seiner Funktionen dorthin kopiert werden sollte,

erschien zwar das Symbol, jedoch ohne die Funktionen, die ein Linksklick normalerweise auslösen sollte.

Und warum Kopieren?

Na versucht doch ein Mal, die Schaltfläche von Firefox Translate aus der Adresszeile (Urlbar) zu lösen.

Ansonsten bin ich bei Euch, wie geschrieben, funktioniert DAS mit allen verschiebbaren Buttons

aller von mir genutzten Erweiterungen.

Aber nur aus Interesse, wenn mir jemand eine Lösung anbieten könnte, wäre das für mich wirklich sehr interessant und würde meine JavaScript-Fähigkeiten doch ein wenig erweitern.

Wenn ich daran denke, dass ich mit JavaScript bis vor einigen Monaten noch so gar nichts am Hut hatte,

bin ich schon ein kleines bisschen stolz auf mich.

Nur so eine kleine Überlegung!

Eventuell ließe sich das Problem ja auch umgehen, wenn der Kopiervorgang in ein eigenes Skript ausgelagert werden würde,

welches zeitversetzt erst dann aufgerufen wird, wenn der Firefox komplett mit all seinen Erweiterungen geladen ist.

Aber das ist dann doch eine Hausnummer zu groß für mich, und nur zu Übungszwecken?

Weiß nicht, vielleicht, vielleicht auch nicht.

Ach @Mary-J.

Wenn Du Dir den Quellcode weiter oben genau anschaust, wirst Du feststellen,

dass dieses genau auf dem von Dir verwendeten aufbaut.

Es wurde z.B. von Boersenfege der CSS-Code integriert, was Du genau auf die gleiche Weise machen könntet,

damit alles für die Leiste beisammen ist.

Wenn Du das machen möchtest, verwende aber besser das JavaScript aus => #1

Zitat von Mary-J.

Hallo Mira_Belle,

das Probl. ist komplizierter als du denkst,

Denke nicht. Ich bin mir bewusst, dass es sehr kompliziert ist.

Zitat von Mary-J.

Edit:

Die Lsg. ist hier.:

Beitrag

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

[…]

(Quelltext, 37 Zeilen)

jizz

5. Dezember 2022 um 12:11

Ich hoffe du kommst damit weiter.

Danke, darüber bin ich auch schon ein Mal gestolpert, aber dafür reichen meine JavaScript-Kenntnisse

einfach nicht, noch nicht aus.

Eventuell kapiere ich das auch nie.

Aber ich meine erkennen zu können, dass dieser Ansatz in diesem Fall Firefox Translate

so nicht funktionieren wird.

Denn es müsste erst das Klickverhalten implementieren werden,

und da steige ich dann definitiv aus.

Daran scheiterte ja auch schon das Erstellen eines Buttons mit den Eigenschaften und Funktionen.

Den man dann hätte einfach auf die Leiste hätte verschieben können.

Tja, so ist es halt.

Das ganz dient ja nur noch zur Übung und ist mir auch nicht mehr so wichtig.

Zitat von Mary-J.

Das ist jetzt eigentlich schon peinlich, zum Fremdschämen..

Ich glaube, du weißt einfach nicht mehr wovon du redest...

Dann kläre mich auf!

So wie ich das sehe ist das:

(function () {
  if (location.href !== 'chrome://browser/content/browser.xhtml') 
  return;
   setTimeout(() => {
     const orig = document.getElementById('saveforreadlater_gmail_com-menuitem-_saveIt');
    const ref = document.getElementById('context-take-screenshot');
    contentAreaContextMenu.insertBefore(orig, ref.nextSibling);
                      }, 20000);
              }
)
();

das JavaSript, das nur beim ersten Aufruf funktioniert. Richtig?

Und jenes ist das, was jizz als Lösung vorschlägt:

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

    const ref = document.getElementById('context-take-screenshot');
    if (ref) {
        ref.after($C('menuitem', {
            label: "Save all pages for read them later",
            oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem - _saveItAll").click(event);'
        }));
        ref.after($C('menuitem', {
            label: "Save this page for Read Later",
            oncommand: 'event.target.parentNode.querySelector("#saveforreadlater_gmail_com-menuitem-_saveIt").click(event);'
        }));
    }
    var style = "data:text/css;charset=utf-8," + encodeURIComponent(`
        #contentAreaContextMenu [id^="saveforreadlater_gmail_com-menuitem"] {
            display: none;
        }
    `);

    windowUtils.loadSheetUsingURIString(style, windowUtils.AUTHOR_SHEET);

    function $C(tag, attrs) {
        var el;
        if (!tag) return el;
        attrs = attrs || {};
        el = document.createXULElement(tag);
        if (attrs) Object.keys(attrs).forEach(function (key) {
            el.setAttribute(key, attrs[key]);
        });
        return el;
    }
})()

Und ich sehe da, dass da das Klickverhalten definiert wird, daher kam ich darauf, dass ich das nicht verstehe.

Aber auch wenn ich total daneben liege, schrieb ich schon, dass ich im Grunde von JavaScript einfach noch nicht

genug verstehe, um mit diesem Script wirklich etwas anfangen zu können.

Gute Nacht.