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

  • Firefox-Version
    111.0 (64Bit)
    Betriebssystem
    Windows 10 Version 22H2 (Build 19045.2728)

    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:

    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 :!:

    Leider komme ich nicht weiter,

    daher bitte ich um Hilfe aborix oder BrokenHeart

    Mit <3lichem Gruß

    Mira

    3 Mal editiert, zuletzt von Mira_Belle (21. März 2023 um 13:33) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

  • 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.

    Mit <3lichem Gruß

    Mira

  • 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.

    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.

    Mit <3lichem Gruß

    Mira

  • :/ 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!

    Mir ging es darum: In dem anderen Thread wird ja schon das Thema behandelt, den Button zu verschieben. Mal unabhängig davon, dass das so noch nicht funktioniert, weil das Script offensichtlich bereits läuft, bevor die Erweiterungsschaltfläche verfügbar ist (das Verschieben selbst funktioniert nämlich einwandfrei, wenn man die entsprechende Zeile bei bereits gestartetem Firefox manuell aufruft), habe ich mich gefragt, was der Vorteil deines Ansatzes wäre, einen ganz neuen Button zu erstellen, für den man das Klickverhalten erst selbst implementieren und den vorherigen Button dann ausblenden müsste.

    Ich fragte nur aus Interesse, wieso du diesen Ansatz wählen wolltest. Was mich persönlich betrifft, werde ich sowieso weder in den einen noch den anderen Ansatz tiefer einsteigen, da sich Mozilla bereits im Prozess befindet, Firefox Translations direkt in den Browser zu integrieren, womit eine Script-Lösung, welche auch immer man letztlich verfolgt, eh schon bald wieder obsolet sein wird. Ich investiere einfach nicht gerne Zeit in Dinge, von denen ich bereits weiß, dass sie nicht von Dauer sein werden.

  • 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.

    Mit <3lichem Gruß

    Mira

    2 Mal editiert, zuletzt von Mira_Belle (24. März 2023 um 14:14)

  • @Sören Hentzschel

    Ich habe mal etwas mit

    JavaScript
    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!

    Mit <3lichem Gruß

    Mira

  • Soweit ich das damals verstanden habe, muss meine Zusatzleiste als 1. geöffnet sein, damit sie von nachfolgenden Dingen befüllt werden kann. Der Button, den du erstellen möchtest, greift in eine externe Erweiterung ein, die sicher erst geladen wird, wenn der Firefox "durchgestartet ist". Dann erst greift das Script und dann ists schlicht zu spät um den Button zu erstellen bzw. diesen direkt in die Zusatzleiste zu befördern. Das habe ich mir jetzt abgeleitet und nicht geprüft.... Sören hatte mir ja geantwortet und werde die about:config Einstellung morgen testen.

  • @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. ;)

    Mit <3lichem Gruß

    Mira

  • 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.

    Mit <3lichem Gruß

    Mira

  • Das kann ich bestätigen.

    Ich habe ca. 20 Erweiterungen in der zusätzlichen Leiste und damit keinerlei Probleme.

    Ich nutze dieses Script mit zusätzlichem css (nicht relevant):

    Spoiler anzeigen

    /*-------------------------------------------------------------*/

    /*07new-toolbar_106.css*/

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■WIN■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    Media (-moz-platform: windows-win7),

    (-moz-platform: windows-win8),

    (-moz-platform: windows-win10) {

    #new-toolbar{

    background-color: var(--uc-color-theme-grey)!important;

    border: none !important;

    border-top: 1px solid var(--uc-border-color) !important;

    box-shadow: none !important;

    --toolbarbutton-inner-padding: 6px !important;

    --toolbarbutton-outer-padding: 0px !important;

    overflow: hidden !important;

    bottom: 0 !important;

    height: 0px !important;

    min-height: 0px !important;

    max-height: 0px !important;

    margin-top: -5px !important;

    margin-bottom: 0px !important;

    opacity: 0 !important;

    transition: height .1s linear .1s, min-height .1s linear .1s, ma-height .1s linear .1s, opacity .1s linear .1s, margin-top .1s linear .1s !important;

    }

    #new-toolbar:hover {

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: height .3s linear .1s, min-height .3s linear .1s, ma-height .3s linear .1s, opacity .3s linear .1s, margin-top .3s linear .1s !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar {

    background-color: var(--uc-color-theme-grey)!important;

    max-height: var(--uc-tabs-height) !important;

    box-shadow: none !important;

    overflow: hidden!important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar toolbarbutton .toolbarbutton-icon {

    margin-bottom: -3px !important;

    margin-top: -3px !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar toolbarbutton,

    #new-toolbar .toolbarbutton-1 {

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar .toolbarbutton-1 {

    margin-top: -2px !important;

    }

    #new-toolbar toolbarbutton {

    margin-bottom: -1px !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    :root[customizing] #new-toolbar{

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;/**/

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: none !important;

    }

    :root[customizing] #new-toolbar:hover{

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;/**/

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: none !important;

    }

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■LIN■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    Media (-moz-platform: linux) {

    #new-toolbar{

    background-color: var(--uc-color-theme-grey)!important;

    border: none !important;

    border-top: 1px solid var(--uc-border-color) !important;

    box-shadow: none !important;

    --toolbarbutton-inner-padding: 6px !important;

    --toolbarbutton-outer-padding: 0px !important;

    overflow: hidden !important;

    bottom: 0 !important;

    height: 0px !important;

    min-height: 0px !important;

    max-height: 0px !important;

    margin-top: -5px !important;

    margin-bottom: 0px !important;

    opacity: 0 !important;

    transition: height .1s linear .1s, min-height .1s linear .1s, ma-height .1s linear .1s, opacity .1s linear .1s, margin-top .1s linear .1s !important;

    }

    #new-toolbar:hover {

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;/**/

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: height .3s linear .1s, min-height .3s linear .1s, ma-height .3s linear .1s, opacity .3s linear .1s, margin-top .3s linear .1s !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar {

    background-color: var(--uc-color-theme-grey)!important;

    max-height: var(--uc-tabs-height) !important;

    box-shadow: none !important;

    overflow: hidden!important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar toolbarbutton .toolbarbutton-icon {

    margin-bottom: -3px !important;

    margin-top: -3px !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar toolbarbutton,

    #new-toolbar .toolbarbutton-1 {

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;

    overflow: hidden !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    #new-toolbar .toolbarbutton-1 {

    margin-top: -2px !important;

    }

    #new-toolbar toolbarbutton {

    margin-bottom: -1px !important;

    }

    /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

    :root[customizing] #new-toolbar{

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;/**/

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: none !important;

    }

    :root[customizing] #new-toolbar:hover{

    height: var(--uc-bar-height) !important;

    min-height: var(--uc-bar-height) !important;

    max-height: var(--uc-bar-height) !important;/**/

    margin-top: 0px !important;

    opacity: 1 !important;

    transition: none !important;

    }

    }

    ------------------------------------------------/**//*

    #statuspanel {

    bottom: -23px !important;

    margin-left: 0px !important;

    border: none !important;

    margin-top: -3px !important;

    }

    #statuspanel-label {

    margin-left: 90px !important;

    border: none !important;

    background: transparent !important;

    color: blue !important;

    font-weight: bold !important;

    }

    */

  • @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

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (30. März 2023 um 00:08)

  • Hallo Mira_Belle,

    das Probl. ist komplizierter als du denkst,

    verschieben und clonen mit FFeigenen Buttons mit .js ist relativ einfach.

    bei Ext. verhält sich das aber durchaus anders.

    Als Beisp. dieser Link:

    Doesbaddel
    26. November 2022 um 20:27

    Edit:

    Die Lsg. ist hier.:

    Ich hoffe du kommst damit weiter.

    Einmal editiert, zuletzt von Mary-J. (30. März 2023 um 00:44)

  • Hallo Mira_Belle,

    das Probl. ist komplizierter als du denkst,

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

    Edit:

    Die Lsg. ist hier.:

    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.

    Mit <3lichem Gruß

    Mira

  • Zitat

    Denn es müsste erst das Klickverhalten implementieren werden, und da steige ich dann definitiv aus.

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

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

  • 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:

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

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

    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.

    Mit <3lichem Gruß

    Mira