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

Der alte Titel dieses Threads:

Aus Firefox Translate aus der URL-Leiste einen eigenständigen und verschiebbaren Button machen.

Wieder nur Aufzeichnungen meiner Gedanken, um später daran anknüpfen zu können.

(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;
  }
})()

Was passiert da? Die Erklärung Zeile für Zeile.

Zitat von ChatGPT

Die erste Zeile definiert die anonyme Funktion und öffnet eine Klammer. Der Funktionskörper beginnt hier.

Die nächste Zeile prüft, ob die aktuelle URL 'chrome://browser/content/browser.xhtml' ist. Wenn dies nicht der Fall ist, wird die Funktion mit der Rückgabe beendet.

Wenn die URL korrekt ist, wird der Code fortgesetzt.

In der nächsten Zeile wird das DOM-Element mit der ID "context-take-screenshot" gesucht und in der Variable "ref" gespeichert.

In den nächsten Zeilen wird eine Bedingung geprüft, ob das "ref"-Element existiert. Wenn ja, werden zwei neue Menüpunkte erstellt, die dem "ref"-Element nachfolgen.

Der erste neue Menüpunkt hat das Label "Save all pages for read them later" und der oncommand-Handler setzt eine Funktion, die durch ein Klicken auf diesen Menüpunkt aufgerufen wird.

Der zweite neue Menüpunkt hat das Label "Save this page for Read Later", und der oncommand-Handler ruft auch eine Funktion auf, die durch ein Klicken auf diesen Menüpunkt aufgerufen wird.

Die Funktionen werden nicht direkt im Skript definiert, sondern sie rufen bestimmte Funktionen aus dem DOM auf, um das Speichern von Webseiten zu ermöglichen.

In der nächsten Zeile wird eine Variable "style" erstellt, die einen String mit CSS-Code enthält. Der CSS-Code versteckt alle Menüpunkte, die mit der ID "saveforreadlater_gmail_com-menuitem" beginnen, in der rechten Maustaste-Kontextmenüleiste.

Die Funktion "$C" wird in der letzten Zeile definiert. Sie wird verwendet, um ein neues XUL-Element zu erstellen und seine Attribute zu setzen. Es wird ein XUL-Element erstellt, das dem Tag-Namen in der Variablen "tag" entspricht. Die Funktion kann auch Attribute für das Element setzen, die in der Variablen "attrs" definiert sind.

Zum Schluss wird die Klammer geschlossen, um die anonyme Funktion zu beenden, und die Funktion wird sofort aufgerufen, da sie in Klammern eingeschlossen ist.

Alles anzeigen

Fragen.

Was ist ein DOM-Element?

Es wird durch oncommand-Handler eine Funktion gesetzt!

Wie Setze ich das in "meinem" Problem um?

Die Funktionen werden doch im DOM bestimmt!

Ist mit dem DOM-Element etwa die Erweiterung gemeint?

Zitat von Sören Hentzschel

DOM = Document Object Model, vereinfacht gesagt die Baumstruktur der HTML-Elemente. Mit dem DOM-Element ist demnach das entsprechende HTML-Element gemeint.

Wenn du das fragen musst, ist der zitierte Text wohl nicht von dir. Bitte die Quelle im Zitat verlinken.

Habe ich erledigt!

Zitat von Sören Hentzschel

Zitat von Mira_Belle

Es wird durch oncommand-Handler eine Funktion gesetzt!

Wie Setze ich das in "meinem" Problem um?

Die Funktionen werden doch im DOM bestimmt!

Ich denke nicht, dass du ein menuitem-Element erstellen möchtest? Zumindest ging es hier bislang nicht darum. Daher kannst du oncommand vergessen. Mir fehlt generell der Zusammenhang, was der Code jetzt mit dem ursprünglichen Problem zu tun haben soll.

Ich verstehe das ganze Skript (noch) nicht!

Und wie und wo da der Zusammenhang sein soll, musst Du Mary-J. fragen,

die hat auf diesen Code verwiesen.

Wenn ich das richtig verstanden habe, steckt da wohl die Lösung drin, einen Button einer Erweiterung

erst dann zu "bearbeiten", in meinem Fall kopieren, wenn das Element der Erweiterung auch geladen ist.

ABER, ich kann mich auch irren, und liege total falsch.

Zitat von BrokenHeart

Zitat von Sören Hentzschel

Wenn du das fragen musst, ist der zitierte Text wohl nicht von dir. Bitte die Quelle im Zitat verlinken.

Nur eine (begründete) Vermutung: "ChatGPT".

Goldrichtig!

Zitat von BrokenHeart

Ich schätze zwar deine "respektlose" (im positiven Sinne ) Art, wie du mit allen zur Verfügung stehenden Mitteln zu deinen Ergebnissen kommst, aber ich halte dein jetziges Vorgehen um JS (oder eine andere Programmiersprache) zu lernen, für nicht sonderlich effektiv. Irgendwie zäumst du das Pferd von hinten auf. Du nimmst dir Skripte aus diesem Forum und versuchst die dann auch für andere Aufgaben anzupassen und umzuschreiben. Prinzipiell ist dagegen gar nichts einzuwenden, macht speziell hier im Forum fast jeder so. Aber man sollte sich darüber im Klaren sein, dass man damit bestenfalls lernt wie man hackt und nicht wirklich schnell dem Ziel näher kommt, eigenständig Probleme mittels Programmierung zu lösen, was du ja offensichtlich möchtest.

Fast alle Skripte die hier geschrieben wurden stellen Hacks dar, weil hier ein bestehendes Programm (=Firefox) auf nicht offiziell unterstütze Art angepasst und erweitert wird. D.h., man muss/sollte sich auch mit dem Firefox-Programmcode beschäftigen, um ein hinreichendes Verständnis für eine Lösung zu bekommen. All das ist meiner Meinung nach aber höchstens der zweite Schritt, den du gehen solltest. Dir nützt dieses spezielle Wissen gar nichts, wenn du kein Verständnis der Sprache bzw. allgemein vom Programmieren hast.

Warum nicht erst eine Programmiersprache an Hand von Büchern oder online z.B. an einfachen HTML-Problemen lernen und üben und damit dann eine einigermaßen sichere Grundlage für weitergehende Experimente am Firefox zu haben? Z.B. eine Webextension zu entwickeln wäre doch auch eine reizvolle Herausforderung, oder? Da hast du dann eine gut dokumentierte API und müsstest dich nicht an den "Eingeweiden" des Firefox vergreifen...

Aber das ist so Mühselig.

Aber Du hast sicher recht, ich sollte mich besser dransetzen und grundlegendes fundiertes Wissen

durch z.B. einen Onlinekurs zu erlangen.

Denn es gibt ja so viele Dinge in den Codes, die ich mir nur durch Ausprobieren versuche zu erklären,

und ob dann meine Schlussfolgerungen und Erklärungen richtig sind, weis auch nur der Geier.

Ich denke, ich lass’ nun mein Bastelobjekt ruhen.

Danke.