制造<；风格>；块使用javascript重要吗？_Javascript_Html_Css_Google Chrome Extension

制造<；风格>；块使用javascript重要吗？

javascript html css google-chrome-extension

制造<；风格>；块使用javascript重要吗？,javascript,html,css,google-chrome-extension,Javascript,Html,Css,Google Chrome Extension,我正在尝试做一个chrome扩展，覆盖我选择的网页所使用的样式。我已经了解了如何使用javascript更改样式，不过当页面加载时，您可以在短时间内看到原始页面。我尝试将清单文件设置为在文档开始时运行，但这只会使我的css被原始页面覆盖。我该怎么办 const addStyle=（（）=>{ const style=document.createElement（'style'）； document.head.append（样式）； return（styleString）=>style.tex

我正在尝试做一个chrome扩展，覆盖我选择的网页所使用的样式。我已经了解了如何使用javascript更改样式，不过当页面加载时，您可以在短时间内看到原始页面。我尝试将清单文件设置为在文档开始时运行，但这只会使我的css被原始页面覆盖。我该怎么办

const addStyle=（（）=>{
const style=document.createElement（'style'）；
document.head.append（样式）；
return（styleString）=>style.textContent=styleString；
})();

假设您已经人工操作，还有两种方法：

1.DOM顺序通过将样式元素作为

html

的直接子元素放置在

body

之后，使其成为DOM中的最后一张表单

根据DOM规范，它是一个完全有效的DOM树，因此我们可以忽略它违反HTML规范的事实，因为这与浏览器用例无关，不会造成任何不利影响

manifest.json：

```
内容\u脚本
```
应具有

content.js：

constyles=[]；
const appendoroot=el=>document.documentElement.append（el）；
常量addStyle=（（）=>{
const style=document.createElement（'style'）；
附根（花柱）；
if（！document.body）style.push（style）；
return（styleString）=>style.textContent=styleString；
})();
if（document.body）{
onBody（）；
}否则{
新的变异观察者（（u，观察者）=>{
if（document.body）{
observer.disconnect（）；
onBody（）；
}
}).observe（document.documentElement，{childList:true}）；
}
函数onBody（）{
//在尸体后面移动它们
花柱前肢（附肢足）；
styles.length=0；
}

2.级联源：

用户

用户创建的带有

的规则！重要信息

使用

赢得作者原创规则！重要信息

（），因此如果您的CSS有

！重要信息

在其所有规则中，与

cssOrigin一起使用，例如，侦听器中的后台脚本中的：'user'

。

假设您已经手动执行了，还有两种方法：