Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
in Dom eingefügter Code wird nicht auf Webseite richtig dargestellt
#1
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. Undecided



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 Undecided



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:



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

Zitieren
#2
Ganz im ernst,
warum so komplex und so kompliziert. Das bekommt man mit weniger Code hin.

Zum Script: Da fehlt eine Menge um zu wissen worum es geht. Entweder sende mehr Details und Ausschnitte oder beschreibe im Detail wo die Probleme sind und wie wir helfen können.

PS: Wenn es ein echtes Gewinnspiel ist, dann solltest du die Verarbeitung serverseitig durchführen. PS: Wozu eine Chrome-Erweiterung?

Viele Grüße

rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
Hm, dann eben hier alle 3 Dateien:
die manifest.json:
{
  "name": "Test3",
  "description": "blabla",
  "version": "1.0",
  "manifest_version": 3,
	  "background": {"service_worker": "bg.js"},
  "permissions": ["scripting"],
  "host_permissions": ["<all_urls>"]


}

bg.js:
chrome.runtime.onInstalled.addListener(async () => {
  const old = await chrome.scripting.getRegisteredContentScripts();
  if (old[0]) await chrome.scripting.unregisterContentScripts({ids: old.map(s => s.id)});
  await chrome.scripting.registerContentScripts([{
    id: 'write',
    js: ['write.js'],
    matches: ['<all_urls>'],
    runAt: 'document_start',
    world: 'MAIN',
  }]);
});

und write.js:

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




Welches Gewinnspiel meinst du? Es geht um einen Roulettetisch.
Zitieren
#4
Ich habe wohl den "Fehler" gefunden, wenn man das so nennen kann:
Ich habe ja da diese if-else if-else Kette drin.
Nach eingien tests weiß ich dass die if bedingugn noch klappt. wenn die erfüllt ist, wird rot angezeigt.
Allerdings an der else if Bedingugn scheiterte es.
Das
result.equals("0")
war offenbar ein Problem.

Verstehe auch nicht warum das passiert aber offenbar wurde das so gar nicht geprüft (entsprechende console.logs wurden weder im else if noch im else zweig ausgeführt) sondern schlicht ab da nix mehr geprüft.
keine ahnung ob da ein fehler passiert und daher die restbedingungen nicht mehr geprüft werden oder was.

Jedenfalls habe ich obiges einfach ersetzt durch
result=="O"
und jetzt funktioniert es auch :-)


Was ich auch nicht ganz verstehe:
Hier gebe ich ja in jeder Bedingugn explizit den ellenlangen html code an, obwohl er sich nur in den rgb werten untershceidet.

Ich hatte nun shcon mehrmals versucht, diesen html code erst als string zusammenzubauen und anshcließend mittels
element.innerHTML=string;

zuzuweisen.
Irgendwie geht das aber nicht, da fügt er es nicht ein, es wird nicht sdargestellt.
Irgendwie akzeptiert er eine zuweisung für das innerhtml nur wenn ich explizit den string nenne. und keine variable, die den string beinhaltet Undecided
Keine Ahnung warum das so ist.

Javascript ist manhmal echt verwirrend :-(
Zitieren
#5
Ich habe mein Programm etwas weiter bearbeitet und das write.js (das für die eigentlichen veränderungen auf der Webseite/in der DOM Struktur zuständig ist) sieht nun so aus:

(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("numbers=")){
													
													//second box
													const test21 = document.getElementById("insertedDiv21");
													if(test21!=null){
														test21.remove(); 
													}
													const div21=document.createElement("div");
													div21.setAttribute("id","insertedDiv21");
													div21.setAttribute("style","position:fixed; top: 40px; left: 0px; width:20px; height:20px;");
													div21.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(255, 255, 255);'></p>";
													document.body.appendChild(div21);
																										
												}
//*************************************************************************************************************************												
												if(arr.includes("gameServerVersion")){
													
													
													//get result
													var wintext=arr.match(/&winnumber=[0-9]+/g); 
													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"];
													
													
													//first box
													const test11 = document.getElementById("insertedDiv11");
													if(test11!=null){
														test11.remove(); 
													}
													const div11=document.createElement("div");
													div11.setAttribute("id","insertedDiv11");
													div11.setAttribute("style","position:fixed; top: 0px; left: 0px; width:20px; height:20px;");
													if(rot.includes(result)){
														div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(255, 0, 0);'></p>";}
													else if((result=="0")){
														div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 255, 0);'></p>";}
													else{
													div11.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 0, 0);'></p>";}
													document.body.appendChild(div11);


													//second box
													const test21 = document.getElementById("insertedDiv21");
													if(test21!=null){
														test21.remove(); 
													}
													const div21=document.createElement("div");
													div21.setAttribute("id","insertedDiv21");
													div21.setAttribute("style","position:fixed; top: 40px; left: 0px; width:20px; height:20px;");
													div21.innerHTML="<p style='border-width:1px; border-style:solid; border-color:white; padding: 1em; color:white; background-color:rgb(0, 0, 0);'></p>";
													document.body.appendChild(div21);


													console.log(result);            
													
												}
//***************************************************************************************************************************************************												

                    } catch(err) {
                        //console.log("Error in responseType try catch");
                        //console.log(err);
                    }
                }

            }
        });

        return send.apply(this, arguments);
    };

})(XMLHttpRequest);




Was es nun mittlerweile tut:
Es gibt oben links untereinander 2 Boxen.
Die obere zeigt (insofern shcon ein Drehergebnis vorliegt) das Drehergebnis farblich an (rote zahl erdreht-> rot, schwarze zahl erdreht schwarz, 0 gedreht->grün).

die untere zeigt grob gesagt an ob das Spiel stillsteht und wir Einsätze platzieren können, auf drehen klicken können und so.
Ist es weiß, passiert spieltechnisch gerade nichts und wir können Einsätze platzieren und Co.
Ist es schwarz, dann ist das Spiel gerade am laufen und wir müssen abwarten bis die "Chekcbox" wieder weiß wird.
Ampelprinzip halt :-)
Einziger kleienr Makel ist:
wenn man auf Drehen klickt, ist ja sofort nichts mehr machbar. Die Bosx braucht allerdings etwas bis sie von weiß auf shcwarz wechselt und das so wiederspiegelt.
Später hingegen geht die "Ampel" von schwarz auf weiß ein paar momente nahcdem eigentlich shcon eingaben wieder möglich sind, also da ist man dann auf der sicheren Seite :-)


Kurzum: eine Box zeigt die zuletzt gezogene Farbe an, die Andere gibt an, ob das Spiel gerade bedienbar ist (Einsätze platzieren, buttons klickbar, etc.).

Hat übrigens auch den netten Seiteneffekt, das ja anfangs erst mal der Roulettetishc aufgemacht werden muss und sobald er (erstmals) voll bedoinbar ist, wird auh dies mittels weißer Box angezeigt :-)
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste