Eski CSS, krom uzantısında yanıp sönüyor

Question

Web sitesinin css'sini değiştiren bir krom uzantısı oluşturmaya çalışıyorum. Css Ajax ile macun yükünden yüklenir. Sorun, eski web sitesinin yeni css'nin gösterilmesinden önce gösterilmesidir - bunu nasıl değiştirebilirim ki, sadece değiştirilen css’i gösteren web sitesi gösterilsin mi?

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

(ilgili):

seçenek yeni stil yüklenene kadar görünür olmaktan vücudu önlemektir

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

Bir, şunun gibi:

Ama bunun bir yan problemi var, çünkü ne zaman $ .get() çağrısının ne kadar süreceğini bilmiyorsunuz ve geri dönmek uzun zaman alıyorsa, sayfa sadece boş olacak. Yukarıdaki kod Chrome uzantıları için çalışmaz :

Yani yerine vurmada arasında, daha iyi bir çözüm geçici

// 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); 
    }); 
}); 

DÜZENLEME ... vücut html, böyle bir şey değiştirmek olabilir. Ancak, yardımcı olabilecek bir StackOverflow cevabı yok. Lütfen bkz. How to hide everything before page load with Chrome Extension