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

Question

我使用内容脚本基本上遍历文档，提取数据，然后重建具有不同布局但信息相同的页面的大块。所以它是一个看起来很糟糕的特定网站的“preffity”扩展。

问题是，chrome 会在内容脚本完成处理之前继续渲染页面，因此在某些页面加载时，您可以看到原始页面闪烁几帧，然后被更好的页面替换。

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

Answer 1

您没有发布您的 manifest.json(始终包括这个)，但最可能的原因是您的脚本是 the default random firing time of a content script 的受害者.

可能，您需要做的就是在 list 中将 run_at 设置为 document_end。

---

---

但是，如果您绝对肯定不会在更改完成之前不显示任何内容，则需要使用多步骤方法:

1. 为您的扩展创建一个 CSS 文件并将其保存为 hide_at_start.css:

   body {
       display:    none;
   }
   

   请注意，在极少数情况下，您可能需要使用 display: none !important;

   
   

2. 将 hide_at_start.css 添加到您的 list 并将 list 设置为 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"
   }
   

   
   

3. 在您的内容脚本中，任何操作页面元素的代码都必须等待 DOM 交互式并且该元素就位。所以像这样修改 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 添加的，则内容脚本必须对这些元素使用额外的策略(计时器、事件监听器、变异观察器等)。

   
   

4. 最后，如果您的代码需要呈现元素的尺寸或位置(不太可能)，请使用 visibility: hidden; 而不是 display: none;。