谷歌浏览器插件录制动态 DOM 元素

背景

在开发谷歌浏览器插件以录制用户行为时，针对使用 Vue.js 或 React 等现代前端框架的应用，动态添加的元素可能未被正确识别和记录。

解决方案

使用 MutationObserver 监听 DOM 变化：MutationObserver 是一个用于监听 DOM 树变化的接口，可以检测到元素的添加、删除或属性变化。通过在插件中使用 MutationObserver，可以实时捕获动态添加的元素及其事件。

需要注意的是，MutationObserver 本身只能监听 DOM 变化，而 event 对象只有在事件触发时才能获取，因此需要配合事件监听器来捕获事件对象的属性信息。

js 复制代码

// 定义一个事件处理器，用于捕获事件对象的属性
function eventHandler(event) {
  // 这里可以获取到 event 对象的各项属性，如：
  console.log("事件类型：", event.type);
  console.log("事件目标：", event.target);
  console.log("鼠标坐标：", { x: event.clientX, y: event.clientY });
  // 如有需要，可记录其他属性，例如 event.timeStamp、event.currentTarget 等
}

// 定义 MutationObserver 回调函数，用于处理 DOM 新增的节点
const observerCallback = (mutationsList) => {
  mutationsList.forEach(mutation => {
    // 仅处理新增节点
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        // 判断 node 是否为元素节点
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 为动态新增元素注册事件监听器，这里以 click 事件为例
          node.addEventListener('click', eventHandler, false);

          // 如果节点内部还有动态添加的子节点，也可以通过 querySelectorAll 为其绑定
          node.querySelectorAll('*').forEach(child => {
            child.addEventListener('click', eventHandler, false);
          });
        }
      });
    }
  });
};

// 创建 MutationObserver 实例，并传入回调函数
const observer = new MutationObserver(observerCallback);

// 开始观察整个文档 body 下的子节点变化（包括后代节点）
observer.observe(document.body, { childList: true, subtree: true });

说明

MutationObserver 监听 DOM 变化

上述代码中，我们使用 MutationObserver 来检测整个 document.body 内部新增的节点。当检测到某个节点被添加时，判断该节点是否为元素（nodeType 为 ELEMENT_NODE），然后为其注册 click 事件监听器。
事件监听器捕获 event 对象

自定义的 eventHandler 方法会在 click 事件触发时被调用，此时可以通过传入的 event 参数获取诸如 event.type、event.target、以及鼠标点击位置等属性。你可以根据需求扩展记录或处理更多的 event 对象属性。
处理深层嵌套的动态添加

如果一个新增的节点内部还包含多个元素，且你希望每个元素都能捕获点击事件，可以使用 querySelectorAll('*') 遍历所有子节点，并为每个子节点绑定监听器。
初始页面元素

考虑到页面初始加载时已经存在的元素也可能需要捕获事件，可以在脚本初始化时对文档中所有元素提前进行绑定。
注意点
- 如果应用中采用了事件委托（例如大范围绑定一个 click 事件监听器在父容器上），则可以直接在父容器上捕获所有子元素的点击事件，而不必为每个元素单独绑定。
- 动态绑定过多事件监听器可能会对性能产生一定影响，需要根据实际场景进行优化，或考虑使用事件委托方式。

通过这种方式，可以在监听 DOM 变化的同时，确保新添加的元素在触发事件时能够获取到完整的事件对象属性，从而实现用户行为的完整录制。

谷歌浏览器插件 录制动态 DOM 元素

背景

解决方案

说明

谷歌浏览器插件录制动态 DOM 元素