Javascript chrome扩展上的旧CSS闪烁

我正在尝试做一个chrome扩展，可以改变网站的css。css是使用Ajax从pastebin加载的。问题是旧的网站在新的css显示之前就显示了——我怎样才能使它只显示更改了css的网站

Content.js:

var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;

$('head').ready(function() {
    $.get("https://pastebin.com/raw/css-file", function(r) { 
    s.innerHTML = r;
    document.head.appendChild(s);
    });
});

{
"permissions": [
    "https://scratch.mit.edu/*",
    "https://pastebin.com/raw/*"
],

"content_scripts": [
  {
    "matches": [
      "https://scratch.mit.edu/*",
      "http://scratch.mit.edu/*"
    ],
    "js": ["jquery-2.2.2.min.js", "content.js"]
  }
]
}

manifest.json（相关）：

var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;

$('head').ready(function() {
    $.get("https://pastebin.com/raw/css-file", function(r) { 
    s.innerHTML = r;
    document.head.appendChild(s);
    });
});

{
"permissions": [
    "https://scratch.mit.edu/*",
    "https://pastebin.com/raw/*"
],

"content_scripts": [
  {
    "matches": [
      "https://scratch.mit.edu/*",
      "http://scratch.mit.edu/*"
    ],
    "js": ["jquery-2.2.2.min.js", "content.js"]
  }
]
}

---

一个选项是在加载新样式之前防止主体可见，如下所示：

$('body').hide();

var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;

$('head').ready(function() {
    $.get("https://pastebin.com/raw/css-file", function(r) { 
        s.innerHTML = r;
        document.head.appendChild(s);
        $('body').show();
    });
});

但这有一个附带的问题，即您不知道$.get（）调用需要多长时间，如果需要很长时间才能返回，则页面将是空白的

因此，与其隐藏主体，更好的解决方案可能是临时替换主体html，类似这样的内容

// Save the original body, so we can put it back later
var originalBody = $('body').html();

// Replace the body with a please wait message (use whatever you want)
var pleaseWaitBody = '<div style="text-align: center; margin-top: 100px;">Loading, please wait...</div>';
$('body').html(pleaseWaitBody); 

var s = document.createElement('style');
s.setAttribute("type", "text/css");
var r;

$('head').ready(function() {
    $.get("https://pastebin.com/raw/css-file", function(r) { 
        s.innerHTML = r;
        document.head.appendChild(s);

        // Now that the new style is applied, put the original body back
        $('body').html(originalBody);
    });
});

//保存原始正文，以便稍后将其放回
var originalBody=$（'body'）.html（）；
//将正文替换为“请稍候”消息（可以随意使用）
var plessewaitbody='正在加载，请稍候…'；
$（'body'）.html（请参阅正文）；
var s=document.createElement（'style'）；
s、 setAttribute（“类型”、“文本/css”）；
var-r；
$（'head'）.ready（函数（）{
$.get（”https://pastebin.com/raw/css-file“，函数（r）{
s、 innerHTML=r；
文件。标题。附录子项；
//现在应用了新样式，请将原始主体放回原处
$（'body'）.html（原始正文）；
});
});

编辑：

---

上面的代码不适用于Chrome扩展。然而，还有另一个答案可以帮助你。请看

对我不起作用：它加载原始页面，闪烁蓝色（这可能是因为背景颜色是蓝色），然后加载带有新css的页面。（这是第一种方法）你把这个脚本放在哪里了？确保它在标题部分，而不是正文。这是一个chrome扩展，我正在使用“内容脚本”来更改css（没有标题部分）。啊，是的，忘了那部分（我写答案时正在考虑html页面）。你看到这个问题和公认的答案了吗？尽管进行了大量的研究，我还是错过了这个答案，最后使用了第二个答案。谢谢你的链接！