javascript - Chrome 扩展上的旧 CSS 闪烁

Question

我正在尝试制作一个更改网站 css 的 chrome 扩展。 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);
    });
});

ma​​nifest.json(相关):

{
"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"]
  }
]
}

Answer 1

一种选择是在加载新样式之前阻止主体可见，如下所示:

$('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);
    });
});

编辑:上面的代码不适用于 Chrome 扩展。但是，还有另一个 StackOverflow 答案可以提供帮助。请看How to hide everything before page load with Chrome Extension