Javascript 是否可以在DOM或html就绪之前呈现我的chrome扩展UI？

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

我想创建这样一种效果，即我的扩展侧边栏在页面加载之间保持不变，并且在用户打开新选项卡时立即准备就绪

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

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

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

const extensionContainer=document.createElement（'div'）
extensionContainer.id='chrome\u extension'//一些散列
document.documentElement.appendChild（extensionContainer）；
//渲染反应组件
render（，extensionContainer）

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

也许我可以做两次渲染。内容脚本之后的第一个呈现注入侧栏，然后在请求的HTML完成加载时呈现

---

我可以做一些小把戏，比如延迟html获取，呈现侧边栏，然后立即继续正常的html获取过程吗？通过这种方式，即使服务器出现问题，我的侧边栏也将被呈现。

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

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

定义：

在“document_start”的情况下，这些文件是在css中的任何文件之后，但在构建任何其他DOM或运行任何其他脚本之前注入的

---

进一步阅读

请将问题放在主题上：包括一个与问题重复的完整问题。包括manifest.json、一些后台/内容/弹出脚本/HTML。寻求调试帮助的问题（“为什么此代码不工作？”）必须包括：►想要的行为，►特定的问题或错误，以及►在问题本身中复制它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建”，以及。在正确编辑问题之前，我将大胆猜测：当根节点位于

之外时，可能ReactDOM不起作用。在这种情况下，您需要等待使用MutationObserver附加

主体

。他没有正确执行。