在完成加载之前使用 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 方面我有：

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 以在初始加载时隐藏内容区域，并在修改内容后将其设置为在 javascript 中可见？

CSS 文件将如下所示：

#contentArea { display:none; } 

或者

#contentArea { visibility:hidden; }

你可以使用以下方法注入它：

    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';
}