Чтобы извлечь информацию из открытого Shadow DOM с помощью `querySelector` в Tampermonkey, вам нужно будет выполнить несколько шагов. Предположим, что вам нужно получить доступ к элементу внутри открытого `shadowRoot`. Давайте рассмотрим пример.
### Пример HTML
Предположим, у нас есть следующий HTML:
```html
<div id="my-element">
#shadow-root (open)
<div class="shadow-content">Hello, World!</div>
</div>
```
### Код Tampermonkey
Для доступа к этому элементу из вашего скрипта Tampermonkey вы можете использовать следующий код:
```javascript
// ==UserScript==
// @name Example script to access shadow DOM
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Access shadow DOM example
// @include *://*/* // Замените на нужный вам URL
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Функция для получения содержимого из shadow root
function getShadowContent() {
// Находим элемент, который содержит shadow root
const hostElement = document.querySelector('#my-element');
if (hostElement) {
// Получаем shadowRoot
const shadowRoot = hostElement.shadowRoot;
if (shadowRoot) {
// Теперь мы можем использовать querySelector внутри shadowRoot
const shadowContent = shadowRoot.querySelector('.shadow-content');
if (shadowContent) {
console.log(shadowContent.textContent); // Выводим содержимое
} else {
console.log('Элемент с классом "shadow-content" не найден.');
}
} else {
console.log('shadowRoot не найден.');
}
} else {
console.log('Элемент с id "my-element" не найден.');
}
}
// Вызываем функцию, возможно, после загрузки страницы
window.addEventListener('load', getShadowContent);
})();
```
### Объяснение кода
1. **Поиск элемента**: Сначала мы находим элемент, который содержит `shadowRoot`, используя `document.querySelector`.
2. **Получение shadowRoot**: Если элемент найден, мы получаем его `shadowRoot`.
3. **Доступ к содержимому**: Далее мы можем использовать `querySelector` для поиска элементов внутри `shadowRoot`.
4. **Ваш скрипт Tampermonkey**: Убедитесь, что у вас правильно настроены параметры Tampermonkey, такие как `@include`, чтобы скрипт запускался на нужных страницах.
### Заметки
- Убедитесь, что DOM полностью загружен перед попыткой доступа к элементам. В примере используется `window.addEventListener('load', ...)`, чтобы убедиться, что весь контент доступен.
- Проверьте коды в консоли разработчика, чтобы удостовериться, что элементы действительно существуют и вы обращаетесь к ним правильно.