waitForElement

Waits for an element using the MutationObserver API

2025-05-26 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트는 직접 설치하는 용도가 아닙니다. 다른 스크립트에서 메타 지시문 // @require https://update.greatest.deepsurf.us/scripts/528234/1596455/waitForElement.js을(를) 사용하여 포함하는 라이브러리입니다.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         waitForElement
// @namespace    Violentmonkey Scripts
// @version      2.0
// @description  Waits for an element using the MutationObserver API
// @author       maanimis
// @grant        none
// ==/UserScript==
 
/**
 * Waits for a element of a given selector.
 *
 * @param {string} selector
 * @returns {Promise<HTMLElement>}
 */
 function waitForElement(selector) {
  return new Promise((resolve) => {
    // Ensure <body> is ready
    function ensureBodyReady(callback) {
      if (document.body) return callback();
      requestAnimationFrame(() => ensureBodyReady(callback));
    }

    ensureBodyReady(() => {
      const ELEMENT = document.querySelector(selector);
      if (ELEMENT) return resolve(ELEMENT);

      console.log("can't find element for selector:", selector, "waiting...");

      const observer = new MutationObserver(() => {
        const ELEMENT = document.querySelector(selector);
        if (ELEMENT) {
          console.log("element found!!");
          resolve(ELEMENT);
          observer.disconnect();
        }
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    });
  });
}