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

Question

我基本上使用内容脚本来处理文档，提取数据，然后用不同的布局但相同的信息重建页面的大块。因此，对于一个看起来很糟糕的特定网站来说，这是一个“preffity”扩展。

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

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

Answer 1

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

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

---

---

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

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

   body {
       display:    none;
   }
   

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

   
   

2. 将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"
   }
   

   
   

3. 在您的内容脚本中，任何操作页面元素的代码都必须等待 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 添加的，则内容脚本必须对这些元素使用额外的策略（计时器、事件侦听器、突变观察器等）。

   
   

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