Question

我正在制作一个在页面上有侧边栏的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 fetch，渲染我的侧边栏，然后在继续正常的html抓取过程之后立即进行？这样即使服务器出现问题，我的侧栏也会被渲染。

Answer 1

您需要编辑扩展程序manifest.json，并使用＆＃34; run_at＆＃34;具有适当值＆＃34; document_start＆＃34;的定义。如：

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

定义：

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

进一步阅读see...>

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

1 个答案: