如何在我的内容脚本完成DOM更改之前隐藏页面？

我使用的内容脚本基本上是通过文档，拉出数据，然后用不同的布局但相同的信息重建页面的大块。所以这是一个特殊网站的“preffity”扩展，看起来很糟糕。如何在我的内容脚本完成DOM更改之前隐藏页面？

事情是，Chrome继续前进，并在内容脚本完成该过程之前呈现该页面，因此在某些页面加载时，您可以在用较好的一个替换之前看到原始页面闪烁几帧。

浏览器不会立即开始渲染。你很少看到没有应用CSS的网站，因为“它没有及时完成”。有没有办法让渲染等待内容脚本呢？我不需要几百毫秒，只有几个毫秒。

来源

2013-02-26 user2097279

如果您使用css并通过manifest添加它，请尝试将其添加到内容脚本字段：''run_at“：”document_start“'。 – BeardFist 2013-02-26 21:49:03

@BeardFist，通过清单添加的CSS文件总是在DOM之前和内容脚本之前加载，无论“run_at”设置如何。 – 2013-02-27 02:53:09

你没有发布你的manifest.json（总是包含这个），但最可能的原因是你的脚本是the default random firing time of a content script的受害者。

也许，您需要做的只是在您的清单中将run_at设置为document_end。

但是，如果你绝对，肯定不会将没有什么显示，直到更改完成后，你需要使用一个多步骤的方法：

创建为您的扩展CSS文件并将其保存为hide_at_start.css：
```
body { 
    display: none; 
} 
```
注意，在极少数情况下，您可能需要使用display: none !important;

添加hide_at_start.css到您的清单，并设置舱单run_atdocument_start：

{ 
    "manifest_version": 2, 
    "content_scripts": [ { 
     "js":    [ "YOUR_CONTENT_SCRIPT.js" ], 
     "css":    [ "hide_at_start.css" ], 
     "matches":   [ "http://YOUR_SERVER.COM/YOUR_PATH/*" 
          ], 
     "run_at":   "document_start" 
    } ], 
    "description": "Blanks a page until our content script is done", 
    "name":   "Blank at Start", 
    "version":  "1" 
}

在你的内容脚本，操纵页面上的元素的任何代码必须等待DOM为interactive并且该元素已到位。因此，修改YOUR_CONTENT_SCRIPT.js像这样：
```
document.addEventListener ('DOMContentLoaded', onDOM_Ready, false); 

function onDOM_Ready() { 
    contentScript_main(); 

    //-- Make page visible again. 
    document.body.style.setProperty ("display", "inherit", "important"); 
} 

function contentScript_main() { 
    // PUT YOUR CODE, THAT ALTERS PAGE ELEMENTS, HERE. 
} 
```
另外，如果您有针对性的内容页面加载后添加，通过AJAX，内容脚本必须使用其他策略（定时器，事件监听器，突变观察员等），这些元素。
最后，如果你的代码需要渲染的尺寸或元素（不太可能）的位置，使用visibility: hidden;代替display: none;。

来源

2013-02-27 02:43:07

谢谢，但没有。当用户浏览网站的不同部分时，页面将呈白色闪烁。通常，浏览器会在加载下一个页面时一直显示当前页面，直到某一点。有一些时间限制或启发式用于决定第一次渲染何时完成。我在问我是否可以与Chrome交流该页面尚未准备好呈现。我认为它必须是可能的，因为如果不是这样，任何对网页进行大量更改的扩展都会吸引人。 – user2097279 2013-02-27 04:00:49

不需要。实际上只需要设置'document_end'就可以了，除了你之外，没有人会注意到任何错误。如果不完全停止页面，您无法拖延渲染。你所能做的就是修改页面。 – 2013-02-27 04:09:04

如何在我的内容脚本完成DOM更改之前隐藏页面？

回答

相关问题