如何将用户脚本执行域中的DOM节点对象映射到页面执行域中的对应对象？

嘿，这个问题确实戳中了用户脚本沙箱机制的一个痛点——隔离性虽然能保护脚本不被页面的乱改影响，但真要拿页面给DOM加的自定义属性时就头疼了！别担心，这里有几个靠谱的方法帮你跨域拿到对应的DOM节点实例：

核心原理 #

用户脚本和页面运行在不同的执行域（realm），但它们指向的是同一个实际DOM元素，只是每个域都有自己的包装对象。浏览器会自动处理跨域DOM对象的映射，我们只要利用这个特性就能完成转换。

方法1：通用转换法（无标识限制） #

这是最灵活的方法，不管节点有没有唯一ID或标识都能用：

// 假设你已经在用户脚本域拿到了目标节点
const scriptDomainNode = document.getElementById('node');

// 在页面域创建临时函数，利用浏览器的跨域映射返回页面域的节点实例
unsafeWindow._tempNodeConverter = function(node) {
  return node;
};

// 调用页面域的函数，传入脚本域节点，得到页面域的对应节点
const pageDomainNode = unsafeWindow._tempNodeConverter(scriptDomainNode);

// 用完记得清理临时函数，避免污染页面全局环境
delete unsafeWindow._tempNodeConverter;

// 现在就能访问页面给节点加的自定义属性了！
console.log(pageDomainNode.test); // 输出 42

方法2：快捷查找法（适用于有唯一标识的节点） #

如果你的节点有唯一ID、专属class这类能精准定位的标识，直接在页面域重新查找更简洁：

const scriptDomainNode = document.getElementById('node');
// 用页面域的document重新查找，得到的就是页面域的节点实例
const pageDomainNode = unsafeWindow.document.getElementById(scriptDomainNode.id);

console.log(pageDomainNode.test); // 输出 42

注意事项 #

• unsafeWindow是Tampermonkey、Greasemonkey等主流用户脚本管理器提供的对象，用来访问页面执行域的全局环境，不同管理器的实现略有差异，但基本都支持。
• 突破沙箱隔离会让脚本暴露在页面的修改之下，尽量只在必要时使用，且避免在页面域执行复杂逻辑，降低风险。

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