로드를 완료하기 전에 DomNodeInserted를 사용하여 HTML을 다시 작성하십시오.

Question

아마 아마 아마추어가 아닌 다른 어떤 아마추어에게는 즉시 명백하게 느껴질 것 같지만 필자는 며칠 동안이 문제에 곤란을 겪었습니다.

문서 시작시 스크립트를 실행하는 Chrome 확장 프로그램을 작성 중입니다. 로드 할 때 특정 DIV의 HTML을 다시 작성하려고하지만 사용자에게 표시되기 전에 (예를 들어, 사용자가 HTML을보기 전에 사이트의 HTML을 보지 못하도록합니다.) 사용하려는 방법은 다음과 같습니다.

addEventListener('DOMNodeInserted', function(event){ 
    if(event.relatedNode.innerHTML.indexOf("contentArea")>-1){ 
     writeContentArea(); 
    } 
}, false); 

function writeContentArea(){ 

    var divtowrite = document.getElementById('contentArea'); 
    include(divtowrite,"contentArea.html"); //my AJAX include function 

} 

이제 페이지가로드되고 JS가 실행될 때 div가 대체되기 전에 div가 계속로드됩니다. 이상한 일은 사이드 바처럼 다른 div로 이것을 시도 할 때 예상대로 작동합니다. 즉, div가 사용자에게 표시되기 전에 대체됩니다. 왜 일부 div 및 다른 사람들을 위해 작동하는지 알 수 없습니다. 이 관련된 경우

는 모르겠지만, 크롬 측에서 내가 가진 :

chrome.tabs.getSelected(null, function(tab) { 

    if(tab.url.indexOf("search.php") > -1){ 
     chrome.tabs.executeScript(null, 
      {file: "fhrun.js", allFrames: false, runAt: "document_start"} 
     ); 
    } 

}); 

이 작동하지 않는 이유의 어떤 아이디어, 또는 내가 사용해야 더 나은 방법은? 감사!!

Answer 1

찾고있는 접근 방식이 맞는지는 모르지만 처음로드 할 때 콘텐츠 영역을 숨기고 삽입 한 CSS를 콘텐츠 수정 후 자바 스크립트에 표시되도록 설정 했습니까?

#contentArea { display:none; } 

또는

#contentArea { visibility:hidden; } 

를 당신은 사용하여 주입하는 것 :

CSS 파일은 다음과 같이 읽을 것

chrome.tabs.insertCSS(null, 
{file: "youfile.css", allFrames: false, runAt: "document_start"}); 

는 다음으로 기능을 변경하여 내용을 수정할 수 :

function writeContentArea(){ 
    var divtowrite = document.getElementById('contentArea'); 
    include(divtowrite,"contentArea.html"); //my AJAX include function 
    divtowrite.style.display = 'block'; 
}