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

Question

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

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

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

score 1 · Accepted Answer

您没有发布您的 manifest.json（总是包含这个），但最可能的原因是您的脚本是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;.

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

1 回答 1

Related

Reference