2011-02-25 3 views
26

특히, 페이지의 모든 이미지를 평가하여 특정 속성이 있는지 확인한 다음 해당 속성을 기반으로 DOM에 divdivs를 새로 추가합니다. Chrome이 DOM에 필요한 모든 요소를로드했음을 보증하기 위해 document.ready가 실행되기 전에 이러한 수정 작업을 수행해야합니다.Chrome 확장 콘텐츠 스크립트에서 문서를 처리하기 전에 document.ready를 기다려야합니까?

내가 달려 들고있는 문제는 document.ready가 잠시 시간이 걸리고 사용자가 이미 페이지를 둘러보고 내 확장 프로그램이 아직 효과가없는 이유가 궁금하다는 것입니다. 문제는 대개 잠시 지속되지만 짜증나는 것만으로도 충분합니다.

document.ready를 기다리지 않고 대신 즉시 문서를 처리하면 은 모두 인 것처럼 보입니다. 하지만 나는 운이 좋았는지 궁금해.

답변

52

사실, 기다릴 필요가 없습니다. 즉시 Content Scripts에서 처리 할 수 ​​있습니다. run_at 속성에 document_start을 사용하지 않도록하십시오.

document_end에서 파일은 DOM이 완료된 직후에 이미지와 프레임과 같은 하위 리소스가로드되기 전에 삽입됩니다. document_idle (기본값)은 나중에 발생합니다.

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["jquery.js", "myscript.js"], 
     "run_at": "document_end" 
    } 
    ], 
    ... 
} 
+1

고마워, 그게 내가 찾고있는 정보. –

+2

확인하고 싶은 경우 동의 함 위의 언급 접근법이로드 된 문서가로드됩니다. 그러나 Document가로드 된 후에도 DOM 업데이트가 발생할 수 있습니다. 이것은 AJAX 기능 일 수 있습니다. "DOMSubtreeModified"에 대한 리스너를 추가하는 것과 같습니다. window.addEventListener ("DOMSubtreeModified", (이벤트) -> \t console.log "DOMSubtreeModified", 이벤트 \t) – Feru

2

짧은 대답 : 예.

긴 답변 : jQuery는 이미 렌더링되지 않은 DOM 요소를 가져올 수 없습니다. 나는 몇 번 문제가 생겼다는 것을 알고 있으며, 잠시 뭔가를 디버깅하는 것이 짜증스럽고, 문서에 코드를 포기하는 것을 잊었다는 것을 깨닫는다. 당신을 위해 일한다면 그것은 당신의 운이 좋기 때문입니다. 또한 스크립트가 페이지의 맨 아래에 있거나 닫는 body 태그 바로 위에 있으면 document.ready에이 태그를 래핑 할 필요가 없습니다.

+2

페이지 하단의 스크립트에 대해서는 좋은 지적입니다. Chrome 확장 프로그램 콘텐츠는 언제 어디에서 평가됩니까? –

+0

Chrome Timeline (개발자 도구)에 따르면 확장 프로그램이 마지막으로로드됩니다. 그래서 당신은 document.ready를 사용할 필요가 없을 것입니다. – thinkdevcode

+0

짧은 대답 : **'document_start'를 사용하는 경우에만 ** ** document_idle (기본값)과'document_end' 둘 다 dom 준비 후 실행됩니다. –

관련 문제