Javascript Chrome扩展css赢得'；不要立即加载

我正在编写一个Chrome扩展，它将一个javascript文件注入到页面中，以便随时更改css。当我访问该网站时，页面加载后，修改后的css加载时间通常会延长几分之一秒。这可能会造成糟糕的用户体验。我不确定这是否可行，但我想让它在用户看到页面之前更改css并可能执行其他脚本

清单文件：

{
“名称”：“某些扩展”，
“版本”：“1.0”，
“描述”：“一些描述”，
“内容脚本”：[
{
“css”：[“styles.css”]，
“js”：[“script.js”]，
“匹配项”：[“https://*.familysearch.org/*”]
}
],
“清单版本”：2
}

script.js

console.log（“扩展工作”）；
让navElement=document.getElementById（'primaryNav'）；
navElement.style.backgroundColor='蓝色'；
（
在“document\u idle”运行
），而不是在页面加载之前（
document\u start
）或加载完成之前（
document\u end
）。请注意，这些事件与DOM的
load
和
domcontentload
事件无关

你需要做两件事：

将“
”run\u at:“'document\u start'
添加到您的扩展”清单中
更新脚本，使其在加载DOM之前工作（因为
document.getElementById（'primaryNav'）
将返回
null
，因为
primaryNav
元素还不存在）。




请发布你的
style.css
My styles.css是空的，谢谢你推荐MutationObserver！看起来很有希望。您可以给我看一些代码，说明如何使用它在#primaryNav元素加载后将div作为子元素添加到该元素中吗？