Question

我正在尝试制作一个改变网站css的chrome扩展程序。使用Ajax从pastebin加载css。问题是在显示新的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);
    });
});

manifest.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（）调用需要多长时间，如果需要很长时间才能返回，页面将只是空白。< / p>

因此，不是隐藏身体，更好的解决方案可能是临时替换身体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

旧的CSS在镀铬扩展上闪烁

1 个答案: