5

我觉得这对于任何非业余爱好者来说可能会立即显而易见，但我已经为此困扰了好几天。

我正在编写一个在文档开始时执行脚本的 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"}
        );
    }

});

关于为什么这不起作用的任何想法，或者我应该使用的更好方法？谢谢！！

4

1 回答 1

0

不确定这是否是您正在寻找的方法，但您是否考虑过注入 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';
}
于 2012-11-07T21:53:23.017 回答