Chatbox erstellen - Tampermonkey

Fernandez_ · 12. Mai 2019

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?

Canna · 12. Mai 2019

Ich werde einfach aus deinem Text nicht schlau, was du genau vor hast.

Fernandez_ · 12. Mai 2019

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.

seegras · 12. Mai 2019

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?

Kaliber · 12. Mai 2019

Zitat von Fernandez_

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

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

Fernandez_ · 12. Mai 2019

Zitat von seegras

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.

Zitat von Kaliber

Das kannst du über Websockets realisieren.
Google einfach mal ein bisschen Websocket Javascript Chat Example oder sowas

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?

Kaliber · 12. Mai 2019

Zitat von Fernandez_

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

Fernandez_ · 12. Mai 2019

Dann muss ich mal schauen, ob Google mich schlauer macht.

Studs · 12. Mai 2019

Ich glaube er meint eher sowas

https://pluginstore.woltlab.com/file/1584-modern-shoutbox/

IPrototypeI · 13. Mai 2019

Zitat von Kaliber

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

Kaliber · 13. Mai 2019

Zitat von IPrototypeI

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:

Zitat von Fernandez_

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

IPrototypeI · 13. Mai 2019

Zitat von Kaliber

Offensichtlich handelt es sich nicht um sein Forum:

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.

https://medium.freecodecamp.or…browser-apis-355c001cebba

Fernandez_ · 13. Mai 2019

Bin jetzt am Code weiter. Leider wird mir aber auf dem Forum nichts angezeigt.

Code

window.textBoxFocus = false;
function createShoutBox()
{
	var shoutBoxMain = document.createElement("div");
	shoutBoxMain.className = "border titleBarPanel";


	shoutBoxMain.style.height = "auto";
	shoutBoxMain.style.margin = "0px auto 10px auto";
	shoutBoxMain.style.overflow = "hidden";
	shoutBoxMain.style.borderBottom = "1px solid #8DA4B7";
	shoutBoxMain.style.backgroundColor = "#F8FAFB";
	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>";
	shoutBoxMain.innerHTML += "<div id='shoutBoxContainer'></div>";
	document.getElementsByClassName("top5box")[0].parentNode.insertBefore(shoutBoxMain,document.getElementsByClassName("top5box")[0]);


	document.getElementById("shoutBoxContainer").innerHTML = "<div id='shoutBoxInfo' style='margin: 5px; font-size: small;'>Shoutbox für</div>";
	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>";


	var shoutForm = document.createElement("div");
	shoutForm.style.padding = "5px";
	shoutForm.innerHTML += "<br>";
	shoutForm.innerHTML += "<input style='width: 85%;' type='text' id='shoutBoxText' placeholder='Text'> | ";
	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'>";
	document.getElementById("entries").parentNode.insertBefore(shoutForm,document.getElementById("entries").nextSibling);
}

Alles anzeigen

Kaliber · 13. Mai 2019

Rufst du diese Funktion denn überhaupt auf?

Wie sieht der ganze Tempermonkey Code aus?

Fernandez_ · 13. Mai 2019

Sollte es eigentlich. Das gesamte Script sieht so aus.
Includiert in die Webseite wird es richtig.

Code

window.textBoxFocus = false;
function createShoutBox()
{
	var shoutBoxMain = document.createElement("div");
	shoutBoxMain.className = "border titleBarPanel";


	shoutBoxMain.style.height = "auto";
	shoutBoxMain.style.margin = "0px auto 10px auto";
	shoutBoxMain.style.overflow = "hidden";
	shoutBoxMain.style.borderBottom = "1px solid #8DA4B7";
	shoutBoxMain.style.backgroundColor = "#F8FAFB";
	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>";
	shoutBoxMain.innerHTML += "<div id='shoutBoxContainer'></div>";
	document.getElementsByClassName("top5box")[0].parentNode.insertBefore(shoutBoxMain,document.getElementsByClassName("top5box")[0]);


	document.getElementById("shoutBoxContainer").innerHTML = "<div id='shoutBoxInfo' style='margin: 5px; font-size: small;'>Shoutbox f&uuml;r</div>";
	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>";


	var shoutForm = document.createElement("div");
	shoutForm.style.padding = "5px";
	shoutForm.innerHTML += "<br>";
	shoutForm.innerHTML += "<input style='width: 85%;' type='text' id='shoutBoxText' placeholder='Text'> | ";
	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'>";
	document.getElementById("entries").parentNode.insertBefore(shoutForm,document.getElementById("entries").nextSibling);
}


if(typeof document.getElementsByClassName("top5box")[0] != "undefined")
{
	createShoutBox();
}

Alles anzeigen

Kaliber · 13. Mai 2019

Zitat von Fernandez_

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

window.onload = function() {
    createShoutBox();
};

schreiben.

Chatbox erstellen - Tampermonkey

Beitrag von Fernandez_ (13. Mai 2019)

breadfish.de 12. März 2022