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

读取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

after

插件：