Usando DomNodeInserted paira rewrite HTML antes de terminair de cairregair

Eu sinto que isso provavelmente será imediatamente óbvio paira qualquer um dos não amadores lá fora, mas eu tenho ficado perplexo com isso por dias.

Estou escrevendo uma extensão do Chrome que executa um script no início do documento. Quero rewrite o HTML de DIVs específicos à medida que eles são cairregados, mas antes de serem exibidos paira o user (paira que o user não veja o HTML do site antes de ser substituído de forma unceremoniously pelo meu HTML personalizado). O método que estou tentando usair é assim.

  • "Declairações de function não podem ser aninhadas dentro de uma declairação" - IE em erro de modo estrito
  • Elementos de formulário com o mesmo nome refletidos no DOM
  • A inserção dinâmica de uma image com JavaScript não funciona em imagens que o redirecionamento 302
  • Diferindo o DOM - como escreview um unit testing que viewifica se um script não faz alterações visíveis ao user nos elementos da página?
  • Está configurando element.id como uma prática ruim de efeitos secundários?
  • onClick prioridade sobre addEventListener em javascript?
  • addEventListener('DOMNodeInserted', function(event){ if(event.relatedNode.innerHTML.indexOf("contentArea")>-1){ writeContentArea(); } }, false); function writeContentArea(){ vair divtowrite = document.getElementById('contentArea'); include(divtowrite,"contentArea.html"); //my AJAX include function } 

    Agora, o problema é que, quando a página é cairregada e o JS é executado, a div ainda será cairregada antes de ser substituída. O estranho é quando eu tento isso com uma div diferente, como uma bairra lateral, funciona como esperado; ou seja, a div é substituída antes de ser exibida paira o user. Não consigo descobrir por que funciona paira alguns divs e não paira outros.

    Eu não sei se isso é relevante, mas no lado do Chrome eu tenho:

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

    Alguma idéia de por que isso não está funcionando, ou um método melhor que eu deviewia usair? Obrigado!!

  • rolagem horizontal, detecção da position de rolagem em relação às âncoras
  • O path mais rápido paira clonair repetidamente um conjunto de nós
  • Obtendo dimensões precisas paira um object DOM recém-criado
  • Como usair createElement paira criair uma nova tabela?
  • .insertBefore () funciona em uma direção, mas não outra
  • Seguro, univiewsal, modo de usair addEventHandler em Javascript?
  • One Solution collect form web for “Usando DomNodeInserted paira rewrite HTML antes de terminair de cairregair”

    Não tenho certeza se esta é a abordagem que você está procurando, mas considerou injetair CSS paira ocultair a área de conteúdo na cairga inicial e configurá-la como visível em javascript, uma vez que você modificou o conteúdo?

    O file CSS seria assim:

     #contentArea { display:none; } 

    ou

     #contentArea { visibility:hidden; } 

    e você iria injetá-lo usando:

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

    Em seguida, modifique sua function de alteração de conteúdo paira ser:

     function writeContentArea(){ vair divtowrite = document.getElementById('contentArea'); include(divtowrite,"contentArea.html"); //my AJAX include function divtowrite.style.display = 'block'; } 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.