javascript - 通过 chrome.tabs.sendMessage 发送 DOM 节点对象

Question

我正在编写 Chrome 扩展程序。我需要将一个元素对象从内容脚本传递到后台脚本。

目标:
该扩展是关于记录和重播用户操作的。
数据保存在扩展程序的本地存储中，每个选项卡的不同对象(按选项卡 ID)。
数据结构是一个列表{x: x, y:y, element: element}
当用户想要重播时，我为列表中的每个对象使用一个循环，并在元素上使用 .click()

内容脚本中的代码:

向后台脚本发送消息的函数:

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

获取元素并感知它的函数:

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

后台脚本中的代码:

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

问题是我发送的元素被接收为一个空对象。在发送和接收时通知 console.log。输出是:

发送:

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

接收:

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

* 元素对象是空的，只有_proto_

这是什么原因？
我该如何解决这个问题？

看起来问题不是序列化 DOM 对象，因为对象在发送前看起来正常，但在接收时看起来不正常。

Answer 1

您不能将 DOM 元素作为 runtime.sendMessage() 发送留言

runtime.sendMessage()中的消息必须是“一个 JSON 化的对象”。 DOM 元素/节点不是 JSON 化的。因此，您不能发送它们。在您的情况下，您正在尝试发送 click 事件的 target。

最终，您需要做什么而不是尝试序列化 DOM 元素，这取决于您在后台脚本中需要此信息的原因。

如果要标识元素，则需要确定唯一的选择器。一种方法是为元素分配一个唯一 ID 并在您的消息中传递该 ID。但是，只有当您希望在该选项卡中加载该页面时引用 DOM 节点时，这才会有效。显然，一旦浏览器离开页面或将其加载到不同的选项卡中，您分配的任何 ID 都将不可用。因此，该替代方案仅适用于在当前页面的生命周期内标识元素。但是，对于您只想存储实际 DOM 元素的应用程序，分配唯一 ID 将是一个有效的解决方案。换句话说，存储 DOM 元素仅在页面的生命周期内有效，因此分配唯一 ID 将在同一时间段(当前页面的生命周期)内有效。

如果您想要在重新加载页面时唯一标识元素的方法，则需要使用与分配 ID 不同的方法。使用什么在很大程度上取决于您打算如何选择要使用的元素以及您希望选择相对于页面结构变化的弹性(例如，在结构是动态的页面上，您可能需要使用除静态页面之外的其他方法)。

对于您的应用程序，如果您想记录和回放用户操作，您需要根据鼠标在页面中的位置或根据用户启动事件的元素来确定是否要记录这些操作.这是用于记录/回放/模拟用户操作的应用程序/语言的常见问题。通常，用户可以选择他们希望如何记录此类用户交互(例如，通过位置或元素)。如果您选择仅通过事件发生时鼠标的位置来存储用户操作，那么您可以使用 Document.elementFromPoint()确定此时哪个元素现在并将事件发送到该元素。但是，这样做时，您还需要跟踪文档的滚动状态，并根据鼠标在当前显示中的位置或相对于文档的位置来确定是否要存储鼠标的位置。