读取shadow-root(closed)里面的内容

亦凉 2022-09-06 01:29 342阅读 0赞

# 读取shadow-root(closed)里面的内容 #

#### 问题描述 ####

在一次查看网页的内容时，发现有的内容没有办法解析出来，而我要的元素就隐藏在shadow-root(closed)中。而我知道只有shadow-root(open)中的元素才是可以访问的。于是开始在网上查找相关内容。

#### 官网介绍 ####

而在官网中，作者介绍的一句话让我印象深刻：如果一个关闭的影子根和打开的影子根一样可以访问并获取的话，那为什么还需要一个关闭的影子根呢？

同时在官网中还存在唯一的解决方式，就是通过重载shadow-root(closed)成shadow-root(open)。

#### 测试过程 ####

尝试在网页中将元素通过这种方式重新加载，但是似乎并没有起任何作用，同时也在一些有影子根的网站中测试过了，然而依旧没有起作用。网上一番求药，基本都是用js语句获取打开的shadow-root(open)的教程，最后终于在stark-overflow上找到了唯一的解决方案（坑很多，Google上基本有shadow-root(closed)的博客都看过了）。同样也是将shadow-root(closed)转成shadow-root(open)状态。至于怎么从open状态下取数据，可以自行百度，相关解决方案有很多。

#### 解决方案 ####

思路就是将closed改成open状态，然后再从中通过js访问数据。但是既然在浏览器的控制台中没有办法让它实现，那我们就在程序加载之前将影子根打开。

这里我贴上三个文件的代码。写完后只需要在Google浏览器的开发者模式中加载解压好的拓展程序(带有这三个文件的文件夹)就可以了。就像平时自己下载的插件一样。  
injected.js

Element.prototype._attachShadow = Element.prototype.attachShadow;
    Element.prototype.attachShadow = function () { 
        console.log('attachShadow');
        return this._attachShadow( {  mode: "open" } );
    };

manifest.json

\{  
“name”: “SeleniumTesting”,  
“description”: “将网页上的shadow-root(closed)重载成shadow-root(open)”,  
“version”: “1.0”,  
“author”: “Author”,  
“manifest\_version”: 2,  
“permissions”: \["<all\_urls>", “https://www.baidu.com/*"\],  
“content\_scripts”: \[\{  
“matches”: \["https://你需要让它生效的网站.com/*”\],  
“run\_at”: “document\_start”,  
“all\_frames”: true,  
“js”: \[“shadowInject.js”\]  
\}\],  
“web\_accessible\_resources”: \[“injected.js”\]  
\}

shadowInject.js

const injectedScript = document.createElement('script');
    injectedScript.src = chrome.extension.getURL('injected.js');
    (document.head || document.documentElement).appendChild(injectedScript);

全程只需要在第二个网站中修改你需要让它生效的网站域名即可。

如果说看不懂这三个文件，有兴趣的话可以百度看一下这三个文件的书写规则，以及每个文件内参数代表的内容。

最后看一下修改前和修改后的对比图：  
before  
![在这里插入图片描述][373d9f9764074d67ac8c4de7c1ac1aed.png]  
after  
![在这里插入图片描述][cca9814cc9404e45a5fa326fcc88c0e9.png]  
插件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpZ19fYmFuYW5h_size_16_color_FFFFFF_t_70]

[373d9f9764074d67ac8c4de7c1ac1aed.png]: /images/20220829/8e527e22d9e4493c8c64de801ef6fe0f.png
[cca9814cc9404e45a5fa326fcc88c0e9.png]: /images/20220829/ea3099d590c247d4a088f0293afe15a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpZ19fYmFuYW5h_size_16_color_FFFFFF_t_70]: /images/20220829/cb7cb3d7e25241458aa448dfa5ea3adb.png