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

Question

[ecid1]

Первый раз пробую сделать расширение для хром.
Хочу отслеживать изменения элемента на странице с помощью 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);

Почитал уже подобные вопросы, вроде у всех работает подобный код. Буду рад, если кто-нибудь поможет или объяснит, что не так.

Comments

[Aetae]

Observer не может начать наблюдение за элементом которого неть. Надо заставить его наблюдать за родителем(или вообще всем деревом), а уже внутри ловить появление элемента.

Также хочу заметить:

Название класса всегда одинаковое при перезагрузке страницы

Это не так. Название всегда одинаковое ровно до тех пор, как хозяева сайта не выпустят следующую версию приложения, а это, в зависимости от их активности , хоть каждый день может происходить.
Потому в таких случаях лучше использовать селекторы не завязанные на явно сгенерированную часть, например [class^="items_"].

P.S. Я у себя использую вспомогательные функции примерно такого вида:

// всякое 
const EMPTY_NODE_LIST = Object.freeze(document.createElement('button').labels);

function getConstructorName(value) {
  return Object.prototype.toString.call(value).replace(/^\[object (.*)\]$/, '$1');
}

function isPlainObject(value) {
  return !!value && getConstructorName(value) === 'Object';
}

function isElement(value) {
  return !!value && value.nodeType === 1 && getConstructorName(value).endsWith('Element');
}

// наблюдатель - важно что он отписывает себя на время колбэка, чтоб не поучилось вечного цикла
function tm_observe(callback, root, immediate = true) {
  if(isPlainObject(root)) {
    var options;
    ({root = document.body || document.documentElement, immediate = true, ...options} = root);
  } else if (!isElement(root)) {
    immediate = root === undefined ? true : root;
    root = document.body || document.documentElement;
  }

  let stop = false;
  const observer = new MutationObserver((mutationsList, observer) => {
    disconnect();

    stop = callback(mutationsList, observer) === true;

    observe();
  })

  if(immediate) {
    stop = callback([Object.setPrototypeOf({
      type: 'childList',
      target: root,
      addedNodes: root.querySelectorAll(':scope > *'),
      removedNodes: EMPTY_NODE_LIST,
      previousSibling: null,
      nextSibling: null,
      attributeName: null,
      attributeNamespace: null,
      oldValue: null,
    }, MutationRecord.prototype)], observer) === true;
  }

  const observe = () => !stop && observer.observe(root, {
    childList: true,
    subtree: true,
    ...options
  });

  const disconnect = () => observer.disconnect();

  observe();
};

// ожидание по селектору с помощью наблюдателя 
function waitSelector(root, selector) {
  if (!selector) [selector, root] = [root, document];

  return new Promise(resolve => tm_observe(() => {
    const node = root.querySelector(selector);
    if (!node) return;
   
    resolve(node);

    return true;
  }));
}

await waitSelector('[class^="items_"]')

Answer 1

[ecid1]

Помогла данная функция

function waitForElement(id, callback){
    var poops = setInterval(function(){
        if(document.querySelector(id)){
            clearInterval(poops);
            callback();
        }
    }, 100);
}

Comments

[Александр]

Answer 2

[copyhold]

`items_9ujCP` выглядит как селектор сгенерирванный на этапе билда.
так что возможно что он меняется от билда к билду

Comments

[ecid1]

Название класса всегда одинаковое при перезагрузке страницы

Answer 3

[Сергей delphinpro]

"run_at": "document_start",

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

"run_at": "document_end",

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

Comments

[ecid1]

Я пробовал.
В таком случае у меня даже не выводит в консоль "The DOM is loaded"

[Александр]

ecid1, https://developer.mozilla.org/en-US/docs/Web/API/D...

const onReady = (listener) => {
  if (document.readyState === 'interactive' || document.readyState === 'complete') {
    listener();
  } else {
    window.addEventListener('DOMContentLoaded', () => listener());
  }
};