Ich baue eine Firefox-Erweiterung, die bestimmten Seiten einer Website HTML-Elemente hinzufügt. Ich möchte es eine benutzerdefinierte CSS-Datei einfügen, um diese Elemente zu stylen. Es funktioniert, wenn ich Tags mit der CSS direkt auf der Seite einfügen, aber das ist eine weniger als ideale Lösung.
Gibt es trotzdem etwas, um es zu laden und eine CSS-Datei zu parsen, als ob ich das Tag in der Kopfzeile benutzt hätte, oder bin ich irgendwie dabei, es zu strecken?
chrome: // funktioniert nicht, da die Seite, in die Sie einfügen, nicht auf Dateien außerhalb ihrer Domäne zugreifen kann (einschließlich Chrome-URIs). Dies gilt auch dann, wenn Sie den Link einfügen, da der Link weiterhin im Kontext der Zielseite ausgeführt wird. Stattdessen haben Sie zwei Möglichkeiten:
Sie können in Ihrem Manifest einen Ressourcenprotokollalias definieren und dann mithilfe eines Ressourcen-URI auf das CSS zugreifen. Mit der folgenden chrome.manifest können Sie z. B. die CSS als resource://myextresource/myfile.css einfügen:
content myext content/
resource myextresource content/css/
Weitere Informationen finden Sie unter MDN Chrome-Registrierung . Siehe auch Wie kann ein Firefox Erweiterung injizieren Sie eine lokale CSS-Datei in eine Webseite? für eine ähnliche Frage.
Sie können das CSS auch als USER_SHEET hinzufügen, indem Sie Folgendes verwenden. Dadurch wird Ihr CSS auf allen Seiten verfügbar. Achten Sie also darauf, dass Sie sehr eindeutige Selektoren verwenden. Ein Nachteil bei diesem Ansatz ist, dass das CSS der Seite Vorrang vor Benutzerblättern hat. Sie können das verwenden, um das zu überschreiben, aber das CSS der Seite kann Sie immer noch übertrumpfen, wenn es auch wichtig ist.
%Vor%Tags und Links javascript css firefox-addon