Wie kann ich eine CSS-Datei in einem Benutzerskript wechseln, bevor die Seite gerendert wird?

Ich versuche, ein Benutzerskript für Chrome zu schreiben, das eine bestimmte CSS-Datei für eine bestimmte Website ausschaltet.Wie kann ich eine CSS-Datei in einem Benutzerskript wechseln, bevor die Seite gerendert wird?

Der Teil über das Austauschen der CSS-Datei gegen eine andere funktioniert gut, das Problem ist, dass ich das nicht passieren kann, bevor die Seite gerendert wird. Dies führt zu einem sehr hässlichen Flackern der Seite, wenn zuerst das ursprüngliche Layout gerendert und dann schnell durch das neue Layout ersetzt wird, das ich eingefügt habe.

Ich habe @run_at document_start verwendet, um mein Benutzerskript zu erhalten, bevor die Seite gerendert wird, aber das scheint nicht richtig zu funktionieren. Von dem, was ich sehen kann from the official Chrome documentation sollte dies unterstützt werden.

Als Referenz hier ist mein ganzes Skript:

// ==UserScript== 
// @name   name 
// @namespace  namespace 
// @version  0.1a 
// @description description 
// @include  http://example.com/* 
// @run_at document_start 
// ==/UserScript== 


var sheets = document.getElementsByTagName("link"); 

for (var i=0; i<sheets.length; ++i) { 
    if (sheets[i].href.indexOf('all.css') != -1) { 
     sheets[i].href = 'http://replacement.com/all.css'; 
    } 
}

ich ein bisschen weiter untersucht und verwaltet einen Haltepunkt in meinem Skript setzen (aus irgendeinem Grund das Skript nicht von Anfang an in den Developer Tools erschienen). Wenn ich am Anfang meines Skripts am Unterbrechungspunkt stoppe, ist die Seite bereits vollständig mit dem ursprünglichen Thema geladen. So scheint es, die @run_at document_start Direktive funktioniert einfach nicht und mein Skript wird ausgeführt, nachdem die Seite geladen wurde. Obwohl ich nicht herausfinden kann, warum das so ist.

Quelle

2012-03-27 Mad Scientist

Das könnte sein, weil es eine andere asynchrone Rundfahrt benötigt, um das CSS herunterzuladen, was ein Fenster mit Zyklen zum Rendern des Dokuments zurücklässt. Warum versuchen Sie nicht, dataUri als mögliche Synchronisierungsoption zu verwenden, um den neuen CSS-Inhalt zu präsentieren? (Das müssen Sie vorher herunterladen und zwischenspeichern) –

Das scheint in meinem Fall nicht das Problem zu sein, ich habe meine Frage mit einigen weiteren Details aktualisiert. Es scheint, dass mein Skript nicht zur richtigen Zeit ausgeführt wird, aus irgendeinem Grund funktioniert '@run_at document_start' in meinem Fall nicht. –

Ich habe versucht, Ihren Code beim Start des Dokuments und wie erwartet, keine Blätter erhalten. Das wurde erwartet, da die Dokumente sagen, dass sie kein DOM sind (also wird es keine Links geben). Es gibt einige Stylesheets, die zwar angezeigt werden, aber vom Inhaltsskript aufgrund von cross domain css oder ähnlichem nicht aufgerufen werden können. Sie können sie erreichen, indem Sie etwas Code einlesen, aber das wird nicht in der Lage sein, die CSS-Dateien von einer anderen Domain auf dieser Seite zu bekommen (Reading documents CSS in Chrome Extension).

Es gibt eine alternative Möglichkeit, CSS-Dateien tho und das ist mit dem onBeforeLoad Ereignisse zu tauschen ....

function doBeforeLoad(event){ 
    if ((event.srcElement.type=="text/css") && (event.srcElement.href.indexOf('all.css') != -1) && (event.srcElement.href != 'http://replacement.com/all.css')) { 
     event.srcElement.href = 'http://replacement.com/all.css'; 
    } 
} 

document.addEventListener('beforeload', doBeforeLoad , true);

Setzen Sie, dass bei Dokument Start in einem Content-Skript und ausführen.

Quelle

2012-03-27 19:35:45 PAEz

Danke, das funktioniert. Obwohl ich auch eine Erweiterung erstellen musste, anstatt ein Benutzerskript zu verwenden, scheint es nicht zu funktionieren, das Benutzerscript vor dem Laden der Seite zu laden. –

Wie kann ich eine CSS-Datei in einem Benutzerskript wechseln, bevor die Seite gerendert wird?

Antwort

Verwandte Themen