如何检测带有shadow dom的元素？答案

【问题标题】：How to detect elements with shadow dom?如何检测带有shadow dom的元素？
【发布时间】：2021-05-15 15:10:14
【问题描述】：

我试图通过检查是否在正文中添加特定 div 来检测是否安装了扩展。

安装扩展时，它会在正文末尾添加以下 div：

<div>
  #shadow-root (closed)
    <div id="extension_name">
      <!--div content here-->
    </div>
</div>

有没有办法通过一个简单的文档查询来检测这个元素，比如：

document.body.queryselector(':shadow-root #extension-name')

如果没有，有什么关于检查该元素是否存在的有效方法的建议吗？

【问题讨论】：

如果扩展程序在其内容脚本中创建了元素（即不在page context 中），则页面无法窥视封闭的影子根。在页面上下文的情况下，它取决于时间：如果扩展不能保护自己免受欺骗，那么你可以挂钩 Element.prototype.attachShadow。
如果您将影子根附加到具有 mode: 封闭集的自定义元素，您将无法从外部访问影子 DOM MDN

标签： javascript html css google-chrome-extension shadow-dom

【解决方案1】：

所以看起来在 shadow dom 关闭时无法获取信息。所以我必须找到检测扩展的替代方法。

当它打开时，我们可以使用：

const isInstalled = Array.from(window.document.body.children).reverse().find(
  (item) => item.localName === 'div' && item.shadowRoot !== null && item.shadowRoot.querySelector('#extension_name')
) !== undefined;

Ps：大多数扩展都将 div 附加在正文的末尾。所以reverse是为了优化查询。

感谢@wOxxOm 和@Louys Patrice Bessette 的帮助。

【讨论】：

【解决方案2】：

您的代码：

不检测何时有多个/嵌套的 shadowRoots
没有检测到任何何时是closedshadowRoot

改为

让您的组件在document 级别监听extension_name 事件
让您的测试代码发送一个extension_name 事件

您甚至可以在event.detail 中传递一个函数并让您的扩展程序执行它

【讨论】：