Question

我的扩展程序会重新格式化我经常访问的丑陋页面。目前，页面首先加载未修复，然后有~100ms的延迟，然后我的JS格式化html。

如何防止未经修正的html显示？

我的JS文件在清单中定义如下：

,"content_scripts": [{
        "matches": ["*://*.<url goes here>.com/*"],
        "js": ["js/1.js"]
}]

Answer 1

您需要调整run_at parameter。

默认情况下，内容脚本在页面完全加载后（"document_idle"）执行。

首先尝试添加"document_end"并查看它是否会延迟。

在"document_end"的情况下，在DOM完成之后立即注入文件，但是在加载了图像和帧之类的子资源之前。

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["js/1.js"],
  "run_at": "document_end"
}]

这可能为时已晚。您可以使用最终选项"document_start"，但请注意 - 在任何DOM准备好之前，它会提前执行。你还没有什么可以纠正的。

例如，你可以wait for an element to appear并立即纠正它。

您也可以尝试使用CSS注入来纠正错误。这可以安全地插入"document_start"而不需要额外的技巧。

P.S。或者，例如，使用Gael的答案 - 添加CSS规则以隐藏正文，等待页面加载（例如，使用DOMContentLoaded事件），更正它，然后删除/覆盖CSS规则。

Answer 2

您可以在清单中设置run_at：“document_start”。添加规则以隐藏页面，并在window.onload事件中区分当前脚本。

如果您经常访问此页面，您甚至可以先加载模板/重新设计，然后从缓存或源中集成所需的页面数据。

Chrome扩展程序：必须延迟页面加载，直到javascript完成

2 个答案: