如何将用户脚本自身的DOM节点对象映射到页面的DOM节点对象？

嘿，这个问题戳中了用户脚本沙箱隔离的一个常见痛点——明明看着是同一个DOM元素，就是拿不到页面给它加的自定义属性。别担心，我来给你几个实用的解决办法：

方法一：利用节点唯一标识快速匹配（简单场景） #

如果你的节点有唯一的id、专属class或者其他能精准定位的选择器，最直接的方式就是通过unsafeWindow调用页面的DOM查询方法：

// 用户脚本中已经拿到的节点
const userScriptNode = document.getElementById('node');

// 用节点的id在页面Realm中重新查询
const pageNode = unsafeWindow.document.getElementById(userScriptNode.id);
console.log(pageNode.test); // 输出42

这个方法简单粗暴，但只适用于节点有唯一标识的情况，如果节点没有id或者选择器不唯一，就不太靠谱了。

方法二：基于DOM位置关系的通用匹配（全场景适用） #

如果节点没有唯一标识，我们可以利用DOM节点的位置关系来匹配——即使在不同Realm，节点在文档中的位置是真实一致的，我们可以用compareDocumentPosition方法判断两个节点是否为同一个：

function getPageRealmNode(userNode) {
  const pageDoc = unsafeWindow.document;
  
  // 递归遍历页面Realm的DOM树，找到位置完全匹配的节点
  const traverse = (root) => {
    // DOCUMENT_POSITION_IDENTICAL表示两个节点是同一个实体
    if (root.compareDocumentPosition(userNode) === Node.DOCUMENT_POSITION_IDENTICAL) {
      return root;
    }
    // 遍历子节点继续查找
    for (const child of root.children) {
      const match = traverse(child);
      if (match) return match;
    }
    return null;
  };
  
  return traverse(pageDoc.documentElement);
}

// 使用示例
const userNode = document.getElementById('node');
const pageNode = getPageRealmNode(userNode);
console.log(pageNode.test); // 输出42

这个方法适用于所有场景，不管节点有没有标识，都能找到对应的页面Realm节点。

方法三：借助页面Realm的原生函数（高效场景） #

如果你觉得递归遍历太慢，还可以在页面Realm中创建一个匹配函数——页面Realm的isSameNode方法可以直接识别跨Realm的相同节点：

// 在页面Realm中定义一个匹配函数
const matchPageNode = unsafeWindow.eval(`
  (userScriptNode) => {
    // 这里的document和Node.prototype都是页面Realm的
    return Array.from(document.querySelectorAll('*')).find(node => node.isSameNode(userScriptNode));
  }
`);

// 用户脚本中调用这个函数
const userNode = document.getElementById('node');
const pageNode = matchPageNode(userNode);
console.log(pageNode.test); // 输出42

这个方法效率更高，尤其是在复杂DOM结构下，因为querySelectorAll的遍历是原生优化过的。

重要提醒 #

这些方法都依赖unsafeWindow（部分管理器中是window.wrappedJSObject），它会打破用户脚本的沙箱隔离，带来安全风险。所以一定要确保你信任当前页面，避免执行不可信的代码；另外不同脚本管理器对unsafeWindow的支持略有差异，使用前可以先测试适配。

内容的提问来源于stack exchange，提问作者dumbass