Chatbox erstellen - Tampermonkey

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

Es gibt Neuigkeiten! Ab sofort könnt ihr dem Donators Club auf Lebenszeit beitreten.
Weitere Infos im Thema Donator's Club ab heute wieder verfügbar!

  • Chatbox erstellen - Tampermonkey

    Grüßt euch,

    ich stehe vor einen noch unlösbaren Problem für mich. Ich möchte gerne eine Shoutbox erstellen und diese dort in ein WBB Suite Forum einbinden, wo die Plugins Shoutbox auch installiert wird. (Warum nicht einfach die Plugin Shoutbox installieren? - Wird leider nicht gemacht)
    Also mein Problem besteht nun darin, dass ich einfach nicht weiß, wie ich anfangen soll. Ich habe viel gegooglet, nichts sonderbares gefunden.

    Jemand vielleicht Ahnung?
  • Also was genau Tampermonkey ist, sollte klar sein. Nun besteht ja die Möglichkeit, mit der Einbindung von HTML und CSS in Tampermonkey Scripts zu erstellen.
    Ich möchte nun kurz gesagt eine eigene Shoutbox erstellen, welche über mein Tampermonkey Script läuft. Sprich -> Installiert man mein Script, hat man an einer gewissen Stelle im Forum eine Shoutbox und kann diese nutzen.
    Hat man das Script nicht, sieht man auch keine Shoutbox.
  • Dann brauchst du i.d.R. auch einen Server zu dem die Clients dann mit ihrer lokalen Shoutbox verbinden können - Sicher dass der Aufwand mit dem Nutzen in einem Verhältnis steht?
    „Nicht das, was du nicht weißt, bringt dich in Schwierigkeiten, sondern dass, was du sicher zu wissen glaubst, obwohl es gar nicht wahr ist.“
    Mark Twain

    ---
    ICH BIN NUR HIER UM LEUTE ANZUSCHREIEN
  • Fernandez_ schrieb:

    Ich möchte nun kurz gesagt eine eigene Shoutbox erstellen, welche über mein Tampermonkey Script läuft. Sprich -> Installiert man mein Script, hat man an einer gewissen Stelle im Forum eine Shoutbox und kann diese nutzen.
    Das kannst du über Websockets realisieren.

    Google einfach mal ein bisschen Websocket Javascript Chat Example oder sowas :D

    Falls du die Nachrichten aber safe und privat sein sollen, wird es komplizierter, da du dafür theoretisch einen eigenen Server brauchst.

    Aber es gibt auch online welche, musste einfach mal schaun :)


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/
  • seegras schrieb:

    Dann brauchst du i.d.R. auch einen Server zu dem die Clients dann mit ihrer lokalen Shoutbox verbinden können - Sicher dass der Aufwand mit dem Nutzen in einem Verhältnis steht?

    Das wäre kein Problem, zumindest mein kleinstes.

    Kaliber schrieb:

    Fernandez_ schrieb:

    Ich möchte nun kurz gesagt eine eigene Shoutbox erstellen, welche über mein Tampermonkey Script läuft. Sprich -> Installiert man mein Script, hat man an einer gewissen Stelle im Forum eine Shoutbox und kann diese nutzen.
    Das kannst du über Websockets realisieren.
    Google einfach mal ein bisschen Websocket Javascript Chat Example oder sowas :D

    Falls du die Nachrichten aber safe und privat sein sollen, wird es komplizierter, da du dafür theoretisch einen eigenen Server brauchst.

    Aber es gibt auch online welche, musste einfach mal schaun :)
    Kann ich damit denn, dass ganze auch auf ein Woltlab Forum in einem bestimmten Bereich einbinden, anstatt als externe Webseite?
  • Fernandez_ schrieb:

    Kann ich damit denn, dass ganze auch auf ein Woltlab Forum in einem bestimmten Bereich einbinden, anstatt als externe Webseite?
    Na klar, dass könntest du sogar auf jeder Website einbinden :)

    Musst einfach das DIV Element suchen, wo du die Shoutbox haben magst und dann einfach mit innerHTML deinen HTML Code für die Shoutbox darein packen :)


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/
  • Kaliber schrieb:

    Na klar, dass könntest du sogar auf jeder Website einbinden :)
    Musst einfach das DIV Element suchen, wo du die Shoutbox haben magst und dann einfach mit innerHTML deinen HTML Code für die Shoutbox darein packen :)
    Aber das wird wohl eher die dirty variante sein. Am besten suchst du mal nach tutorials für wsc plugins dann kannst du sauber ein plugin realisieren mit konfigurationsmöglichkeiten oder editierst bereits das vorhandene shoutbox plugin

  • IPrototypeI schrieb:

    Am besten suchst du mal nach tutorials für wsc plugins dann kannst du sauber ein plugin realisieren mit konfigurationsmöglichkeiten oder editierst bereits das vorhandene shoutbox plugin
    Offensichtlich handelt es sich nicht um sein Forum:

    Fernandez_ schrieb:

    (Warum nicht einfach die Plugin Shoutbox installieren? - Wird leider nicht gemacht)


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/
  • Kaliber schrieb:

    IPrototypeI schrieb:

    Am besten suchst du mal nach tutorials für wsc plugins dann kannst du sauber ein plugin realisieren mit konfigurationsmöglichkeiten oder editierst bereits das vorhandene shoutbox plugin
    Offensichtlich handelt es sich nicht um sein Forum:

    Fernandez_ schrieb:

    (Warum nicht einfach die Plugin Shoutbox installieren? - Wird leider nicht gemacht)

    voll überlesen hab nur den Anfang vom. thread überflogen, wenn das so ist dann wäre eine browser add on nicht schlecht. du könttest dir mal dazu firechat anschauen, was bereits ein fertiger chat ist oder firebase an sich nutzen für eine echtzeit kommunikation, ansonsten musst du ein webservice bereit stellen, welcher die Nachrichten über sockets verteilt und du brauchst eine db welche dann die daten speichert. Da kannst dir mal node.js anschauen und eine nosql db die harmonieren hier gut, alternativ kannst du auch ein php script und mysql verwenden, jedoch musst du das phpscript als server konfigurieren, bedeutet das es ausgeführt wird sobald dein webserver hochfährt.

    medium.freecodecamp.org/how-to…browser-apis-355c001cebba

    Beitrag von Fernandez_ ()

    Dieser Beitrag wurde vom Autor gelöscht ().
  • Bin jetzt am Code weiter. Leider wird mir aber auf dem Forum nichts angezeigt.

    Quellcode

    1. window.textBoxFocus = false;
    2. function createShoutBox()
    3. {
    4. var shoutBoxMain = document.createElement("div");
    5. shoutBoxMain.className = "border titleBarPanel";
    6. shoutBoxMain.style.height = "auto";
    7. shoutBoxMain.style.margin = "0px auto 10px auto";
    8. shoutBoxMain.style.overflow = "hidden";
    9. shoutBoxMain.style.borderBottom = "1px solid #8DA4B7";
    10. shoutBoxMain.style.backgroundColor = "#F8FAFB";
    11. shoutBoxMain.innerHTML += "<div class='containerHead'><div class='containerIcon'><img id='statusImg' style='cursor: pointer;'></div><div class='containerContent'>INFO: Das Team distanziert sich von der Shoutbox und hat keinen Einfluss auf deren Inhalte.</span></div></div>";
    12. shoutBoxMain.innerHTML += "<div id='shoutBoxContainer'></div>";
    13. document.getElementsByClassName("top5box")[0].parentNode.insertBefore(shoutBoxMain,document.getElementsByClassName("top5box")[0]);
    14. document.getElementById("shoutBoxContainer").innerHTML = "<div id='shoutBoxInfo' style='margin: 5px; font-size: small;'>Shoutbox für</div>";
    15. document.getElementById("shoutBoxContainer").innerHTML += "<div id='entries' style='padding: 5px; border: 0px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: #D8E7F5; margin: 5px; border: 1px solid #8DA4B7;'></div>";
    16. var shoutForm = document.createElement("div");
    17. shoutForm.style.padding = "5px";
    18. shoutForm.innerHTML += "<br>";
    19. shoutForm.innerHTML += "<input style='width: 85%;' type='text' id='shoutBoxText' placeholder='Text'> | ";
    20. shoutForm.innerHTML += "<input style='width: 10%; cursor: pointer;' type='button' id='shoutBoxButton' onmouseover='if(this.style.backgroundImage == \"none\") { this.style.backgroundColor = \"#eeeeee\"; }' onmouseout='this.style.backgroundColor = \"#F8FAFB\";' value='Absenden'>";
    21. document.getElementById("entries").parentNode.insertBefore(shoutForm,document.getElementById("entries").nextSibling);
    22. }
    Alles anzeigen
  • Sollte es eigentlich. Das gesamte Script sieht so aus.
    Includiert in die Webseite wird es richtig.

    Quellcode

    1. window.textBoxFocus = false;
    2. function createShoutBox()
    3. {
    4. var shoutBoxMain = document.createElement("div");
    5. shoutBoxMain.className = "border titleBarPanel";
    6. shoutBoxMain.style.height = "auto";
    7. shoutBoxMain.style.margin = "0px auto 10px auto";
    8. shoutBoxMain.style.overflow = "hidden";
    9. shoutBoxMain.style.borderBottom = "1px solid #8DA4B7";
    10. shoutBoxMain.style.backgroundColor = "#F8FAFB";
    11. shoutBoxMain.innerHTML += "<div class='containerHead'><div class='containerIcon'><img id='statusImg' style='cursor: pointer;'></div><div class='containerContent'>INFO: Das Team distanziert sich von der Shoutbox und hat keinen Einfluss auf deren Inhalte.</span></div></div>";
    12. shoutBoxMain.innerHTML += "<div id='shoutBoxContainer'></div>";
    13. document.getElementsByClassName("top5box")[0].parentNode.insertBefore(shoutBoxMain,document.getElementsByClassName("top5box")[0]);
    14. document.getElementById("shoutBoxContainer").innerHTML = "<div id='shoutBoxInfo' style='margin: 5px; font-size: small;'>Shoutbox f&uuml;r</div>";
    15. document.getElementById("shoutBoxContainer").innerHTML += "<div id='entries' style='padding: 5px; border: 0px; height: 200px; overflow-x: hidden; overflow-y: scroll; background-color: #D8E7F5; margin: 5px; border: 1px solid #8DA4B7;'></div>";
    16. var shoutForm = document.createElement("div");
    17. shoutForm.style.padding = "5px";
    18. shoutForm.innerHTML += "<br>";
    19. shoutForm.innerHTML += "<input style='width: 85%;' type='text' id='shoutBoxText' placeholder='Text'> | ";
    20. shoutForm.innerHTML += "<input style='width: 10%; cursor: pointer;' type='button' id='shoutBoxButton' onmouseover='if(this.style.backgroundImage == \"none\") { this.style.backgroundColor = \"#eeeeee\"; }' onmouseout='this.style.backgroundColor = \"#F8FAFB\";' value='Absenden'>";
    21. document.getElementById("entries").parentNode.insertBefore(shoutForm,document.getElementById("entries").nextSibling);
    22. }
    23. if(typeof document.getElementsByClassName("top5box")[0] != "undefined")
    24. {
    25. createShoutBox();
    26. }
    Alles anzeigen
  • Fernandez_ schrieb:

    if(typeof document.getElementsByClassName("top5box")[0] != "undefined")
    {
    createShoutBox();
    }
    Ehh das kann nicht das gesamte Skript sein?

    Da fehlen die Kommentare, dass das überhaupt gestartet wird von Tampermonkey?

    Also die // ==UserScript== Info?

    Desweiteren, solltest du einfach:


    JavaScript-Quellcode

    1. window.onload = function() {
    2. createShoutBox();
    3. };
    schreiben.


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/