@ecid1

Почему querySelector возвращает null, хотя DOM загружен?

Первый раз пробую сделать расширение для хром.
Хочу отслеживать изменения элемента на странице с помощью MutationObserver, но получаю null при попытке найти нужный элемент. Поставил проверку на загрузку DOM - не помогло. Такой элемент точно есть на странице, пробовал выполнить код в консоли браузера - всё работает.

Ошибка из-за null
TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.


manifest.json
{
  "manifest_version": 3,
  "name": "Helper",
  "version": "1.0",
  "action": {
    "default_popup": "helper.html",
    "default_icon": "helper_icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://*.site.ru/*"
      ],
      "js": [
        "./content.js"
      ],
      "run_at": "document_start",
      "all_frames": true
    }
  ],
  "web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["<all_urls>"]
  }]
}


content.js
console.log('content script start');

function run() {
	console.log('The DOM is loaded');
	let observer = new MutationObserver(mutationRecords => {
		console.log(mutationRecords);
  	});
  
	observer.observe(document.querySelector('.items_9ujCP'), {
		childList: true, 
		subtree: true,
		characterDataOldValue: true
  	});
	console.log(document.querySelector('.items_9ujCP')); // возвращает null
}

document.addEventListener("DOMContentLoaded", run);


Почитал уже подобные вопросы, вроде у всех работает подобный код. Буду рад, если кто-нибудь поможет или объяснит, что не так.
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
@ecid1 Автор вопроса
Помогла данная функция
function waitForElement(id, callback){
    var poops = setInterval(function(){
        if(document.querySelector(id)){
            clearInterval(poops);
            callback();
        }
    }, 100);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
copyhold
@copyhold
`items_9ujCP` выглядит как селектор сгенерирванный на этапе билда.
так что возможно что он меняется от билда к билду
Ответ написан
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
"run_at": "document_start",


Выполняйте свой скрипт после загрузки страницы

"run_at": "document_end",

и вот еще Дождаться загрузки DOM в расширении chrome?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы