Greasemonkey: document.head는 @run-at document-start일 때 null입니다.

에 만든 2017년 06월 15일 · 9코멘트 · 출처: greasemonkey/greasemonkey

환경

테스트 사용자 스크립트:

// ==UserScript==
// <strong i="15">@name</strong>        HeadTest
// <strong i="16">@namespace</strong>   HeadTest
// <strong i="17">@include</strong>     *
// @run-at      document-start
// <strong i="18">@version</strong>     1
// <strong i="19">@grant</strong>       none
// ==/UserScript==
AddGlobalStyle('body{background-color:red;}');

function AddGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName("head")[0];
    console.log("[Test]: Head: %o", head); //DEBUG
    console.log("[Test]: document.head: %o", document.head); //DEBUG
}

예상 결과:

[Test]: Head:  <head> 
[Test]: document.head:  <head>

실제 결과:

[Test]: Head:  undefined
[Test]: document.head:  null

이 문제는 GM_addStyle 에도 적용됩니다.

출처

byzod

👍5 👎1

가장 유용한 댓글

@the8472 현재 document-start 의 동작이 올바르고 의도적이라면 스타일을 추가해야 할 때마다 관찰자를 사용해야 합니다.
같은 것

function addGlobalStyle(css){
  let headHunter = new MutationObserver(
    records => {
    ; check mutation records
    ; is added node's tag name 'head'?
    ; create a style node then throw it in
    ; then disconnect us
   }
  );
  headhunter.observer(document, {childlist : true});
}

document-end 앞에 스타일을 추가하는 모든 스크립트에 필요합니다. 그것은 지루하다.

GM_addstyle 가 저를 위해 그렇게 해주거나 위키에 유용한 경고를 작성하기를 바랍니다. ", 등)

byzod 에 2017년 06월 23일

👍2

모든 9 댓글

마지막 장점: Firefox 55.0a1(2017-03-17)
https://hg.mozilla.org/mozilla-central/rev/39607304b774591fa6e32c4b06158d869483c312 에서 빌드

첫 번째 불량: Firefox 55.0a1(2017-03-17)
https://hg.mozilla.org/mozilla-central/rev/23a4b7430dd7e83a2809bf3dc41471f154301eda 에서 빌드

푸시로그:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=39607304b774591fa6e32c4b06158d869483c312&tochange=23a4b7430dd7e83a2809bf3dc41471

버그 1333990 이 용의자입니다.

참조 #1849

janekptacijarabaci 에 2017년 06월 15일

👍2

@janekptacijarabaci 해결 방법을 찾았습니다.

setTimeout(()=>{
    AddGlobalStyle('body{background-color:red;}');
});

불안정하고 신뢰할 수 없어 보이지만 이것이 현재 내가 찾을 수 있는 가장 간단한 방법으로 작동하게 만듭니다.

byzod 에 2017년 06월 16일

...그리고 문서는 여전히 잘못되었습니다.
https://developer.mozilla.org/en-US/docs/Observer_Notifications#Documents

https://bugzilla.mozilla.org/show_bug.cgi?id=1333990#c128

janekptacijarabaci 에 2017년 06월 16일

나는 이것이 버그라고 생각하지 않는다. document-start 는 매우 일찍 발생합니다. 이를 통해 사용자 스크립트는 콘텐츠 자바스크립트가 실행되기 전에 페이지를 조작할 수 있습니다.

나중에 실행하려면 document-end 를 사용하거나 돌연변이 관찰자를 사용하여 특정 요소가 삽입될 때까지 기다리십시오.

the8472 에 2017년 06월 23일

@the8472
어쩌면 당신이 옳습니다.
MDN에 따르면:

문서 요소 삽입
문서의 루트 요소가 생성된 직후, 그러나 스크립트를 실행하기 전에 전송됩니다.

document-start ( document-element-inserted 기준)은 <html></html> 가 생성된 직후에 발생하며, 이때 <head> 는 null입니다.

그러나 이것은 페이지가 렌더링되기 전에 스타일을 추가하려고 시도하는 많은 스크립트를 중단시킵니다( document-end GM_addstyle 를 사용하면 페이지가 깜박임을 알 수 있습니다).

의도적인 것인지는 모르겠지만

byzod 에 2017년 06월 23일

GM_addStyle은 어쨌든 어리석습니다. <style> 태그를 <head> 에 삽입하기만 하면 됩니다. 필요한 경우 돌연변이 관찰자를 사용하여 직접 수행할 수 있습니다.

그러나 그것이 실제 문제라면 <head> 존재 여부를 확인하기 위해 패치될 수 있습니다. 그렇지 않은 경우 옵저버를 사용하십시오.

the8472 에 2017년 06월 23일

👎2

@the8472 현재 document-start 의 동작이 올바르고 의도적이라면 스타일을 추가해야 할 때마다 관찰자를 사용해야 합니다.
같은 것

function addGlobalStyle(css){
  let headHunter = new MutationObserver(
    records => {
    ; check mutation records
    ; is added node's tag name 'head'?
    ; create a style node then throw it in
    ; then disconnect us
   }
  );
  headhunter.observer(document, {childlist : true});
}

document-end 앞에 스타일을 추가하는 모든 스크립트에 필요합니다. 그것은 지루하다.

GM_addstyle 가 저를 위해 그렇게 해주거나 위키에 유용한 경고를 작성하기를 바랍니다. ", 등)

byzod 에 2017년 06월 23일

👍2

예, gm_addstyle을 수정해야 합니다.

그러나 스크립트가 수행할 수 있는 다른 모든 작업도 문서 시작 시 동일한 후프를 건너뛰어야 하며 이와 관련하여 특별하지 않은 스타일을 추가해야 합니다. 사용할 수 있는 DOM이 없으므로 필요한 것이 무엇이든 기다려야 합니다. 즉, 문서 시작 시 작업을 실행하는 경우 어쨌든 관찰자를 사용해야 합니다.

the8472 에 2017년 06월 23일

자세한 보고서에 감사드립니다. 하지만 이것은 WAI이고 3.x 분기는 어쨌든 ~죽었습니다. (나는 우선 우리의 새로운 웹 확장 대군주를 환영합니다.) GM_addStyle 와 같은 것들은 4.x에서 절대 존재하지 않음으로써 수정될 것입니다.

https://arantius.com/misc/greasemonkey/amazon-url-cleaner.user.js 와 같은 스크립트는 DOM이 전혀 필요하지 않으며 최대한 빨리 실행해야 합니다.

arantius 에 2017년 06월 23일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Greasemonkey: document.head는 @run-at document-start일 때 null입니다.

환경

테스트 사용자 스크립트:

예상 결과:

실제 결과:

가장 유용한 댓글

모든 9 댓글

관련 문제