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而不适用于其他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';
}

使用DomNodeInserted在完成加载之前重写HTML

1 个答案: