http requests und Popup Box bei Chrome Erweiterung?

[bernd]

Hallo,
Ich habe ein größeres Vorhaben, das sich simpel zusammenfassen lässt:
Ich will mr eine Chrome Erweiterung bauen,
die bei einer ganz bestimmten Seite hingeht, die http requests und responses beobachtet und aus einer ganz bestimmten Response (deren request beim klicken eines Buttons abgeschickt wird) bestimmte Teile des Strings raussucht.

Bin da dank Leuten aus einer chrome "group" (warum können die kein normales Forum machen, wie bei Firefox auch?)
shcon so weit dass ich irgendwie in die Webseite ein Script injekte dass die http responses im auge behält und wnen meine gesuchte response kommt, mir die substrings daraus auf die konsole druckt.
So sehen aktuell die 3 Dateien aus:
(manifest.json, muss ja immer dabei sein; write.js, der in die Seite reingebrachte Code; und bg.js, das auf mysteriöse Weise den Code in die Seite bringt. Es funktioniert, also beschwer ich mich nicht :-))
manifest.json:

Code:

{
  "name": "Test3",
  "description": "blabla",
  "version": "1.0",
  "manifest_version": 3,
      "background": {"service_worker": "bg.js"},
  "permissions": ["scripting"],
  "host_permissions": ["<all_urls>"]


}

write.js:

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

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

            }
        });

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

})(XMLHttpRequest);

bg.js:

Code:

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',
  }]);
});

Jetzt abe ich es wie gesagt soweit dass ich in der write.js Datei den mittigen Part anpassen kann um mir Infos aus der http request oder der response auf die Konsole drucken zu lassen.

Ich habe wie gesagt nur wenig Ahnung was da passiert, der Code ist aus Internetstücken zusammengesetzt.

Wie kann ich es nun machen dass ich eine Art Popup/Overlay oder so mit dem gesuchten String auf der Seite anzeige?
Die DOM soll in dem Sinne nicht verändert werden weil ich unter Anderem auf manche Buttons klicke.
Wenn da irgendwo was eingefügt wird, sind die Koordibaten wieder ganz anders.

Ih denke und hoffe da eher darauf dass auf die sichtbare Webseite einfach so obenlinks ein kleines Fenster drübergelegt wird, vielleicht 1 cm hoch und 2 cm breit oder so, weißer hintergrund, schwarzer text.
Wo einfach, sobald die gesuchte request kommt, der text aus der response da rein geschrieben wird.

Falls von interesse ist wozu das sein soll Alles:
Geht um Roulette, will mir einen Bot bauen um Roulette zu spielen.
Wenn der dann auf den "Drehen" Button klickt, wird ja eine neue Zahl gezogen.
Hierbei geht eine http request an den server und eine response kommt zurück. In der Response  steht dann auch (in dem ellenlangen response-body-string) welche zahl gedreht wurde, das will ich auslesen.
Und wie gesagt in einem unauffälligen fenster an einer stelle, wo es den Spielverlauf nicht stört, anzeigen lassen.
könnte bspw. oben links in der ecke dann einfahc ein kleines feld mit "13" drin oder so sein.

der eigentliche roulettebot mache ich übrigens in java, werde dann mit farberkennung oder ocr oder so eben von der webseite "ablesen" was da in dem kästchen steht. ggbfls. statt die zahl in das feld zu schreiben, würde ich vielleciht auch einfach das feld in der farbe der gezogenen zahl anmalen. oder so, keien Ahnung.
Müsste erst mal wissen wie ich möglichst easy so ein Feld über die bestehende websitenfläche obendrauf male.