如何解决如何检测带有阴影 dom 的元素?
我试图通过检查扩展程序是否在正文中添加了特定的 div 来检测是否安装了扩展程序。
安装扩展后,它会在正文末尾添加以下 div:
const str = "anaconda";
str.match(/[a]{2,}/);
有没有办法用一个简单的文档查询来检测这个元素,比如:
<div>
#shadow-root (closed)
<div id="extension_name">
<!--div content here-->
</div>
</div>
如果没有,有什么关于检查此元素是否存在的有效方法的建议吗?
解决方法
所以看起来在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 的帮助。
,您的代码:
-
当有多个/嵌套的 shadowRoots 时不检测
-
不检测任何何时是
closed
shadowRoot
改为
-
让您的组件在
document
级别监听extension_name
事件 -
让您的测试代码发送一个
extension_name
事件
您甚至可以在 event.detail
中传递一个函数并让您的扩展程序执行它
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。