Ich schreibe eine Chrome-Erweiterung. Ich muss ein Elementobjekt vom Inhaltsskript an das Hintergrundskript übergeben.

Das Ziel
Die Erweiterung dient zum Aufzeichnen und Wiedergeben von Benutzeraktionen.
Die Daten werden in der lokalen Speicherung der Erweiterung auf einem anderen Objekt für jede Registerkarte gespeichert (anhand der Registerkarten-ID).
Die Datenstruktur ist eine Liste von{x: x, y:y, element: element}
Wenn der Benutzer wiedergeben möchte, verwende ich für jedes Objekt in der Liste eine Schleife und verwende.click() auf dem Element

Code im Inhaltsskript:

Die Funktion, die eine Nachricht an das Hintergrundskript sendet:

function addToEventHistory(cords) {
    console.log(cords)
    chrome.runtime.sendMessage({action: "addToEventHistory", cords: cords}, function(response) {
        return response;
    });
}

Die Funktion, die das Element abruft und erkennt:

mouseClick: function(e) {
                var target = e.target || e.srcElement
                var clickEvent = {x: e.pageX, y: e.pageY, element: target}
                addToEventHistory(clickEvent)
            }

Der Code im Hintergrundskript:

var tabId = sender.tab.id;
var existingRecords = JSON.parse(localStorage.getItem('record_'+tabId)) || [];
existingRecords.push(request.cords)
console.log(request.cords)
localStorage.setItem('record_'+tabId, JSON.stringify(existingRecords));
sendResponse();

Das Problem ist, dass das Element, das ich sende, als leeres Objekt empfangen wird. Hinweis zumconsole.log auf senden und empfangen. Die Ausgänge sind:

sending:

Object {x: 1205, y: 1067, element: div#content.snippet-hidden}

Empfang

Object {x: 1205, y: 1067, element: Object}

* das Element Objekt ist leer und hat nur_proto_

Was ist der Grund
Wie kann ich dieses Problem lösen?

Sieht so aus, als ob das Problem nicht darin besteht, das DOM-Objekt zu serialisieren, da das Objekt direkt vor dem Senden in Ordnung aussieht und beim Empfangen nicht in Ordnung ist.