Wie bekomme ich ein Firefox Greasemonkey-Skript, um ein lokales Cascading Stylesheet zu verwenden?

12688
Umber Ferrule

Wie lautet die korrekte Syntax, um eine Verknüpfung zu einer CSS-Datei im selben Verzeichnis wie ein Greasemonkey-JavaScript herzustellen? Ich habe folgendes versucht, aber es funktioniert nicht:

var cssNode = document.createElement('link'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'example.css'; cssNode.media = 'screen'; cssNode.title = 'dynamicLoadedSheet'; document.getElementsByTagName("head")[0].appendChild(cssNode);

Wenn ich das zum Laufen bringen kann, wäre es viel einfacher als CSS-Änderungen in JavaScript einzufügen.

6
Grund, GM_addStyle () nicht zu verwenden? ukanth vor 14 Jahren 1
Nein, nur persönliche Vorlieben :) Ich finde es einfach langweilig, viele Änderungen vorzunehmen. Ich finde es auch einfacher, Fehler in einer CSS-Datei zu erkennen (Syntaxhervorhebung hilft). Umber Ferrule vor 14 Jahren 0

4 Antworten auf die Frage

15
Brock Adams

Mit der @resourceRichtlinie ist das einfach . So wie:

// ==UserScript== // @name _Use external CSS file // @resource YOUR_CSS YOUR_CSS_File.css // @grant GM_addStyle // @grant GM_getResourceText // ==/UserScript==  var cssTxt = GM_getResourceText ("YOUR_CSS");  GM_addStyle (cssTxt);

@resourceSucht ohne Pfad- / URL-Informationen nach "YOUR_CSS_File.css" in demselben Verzeichnis.

1
ukanth

Versuche dies! 

function addStyleSheet(style){ var getHead = document.getElementsByTagName("HEAD")[0]; var cssNode = window.document.c­reateElement( 'style' ); var elementStyle= getHead.appendChild(cssNode) elementStyle.innerHTML = style; return elementStyle; }   addStyleSheet('@import "example.css";');

Hinweis: example.css muss sich in demselben Verzeichnis wie Ihr Benutzerskript befinden, damit dieses Beispiel funktioniert.

Referenz -> DiveIntoGreaseMonkey

1
Umber Ferrule

I'm still unable to get a local CSS file working. However, I came across this tip (which works) and is a lot closer to what I was after:

GM_addStyle((<><![CDATA[ body { color: white; background-color: black } img { border: 0 } .footer ]]></>).toString());

Thanks to Erik Vold.

Das wird nicht funktionieren. Firefox hat die Unterstützung für E4X in Version 16 oder 17 eingestellt. (Aktuelle Version ist 18.) Brock Adams vor 11 Jahren 4
Heutzutage (mithilfe von ECMAscript 2015+) können Sie Back-Ticks verwenden, um mehrzeilige Zeichenfolgen einschließlich der Einbeziehung von Variablen einzubeziehen, z. B. `var border = 0; GM_addStyle (\ `img } \`) `danke an [Vorlagenliterale] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) (welche werden im IE nicht unterstützt). Adam Katz vor 6 Jahren 0
0
Chris

Sie müssen das Stylesheet an die Funktion addStyleSheet übergeben, da es sonst nicht funktioniert.

function addStyleSheet(style){ var getHead = document.getElementsByTagName("HEAD")[0]; var cssNode = window.document.createElement( 'style' ); var elementStyle= getHead.appendChild(cssNode); elementStyle.innerHTML = style; return elementStyle; }  addStyleSheet('@import "http://wherever.com/style.css";');

Um eine lokale Datei zu verwenden, ändern Sie die letzte Zeile in:

addStyleSheet('@import "style.css";');

Dadurch würde style.css in das gleiche Verzeichnis wie das Skript geladen.

Wie verwende ich ein lokales Stylesheet (dh im selben Verzeichnis wie das GreaseMonkey-Skript)? Umber Ferrule vor 14 Jahren 1

Verwandte Probleme