Chrome-Erweiterung: wie gehen ArrayBuffer oder ein Blob von content-Skript in den hintergrund, ohne seine Art?

Habe ich das content-Skript, das downloads einige binäre Daten mit XHR, die später gesendet werden, um die hintergrund-Skript:

var self = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  if (this.status == 200) {
     self.data = {
        data: xhr.response,
        contentType: xhr.getResponseHeader('Content-Type')
     };
  }
};
xhr.send();

... later ...
sendResponse({data: self.data});

Nach Erhalt dieser Daten im hintergrund-script, ich möchte eine andere form XHR-Anfrage, dass der Upload dieser binären Daten auf meinem server, so dass ich tun:

var formData = new FormData();
var bb = new WebKitBlobBuilder();
bb.append(data.data);
formData.append("data", bb.getBlob(data.contentType));
var req = new XMLHttpRequest();
req.open("POST", serverUrl);
req.send(formData);

Das problem ist, dass die Datei auf den server hochgeladen enthält nur diese Zeichenfolge: "[object object]". Ich denke, dies geschieht, weil ArrayBuffer Typ ist irgendwie verloren während der übertragung von Inhalt, Prozess in den hintergrund? Wie kann ich das lösen?

InformationsquelleAutor Michael Spector | 2011-12-21
  1. 18

    Nachrichten bestanden zwischen einem Content-Script und ein hintergrund-Seite JSON-serialisiert.

    Wenn Sie übertragen möchten eine ArrayBuffer Objekt durch ein JSON-serialisiert Kanal, wickeln Sie den Puffer in einer Ansicht, vor und nach der übertragung.

    Zeige ich ein Isoliertes Beispiel, so dass die Lösung, die allgemein anwendbar ist, und nicht nur in Ihrem Fall. Das Beispiel zeigt, wie Sie pass um ArrayBuffers und typed arrays, aber die Methode kann auch angewendet werden, um File und Blob Objekte, die mithilfe der FileReader API.

    //In your case: self.data = { data: new Uint8Array(xhr.response), ...
//Generic example:
var example = new ArrayBuffer(10);
var data = {
    //Create a view
    data: Array.apply(null, new Uint8Array(example)),
    contentType: 'x-an-example'
};

//Transport over a JSON-serialized channel. In your case: sendResponse
var transportData = JSON.stringify(data);
//"{"data":[0,0,0,0,0,0,0,0,0,0],"contentType":"x-an-example"}"

//At the receivers end. In your case: chrome.extension.onRequest
var receivedData = JSON.parse(transportData);

//data.data is an Object, NOT an ArrayBuffer or Uint8Array
receivedData.data = new Uint8Array(receivedData.data).buffer;
//Now, receivedData is the expected ArrayBuffer object

    Diese Lösung wurde erfolgreich getestet in Chrome 18 und Firefox.

    • neue Uint8Array(xhr.Reaktion) wird verwendet, um eine Aussicht auf die ArrayBuffer, so dass die einzelnen bytes können gelesen werden.

    • Array.apply(null, <Uint8Array>) wird verwendet, um zu erstellen ein einfaches array übergeben werden, indem Sie die Tasten der Uint8Array anzeigen. Dieser Schritt reduziert die Größe der serialisierten Nachricht. WARNUNG: Diese Methode funktioniert nur für kleine Datenmengen. Wenn die Größe des typisierten Arrays überschreitet, 125836, wird ein RangeError geworfen. Wenn Sie behandeln müssen große Teile der Daten, verwenden andere Methoden, um die Konvertierung zwischen typisierten arrays und einfachen arrays.

    • Beim Empfänger Ende, die original-Puffer kann erhalten werden, indem erstellen Sie eine neue Uint8Array, und das Lesen der buffer - Attribut.

    Umsetzung in Ihrem Google-Chrome-Erweiterung:

    //Part of the Content script
    self.data = {
        data: Array.apply(null, new Uint8Array(xhr.response)),
        contentType: xhr.getResponseHeader('Content-Type')
    };
...
sendResponse({data: self.data});

//Part of the background page
chrome.runtime.onMessage.addListener(function(data, sender, callback) {
    ...
    data.data = new Uint8Array(data.data).buffer;

    Dokumentation

    • +1 für Gründlichkeit. Beeindruckende Antwort!
    • Diese Array.apply(null, new Uint8Array(xhr.response)) funktioniert nicht bei großer Puffer (größer als 150Kb) Erhöhung Maximum call stack size exceededFehler. Auch für kleine Puffer wahrscheinlich ist es besser, pass Binär-strings, die JS-arrays.
    • wie kann ich drucken Sie das, was in den Puffer???
    InformationsquelleAutor Rob W
  2. 8

    Gibt es einen besseren Weg, um pass Blob (oder ArrayBuffer) zwischen Teile die gleichen Chrome-Erweiterung (Inhalte, Skripte, hintergrund-page und gewöhnlichen Webseiten) dann die Erstellung einer gewöhnlichen JS Array oder eine Binär-string und die Weitergabe dieser (manchmal sehr große) Menge Daten in einem message-body! Denken Sie daran, dass Sie JSONified beim Absender Ende und dann unJSONified beim Empfänger!

    Erstellen Sie einfach und pass Objekt-URL:

    sendResponse(URL.createObjectURL(blob));

    erstellen oder Blob ersten von ArrayBuffer:

    var blob = new Blob([ arrayBuffer ], { type: 'image/jpeg' });
sendResponse(URL.createObjectURL(blob));

    BTW XMLHttpRequest 2 zurückkehren können sowohl Blob und ArrayBuffer.

    Hinweise

    • Objekt-URLs kann sein Leben für eine qute lange Zeit so, wenn Sie brauchen keine Daten mehr, vergessen Sie nicht zu release solche URLs aufrufen URL.revokeObjectURL(objectURL)
    • Objekt-URLs wie jeder URL sind Gegenstand Cross-Origin-Restriktionen aber alle Teile der Erweiterung sind in den gleichen Ursprung natürlich.
    • BTW: ich habe ein 4x performance boost beim start übergeben werden derartige URLs anstatt die Daten selbst in meinem Chrome-Erweiterung! (Meine Daten waren ziemlich große Bilder.)
    • +1 Gute Antwort. Zusätzlich zu dem, was Sie gesagt haben: Die blob: URL wird automatisch widerrufen, wenn das Dokument entladen wird.
    • Wie hast du die Messung der Leistung?
    • Wie Sie neu-erstellen Sie ein blob aus einer objectUrl ?
    • Download der blob aus dem objectURL mit fetch-oder XHR-API.
    InformationsquelleAutor Konstantin Smolyanin
Schreibe einen Kommentar