[javascript] TamperMonkey - @run-at

문제점 및 증상

TamperMonkey 확장에서 자바스크립트로 youtube 다운로드 버튼을 추가 생성하려할 때 다음과 같은 오류가 발생하며 버튼이 생성되지 않는 경우가 종종 있었습니다.

Error youtube download:  TypeError: Cannot read properties of null (reading 'insertBefore')
    at userscript.html?name=Download%2520button%2520for%2520Youtube%2520Downloader.user.js&id=a7dc5884-6ccc-4756-9ef9-6da5ae0b320b:90:7
    at Proxy. (userscript.html?name=Download%2520button%2520for%2520Youtube%2520Downloader.user.js&id=a7dc5884-6ccc-4756-9ef9-6da5ae0b320b:126:3)
    at St (:9:89)
    at userscript.html?name=Download%2520button%2520for%2520Youtube%2520Downloader.user.js&id=a7dc5884-6ccc-4756-9ef9-6da5ae0b320b:1:87
    at window.__f__lck0c44z.zi (userscript.html?name=Download%2520button%2520for%2520Youtube%2520Downloader.user.js&id=a7dc5884-6ccc-4756-9ef9-6da5ae0b320b:1:552)
    at St (:9:89)
    at n (:71:248)
    at :74:85
    at p (:68:59)

---

해결 방안

특이한 점은 다음과 같이 실행하는 것을 페이지 로딩이 끝난 페이지에서 실행하면 정상적으로 결과가 나온다는 점이었습니다.

window.document.querySelector("#center");

tampermonkey 문서를 열어서 "loaded"로 검색을 해보니, 딱 "@run-at" 헤더에 관련된 설정이 있었습니다.

이전까지는 "@run-at" 헤더의 설정을 "document-end"로 했어도 크게 문제가 없었으나, 유튜브의 경우에는 SPA 형식이라 페이지 전체가 로딩되는 시점이 더 늦는 것 같았습니다.

그래서 "@run-at" 헤더의 설정을 "document-idle"로 변경해 보았더니, 정상적으로 잘 동작하였습니다.

// @run-at       document-idle

---

참고자료

• "@run - Tampermonkey documentation":https://www.tampermonkey.net/documentation.php#meta:run_at