[HILFE] Addon - Twitch Chat eingabe

[Iomega]

Moin Leute,

ich brauche mal wieder eure Hilfe.
Mein Problem:
Ich möchte mir ein Addon erstellen, welches mir mehrere eingaben in den Twitch Chat ermöglichen tut.
Aktuell habe ich dank ChatGPT es soweit gebracht, das das Addon bei erfolgreichen finden eines Wortes "XY" im Twitch chat den "Belohnungen & PowerUps" button drückt, dann wartet er 1 Sec und Drückt dann auf den gewünschten Button XY (derzeit "Meine Nachrichten Hervorheben").
Siehe hier (Javascript):

function checkForBot() {

  console.log("Überprüfe auf Sery_Bot...");

  const botText = document.body.innerText;



  if (botText.includes("WILDNESS")) {

    console.log("Sery_Bot wurde gefunden");



    // Führe die erste Aktion aus (Button klicken)

    const firstButtonSelector =

      "#live-page-chat > div > div > div.Layout-sc-1xcs6mc-0.iTiPMO.chat-shell.chat-shell__expanded > div > div > section > div > div.Layout-sc-1xcs6mc-0.kILIqT.chat-input > div:nth-child(2) > div.Layout-sc-1xcs6mc-0.eWfUfi.chat-input__buttons-container > div.Layout-sc-1xcs6mc-0.cNKHwD > div > div > div > div.Layout-sc-1xcs6mc-0.iVvsmg > div.InjectLayout-sc-1i43xsx-0.kBtJDm > button";

    const firstButton = document.querySelector(firstButtonSelector);



    if (firstButton) {

      firstButton.click();

      console.log("Erster Button gedrückt");



      // Warte 1 Sekunde und führe die zweite Aktion aus

      setTimeout(() => {

        const rewardButtonSelector =

          "#channel-points-reward-center-body > div > div > div:nth-child(8) > div > button";

        const rewardButton = document.querySelector(rewardButtonSelector);



        if (rewardButton) {

          rewardButton.click();

          console.log("DONE");



          // Füge den Wunschtext in den Chat ein und sende ihn ab

          sendChatMessage("nabend");

        } else {

          console.error("Belohnungs-Button nicht gefunden");

        }

      }, 1000); // 1 Sekunde warten

    } else {

      console.error("Erster Button nicht gefunden");

    }

  }

}



function sendChatMessage(message) {

  // Finden Sie das Chat-Eingabefeld

  const chatInput = document.querySelector('[data-a-target="chat-input"]');



  if (!chatInput) {

    console.error("Chat-Eingabefeld nicht gefunden");

    return;

  }



  // Erstellen Sie den Inhalt für das Eingabefeld

  const content = `<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true" class="ScTransitionBase-sc-hx4quq-0 iEzfDB tw-transition" data-a-target="chat-input-text" aria-hidden="false"><span data-slate-string="true">${message}</span></span></span></div>`;



  // Setzen Sie den Inhalt des Eingabefelds

  chatInput.innerHTML = content;



  // Erstellen und dispatchen Sie ein input-Event

  const inputEvent = new InputEvent("input", {

    bubbles: true,

    cancelable: true,

  });

  chatInput.dispatchEvent(inputEvent);



  // Finden Sie den Senden-Button

  const sendButton = document.querySelector(

    '[data-a-target="chat-send-button"]'

  );



  if (!sendButton) {

    console.error("Senden-Button nicht gefunden");

    return;

  }



  // Klicken Sie auf den Senden-Button

  sendButton.click();

}



// Verwenden Sie die Funktion, um eine Nachricht zu senden

sendChatMessage("nabend");



window.addEventListener("load", () => {

  setTimeout(() => {

    setInterval(checkForBot, 5000); // Überprüft alle 5 Sekunden

  }, 1000); // Wartet 1 Sekunde nach dem Laden der Seite

});

Und hier fängt mein problem an.

Denn nun muss man etwas in das Textfeld eingeben damit man dies dann absenden kann.:

Das lustige ist, ChatGPT hat es soweit hinbekommen, das er beim 1 mal nichts sendet, jedoch beim zweiten Mal u Danke daraufhin auch, jedes mal mit diesem Text

`<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true" class="ScTransitionBase-sc-hx4quq-0 iEzfDB tw-transition" data-a-target="chat-input-text" aria-hidden="false"><span data-slate-string="true">${message}</span></span></span></div>`;

Dies ist aber offensichtlich falsch xD. Mal abgesehen davon, daß er alles nur einmalig machen soll.
Da es aber auch kein ChatGPT fixen kann, frage ich hier mal nach.
Ich wäre für jede Hilfe dankbar.
Auch falls es irgendwie anders machbar wäre.
Vielen Dann

Greetz

[DMW007]

Hi,

das ist ein Paradebeispiel, wofür dieses ganze Maschinelle Lernen wenig taugt und daher entsprechend schlechte bis fehlerhafte Codequalität liefert. Schon alleine diese riesigen Selektoren. Eine Klasse .Layout-sc-1xcs6mc-0.iTiPMO beispielsweise lässt sich maschinell leicht generieren. Eine menschliche Intelligenz würde so was lassen, weil bei derart strikten Verschachtelungen kleinste Änderungen am HTML ausreichen, damit dieser Selektor nicht mehr funktioniert. Darüber hinaus sind solche kryptischen Klassen garantiert zufällig von einem Framework generiert. Das dürfte sich relativ schnell ändern, mit Pech sogar beim nächsten Deployment. Je nachdem, anhand welcher Kriterien die ihre Klassen/IDs generieren.

Außerdem prüft der Code in den meisten Fällen nicht mal, ob die Elemente überhaupt existieren. Sondern wartet pauschal 1 Sekunde. Lass das mal länger brauchen, weil z.B. das Netzwerk grade höhere Latenzzeiten hat und was erst in 1,5 Sekunden da ist. In den Fällen wo es getan wird, gibt es keine vernünftige Fehlerbehandlung, sondern bloß eine Fehlermeldung. Ich würde lieber z.B. 3x5 Sekunden warten und es jeweils neu probieren. Erst wenn das Element dann immer noch nicht gefunden werden kann, gibt es ein Problem, welches nicht ohne weiteres gelöst werden kann (geänderte Seitenstruktur, bei Twitch ist was kaputt usw).

Grundsätzlich würde ich solche Bastelleien im Browser nach Möglichkeit meiden und lieber APIs nutzen. Das sind Schnittstellen, die extra für den programmatischen Zugriff gemacht wurden und mit denen man in der Regel deutlich sauberer arbeiten kann. Dort wird bei neuen Nachrichten z.B. ein Event (Ereignis) aufgerufen. Twitch scheint eine API zu haben, mit dem Projekt "twitchAPI" hat jemand was in Python gemacht. Der kann laut Doku zumindest auf Chatnachrichten reagieren: twitchAPI chat usage.
Müsstest du schauen, ob die API den Knopf, den du drücken willst, auch eingebaut hat. Gegebenenfalls direkt bei Twitch, falls die das dort implementiert haben, aber in dem Python-Wrapper noch nicht. Ist generell etwas aufwändiger, dafür sauberer und stabiler. Außerdem hängt es nicht am Browser, was man bei Bots in der Regel lieber vermeidet.

Denn nun muss man etwas in das Textfeld eingeben damit man dies dann absenden kann.:

Was für ein Textfeld? Was müsste dort eingegeben werden und was gibt der Code ein? Screenshots?

Mal abgesehen davon, daß er alles nur einmalig machen soll.

Kommt daher, weil der Code wiederholend in document.body.innerText sucht und die "KI" mangels logischem Verständnis nicht erkannt hat, dass das für deinen Anwendungsfall Schwachsinn ist. Wenn ich im Chat "WILDNESS" schreibe, steht in der Chatbox

DMW007: WILDNESS

Die Chatbox ist wahrscheinlich Teil des HTML Bodys (außer bei iFrames, das macht heute aber so gut wie keiner mehr), also steht das nun auch in document.body.innerText. Der Chatverlauf wird allerdings nicht gelöscht und dein Code prüft alle 5 Sekunden. Also findet der den gleichen Treffer immer wieder. Das Problem hättest du nicht, wenn du die API nutzt: Die sendet dir zu jeder Nachricht ein Ereignis, d.H. deine Funktion (EventHandler) wird für jede Nachricht exakt einmal aufgerufen.

Wenn du das im Browser machen willst, müsstest du entweder die Chatbox danach leeren. Oder im Code speichern, auf welche Nachrichten du bereits reagiert hast. Im obigen Beispiel würde also bei der ersten Nachricht die Aktion ausgelöst. Dann speicherst du dir, dass auf diese Nachricht reagiert wurde. Ab dem nächsten Durchlauf in 5s erkennt er die Nachricht, gleicht sie mit der Liste der bereits erledigten ab und reagiert nichts. Hierfür musst du allerdings etwas mehr Parsen, als bloß in document.body.innerText nach der Zeichenkette suchen.

Theoretisch möglich und technisch am saubersten (wenn man im Browser bleibt) wäre Reverse Engineering des Twitch JS Codes. Dort muss es irgendwo ein Ereignis geben, dass bei neuen Chatnachrichten aufgerufen wird. Wenn man das anzapft, könntest du auf jede Chatnachricht reagieren, statt das mühsam von der Seite auszulesen. In der Praxis halte ich das für unrealistisch. Ist zu viel mühseliger Aufwand. Außerdem braucht es für RE tiefgehende JS Kenntnisse und es ist immer noch inoffizielles Gebastel, mit der nächsten Aktualisierung von Twitch kann das kaputt gehen. Bevor ich das anfange, würde ich es lieber über die API machen. Alles im Browser ist das maschinelle Verarbeiten von Elementen, die nicht dafür ausgelegt sind. Kann man machen, falls es keine besseren Alternativen gibt, ansonsten lieber nicht.

[Iomega]

Moin, ich danke dir mal wieder für deine ausführliche Antwort .
Natürlich weiß ich was du meinst und es wäre auch besser alles gleich richtig, als fehlerhaft zu machen, allerdings werde ich es nur ca 1 oder 2 Monate nutzen, daher ist es nicht wild wenn sich die Klasse ändert. Hier kann ich wenigstens noch selber änderungen vornehmen.
Und sind wir mal Ehrlich, Twitch ist jetzt nicht unbedingt die Plattform, die "schnell, sauber" arbeitet, geschweige "schnell Fehler" ausbessert .
Bei anderen Seiten ist es denke ich anders, aber Twitch is dafür leider bekannt.

Das mit der 1, Sekunde war mal eingebaut weil das Addon einfach schon angefangen hatte, bevor die Seite aufgebaut wurde xD.
Muss natürlich raus genommen werden, oder man ändert es wie du schon sagtest auf die 3-5 Sekunden, ist jetzt ja nur ein handgriff entfernt.

Was die API betrifft, ist es wie gesagt logisch am besten, nur dazu müsste man sich nun Monate hin setzten um das irgendwie gebacken zu kriegen, nur um es in 1-2 Monate darauf wieder zu beenden. Da ist irgendwie das Aufwand/Nutzverhältnis zu weit auseinander. Klar, als Programmierer oder jemand der sich damit auskennt würde ich dies 100% auch lieber nutzen. Nur das ist leider nicht der fall. Und ich wollte dies gerade auch nur automatisch machen lassen, weil ich es sonst ständig selber manuell machen muss und dazu muss ich dauerhaft auf den PC oder aufs Handy schauen und twitch aufhaben, damit ich eine Funktion auslöse die ich sowieso bald erfüllt habe. Nur damit ich in Ruhe Arbeiten und meine Freizeit nutzen kann, wollte ich es logischerweise automatisieren.
Ich habe dennoch mal in die API geschaut und dort sind Funktionen wie:

A viewer has redeemed a custom channel points reward on the specified channel.
Channel Points Custom Reward Redemption Add
Function: listen_channel_points_custom_reward_redemption_add ()
Payload: ChannelPointsCustomRewardRedemptionAddEvent

und da drunter steht halt noch das gleiche nur statt "add" hinten "update" (Channel Points Custom Reward Redemption Update)

Alles weiter sind "Reward has been created oder Updated oder Removed.
Ansonsten gibt es in den Objects 1 eintrag (alle anderen sind für Predictions und das ist etwas anderes) und das wäre dieser hier:

channel_points_custom_reward_id: str
Optional. The ID of a channel points custom reward that was redeemed.

Mehr ist dort nicht zu finden.
Wodurch wir dann nun dort wären, womit ich sowieso nicht wirklich was anfangen könnte da ich Python nicht mehr kann.
(Ich konnte es mal durch Web Developing anfängerisch wo wir alles in Kursen gelernt haben, aber das is 2-3 Jahre her, dadurch fande ich wie jeder wieder am Anfang an und dann steht wieder das Aufwand/Nutzverhältnis im weg.) Ansonsten würde ich es gern nutzen, so ist es nicht, aber ich kann nicht 40 Std arbeiten, Zeit für Person X Privat haben und dann noch nebenbei Python lernen , da werd ich ja in einem Jahr grad mal fertig weil ich so schon kaum Zeit habe.

Und was das "Addon" angeht, er drückt ja immerhin den "Belohnungen" Button

Kurz darauf den gewünschten "Meine Nachrichten Hervorheben" Button auch

Nur sobald dieser gedrückt wird, sieht man dies hier:

Und dort siehst du nun auch was ich meine. Man kriegt dort wie in jedem Text feld, einen Blinkenden "|" wo man etwas rein schreiben soll. Und genau an diesem Punkt komme ich nicht weiter. (Was dort eingegeben werden soll, ist egal, da reicht wenn man eine "1" drückt(eingibt), ein "A" eingibt oder was auch immer du eingeben willst.)

Ja da hast du recht, normalerweise sollte das mit dem Addon so laufen:
1. Gewünschte Twitch Seite wird aufgebaut.
2. Wartet 3-5 Sec
3. Sucht nach einem Begriff der NEU erscheint "XY" (Aktuell sucht er ja nach dem Wort "WILDNESS" welches derzeit nur Platzhalter ist, denn das Wort steht auf der gewünschten Seite und um zu überprüfen ob alle weiteren schritte funktionieren, muss er logischerweise das Wort finden. Im richtigen Fall ist es so ein schwieriges Wort, sodass es nicht zufällig vorher geschrieben werden kann, daher kann er es vorher auch nicht finden. Das sollte also nicht das problem sein.)
5. Wort wurde gefunden also drückt er Button 1

6. Wartet 1 Sekunde
7. Drückt nun Button 2

8. Nun sind wir beim Problem, eigentlich soll nur noch irgendein Text, Wort, Buchstabe hier

eingefügt und abgesendet werden.
Das wäre es dann auch. Nur genau beim letzten Punkt hänge ich fest.
Mal davon abzusehen wie ich schon sagte, das Alles nur EINMAL passieren soll xD. Will ja nicht spamen haha.

Was den Chatverlauf betrifft, da das Wort aktuell nur der Platzhalter zum testen is, hast du recht, aber das richtige Wort wird niemals einfach so in den Chat oder in die gewünschte Seite geschrieben (es is wirklich ein Wort welches man so niemals hört), daher kann es zuvor auch nicht gefunden werden. Da brauchst dir keine sorgen machen, was das betrifft habe ich glück .
Daher hat sich das mit dem Chatbox leeren, Code Speichern, Nachrichten Regieren, sowie Reverse Engineering etc soweit auch erledigt.
Das wurde damit zum glück grob umgangen.

Ich hoffe ich konnte etwas klarheit schaffen und ich hoffe das man mir nun etwas besser weiterhelfen kann .
Dankeee

[DMW007]

Es geht nicht darum, ob von Seiten Twitch sauber oder unsauber gearbeitet wird. Sondern darum, dass zu detaillierte Selektoren bei kleineren Änderungen an der Seite nicht mehr funktionieren, z.B. wenn in dem Konstrukt eine Klasse wegfällt oder umbenannt wird. Insbesondere, wenn sie Klassen/IDs beinhalten, die dynamisch generiert werden. Da weißt du als Außenstehender nicht, nach welchen Kriterien die generiert werden und wann die sich ändern. Die können sich morgen, in 3 Wochen oder erst in Jahren ändern. Wie gesagt: Du arbeitest an einer Webseite für Menschen, nicht für maschinelles auslesen.
Auch geht es nicht darum, die Wartezeit zu verlängern. Ich hatte bewusst 3x5 geschrieben statt 3-5, weil ich damit pollen meine: Bis zu 3x prüfen, ob das Element vorhanden ist. Wenn nein, warten. Eine pauschale Wartezeit ist besonders fehleranfällig, weil sie davon ausgeht, dass nichts schief geht.

Das mit der Nachricht wird vermutlich daran liegen, dass der generierte Code etwas an den Events herum manipuliert und die von Twitch überschreibt. Das eingefügte HTML sieht auch wild aus. Wenn du das fixen willst, musst du in so weit Reverse Engineering betreiben, dass du dir in der Entwicklerkonsole den Quellcode von der Nachrichten-Box auf deinem letzten Bildschirmfoto anschaust. Im einfachsten Falle ist das ein <input> Feld, an das du direkt den Text sendest und anschließend Entwer simulierst bzw. den Knopf daneben drückst, falls der zum Absenden gedacht ist.

Ich würde solche Details zum testen nicht direkt in Tampermonkey oder wo du das Skript laufen lässt testen, das ist extrem zäh. Sondern über die Entwicklerkonsole. Im Reiter Konsole kannst du Code ausführen und z.B. erst mal das Einfügen des Nachrichtentextes herausfinden.

Bei dem Begriff im Chat geht es nicht um das Wort, es ist egal wie das lautet: Wenn es einer schreibt, steht es im Chatverlauf und damit im Quelltext der Seite. Das wird zu einer Endlosschleife an Wiederholungen alle 5 Sekunden führen. Um das zu vermeiden, musst du dir merken, welche Nachrichten bereits bearbeitet wurden und welche neu sind. Das meinte ich im vorherigen Beitrag. Damit sind wir beim manuellen Parsen des Chats, wie ich es im letzten Beitrag meinte. Das ist nicht ganz trivial, weil du nicht ohne weiteres auf Ereignisse reagieren kannst und auch die Daten nicht maschinell verarbeitbar bekommst. Bis das so funktioniert wie du es dir vorstellst, werden sicher noch einige Stunden Arbeit nötig sein.