 |
Hallo,
ich baue mir gerade ein Chrome Add-On.
Bisher hat es auch halbwegs geklappt aber es scheitert gerade an etwas Trivialem und ich sehe meinen Fehler nicht.
Ich lasse mein Add-On auf einer Rouletteseite am Casinotisch laufen.
Jedes Mal wenn der drehen Knopf gedrückt wird, wird ein get request an den Server geschickt und eine response kommt zurück.
In der Response steht die erdrehte Zahl drin, die auch dann visuell dargestellt wird.
Jetzt ist mein Skript soweit dass es die Requests mitliest, eine bestimmte Art von Request näher betrachtet und aus deren Response Body die Gewinnzahl ausliest.
Basierend auf der Farbe der Gewinnzahl (null=grün, rot oder shcwarz die anderen Farben, siehe Tisch)
soll oben links ein Kästchen auf der Webseite gemalt werden mit Hintergrundfarbe=gezogene Farbe und, weils ohne nicht geht, einem weissen Buchstaben O drin.
Codemässig lasse ich da in jeder Runde (heißt bei jeder abgefangenen, zutreffenden Request)
ein neues div element mit einem p element drin zeichnen. (mir fiel keine billige einfache art, oben links ein farbiges kästchen zu zeichnen, ein)
Ist bereits ein solches element vorhanden, wird das alte gelöscht (per id eindeutig findbar) und ein neues gebaut und in die seite gepackt.
so weit so gut.
für eine rote gezogene Zahl funktioniert das auch, da wird schön ein rotes kästchen, mit weißem O drin und weißen Rändern gemalt.
Nur wenn eine grüne null oder eine schwarze zahl gezogen wird, wird gar nicht gemalt.
obwohl der code für die 3 Fälle praktisch identisch ist, es unterscheidet sich nur der verwendete rgb wert für die hintergrundfarbe. 
Es ist auch nicht so dass nur einmalig was gezeichnet wird, wenn bspw. erst eine rote farbe gezogen wird, malt er was rotes.
dann 2 schwarze farben, malt er nichts (oder alles in schwarz, wer weiß. die webseite selbst ist ja schwarz)
kommt dann rot, dann malt er wieder das kästchen.
Also er reagiert schon jedes Mal auf die Daaten aus dem abgefangenen Request, nur für null und schwarze zahl malt er einfach nicht das, was er soll
Und ich weiß nicht warum.
Das hier ist das skript, das ich "injekte" (von seiten des chrome add-ons müsste alles funktionieren, es muss am in die dom reingepackten html code liegen):
Der interessante Teil ist zwischen den mit Sternen markierten Grenzen, ziemlich mittig:
Code: (function(xhr) {
var XHR = XMLHttpRequest.prototype;
var open = XHR.open;
var send = XHR.send;
var setRequestHeader = XHR.setRequestHeader;
XHR.open = function(method, url) {
this._method = method;
this._url = url;
this._requestHeaders = {};
this._startTime = (new Date()).toISOString();
return open.apply(this, arguments);
};
XHR.setRequestHeader = function(header, value) {
this._requestHeaders[header] = value;
return setRequestHeader.apply(this, arguments);
};
XHR.send = function(postData) {
this.addEventListener('load', function() {
var endTime = (new Date()).toISOString();
var myUrl = this._url ? this._url.toLowerCase() : this._url;
if(myUrl) {
if (postData) {
if (typeof postData === 'string') {
try {
// here you get the REQUEST HEADERS, in JSON format, so you can also use JSON.parse
this._requestHeaders = postData;
} catch(err) {
console.log('Request Header JSON decode failed, transfer_encoding field could be base64');
console.log(err);
}
} else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') {
// do something if you need
}
}
// here you get the RESPONSE HEADERS
var responseHeaders = this.getAllResponseHeaders();
console.log(this.responseType);
if ( this.responseType != 'blob') {
// responseText is string or null
try {
// here you get RESPONSE TEXT (BODY), in JSON format, so you can use JSON.parse
var arr = this.response;
// printing url, request headers, response headers, response body, to console
//console.log(" ");
//console.log(this._url);
//console.log(JSON-parse(this._requestHeaders));
//console.log(responseHeaders);
//*************************************************************************************************************************
if(arr.includes("gameServerVersion")){
//console.log(arr);
var wintext=arr.match(/&winnumber=[0-9]+/g);
//console.log(wintext[0]);
let result = arr.match(/&winnumber=[0-9]+/)[0].substring(11, (arr.length-1));
console.log(result);
let rot=["1","3","5","7","9","12","14","16","18","19","21","23","25","27","30","32","34","36"];
const element = document.getElementById("insertedDiv1234");
if(element!=null){
element.remove();
}
const div=document.createElement("div");
div.setAttribute("id","insertedDiv1234");
div.setAttribute("style","position:fixed; top: 0px; left: 0px; width:20px; height:20px;");
if(rot.includes(result)){div.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(255, 0, 0);'>O</p>";}
else if(result.equals("0")){div.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 255, 0);'>O</p>";}
else{div.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 0, 0);'>O</p>";}
console.log(div);
document.body.appendChild(div);
console.log(result);
}
/***************************************************************************************************************************************************
} catch(err) {
//console.log("Error in responseType try catch");
//console.log(err);
}
}
}
});
return send.apply(this, arguments);
};
})(XMLHttpRequest);
|
