如何在我的内容脚本完成DOM更改之前隐藏页面?
我使用的内容脚本基本上是通过文档,拉出数据,然后用不同的布局但相同的信息重建页面的大块。所以这是一个特殊网站的“preffity”扩展,看起来很糟糕。如何在我的内容脚本完成DOM更改之前隐藏页面?
事情是,Chrome继续前进,并在内容脚本完成该过程之前呈现该页面,因此在某些页面加载时,您可以在用较好的一个替换之前看到原始页面闪烁几帧。
浏览器不会立即开始渲染。你很少看到没有应用CSS的网站,因为“它没有及时完成”。有没有办法让渲染等待内容脚本呢?我不需要几百毫秒,只有几个毫秒。
你没有发布你的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_at
document_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;
。
谢谢,但没有。当用户浏览网站的不同部分时,页面将呈白色闪烁。通常,浏览器会在加载下一个页面时一直显示当前页面,直到某一点。有一些时间限制或启发式用于决定第一次渲染何时完成。我在问我是否可以与Chrome交流该页面尚未准备好呈现。我认为它必须是可能的,因为如果不是这样,任何对网页进行大量更改的扩展都会吸引人。 – user2097279 2013-02-27 04:00:49
不需要。实际上只需要设置'document_end'就可以了,除了你之外,没有人会注意到任何错误。如果不完全停止页面,您无法拖延渲染。你所能做的就是修改页面。 – 2013-02-27 04:09:04
如果您使用css并通过manifest添加它,请尝试将其添加到内容脚本字段:''run_at“:”document_start“'。 – BeardFist 2013-02-26 21:49:03
@BeardFist,通过清单添加的CSS文件总是在DOM之前和内容脚本之前加载,无论“run_at”设置如何。 – 2013-02-27 02:53:09