如何通过Tampermonkey添加页面无法访问的HTML内容？

直接往页面DOM里加元素，页面脚本肯定能通过DOM API找到——因为DOM是页面和油猴脚本共享的环境。要实现隔离，最靠谱的方式是使用Shadow DOM，这是浏览器原生的DOM隔离机制，能让你添加的元素处于独立封闭环境，页面脚本无法直接访问。

具体做法：先创建一个容器元素，给它附加**封闭模式（closed）**的Shadow DOM，再把要添加的内容放到Shadow DOM内部，最后将容器挂载到页面：

// 创建容器元素
const shadowWrapper = document.createElement('div');
// 附加封闭模式的Shadow DOM，页面脚本无法获取这个shadowRoot
const shadowRoot = shadowWrapper.attachShadow({ mode: 'closed' });

// 把目标内容添加到Shadow DOM中
GM_addElement(shadowRoot, 'div', {
    textContent: 'success',
    class: 'buba'
});

// 将容器挂载到页面body
document.body.appendChild(shadowWrapper);

这种方式下，页面脚本遍历document.body时只能看到shadowWrapper容器，无法访问其内部Shadow DOM里的div.buba元素——closed模式下外部拿不到shadowRoot对象，自然没法操作里面的内容。

注：不存在100%绝对的隔离（极端场景下页面可能有特殊探测手段），但Shadow DOM是当前实现该需求最标准、最可靠的方案。

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