是否可以在 DOM 或 html 准备好之前呈现我的 chrome 扩展 UI？答案

【问题标题】：Is it possible to render my chrome extension UI before the DOM or html is ready?是否可以在 DOM 或 html 准备好之前呈现我的 chrome 扩展 UI？
【发布时间】：2017-06-17 14:29:15
【问题描述】：

我正在制作一个在页面上有侧边栏的 google chrome 扩展程序。每次用户打开新标签页或加载新页面时，操作和呈现新页面之间都会有一个延迟。

我想创建这样的效果，即我的扩展侧边栏在页面加载之间持续存在，并且在用户打开新标签时立即准备就绪。

我的内容脚本在 document_start 处运行，并将在文档完成加载和呈现之前运行。我只是想知道是否可以在原始 html 完成自己的进程之前渲染我的 UI？

const extensionContainer = document.createElement('div')
extensionContainer.id = 'chrome_extension' //Some hash
document.documentElement.appendChild(extensionContainer);

//Render react component
ReactDOM.render(<App />, extensionContainer)

上述代码有效，但在文档完全加载时仍会呈现，从而产生延迟效果。

也许我可以进行两次渲染。内容脚本注入侧边栏后的第一次渲染，然后在请求的 HTML 完成加载后渲染。

我可以做一些诡计，比如延迟 html 获取，呈现我的侧边栏，然后在继续正常的 html 获取过程之后立即？这样即使服务器有问题，我的侧边栏也已经渲染好了。

【问题讨论】：

请edit 成为主题的问题：包括一个完整 minimal reproducible example 重复问题。包括一个manifest.json，一些背景/内容/弹出脚本/HTML。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
在正确编辑问题之前，我大胆猜测一下：当根节点在<body> 之外时，ReactDOM 可能不起作用。在这种情况下，您需要等待使用 MutationObserver 附加 body。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您需要编辑您的扩展 manifest.json，并使用“run_at”定义和适当的“document_start”值。如：

...
"content_scripts": [ { 
   //...
    "run_at": "document_start"
} ], // ...

定义：

在“document_start”的情况下，文件是在任何来自 css 的文件之后注入的，但在构造任何其他 DOM 或运行任何其他脚本之前。

进一步阅读see...>

【讨论】：

他做得不好。