Alles was ihr benötigt ist die Kenntnis über eure Ordner und Dateien und wir ihr relative bzw. absolute Links anlegt. Alles was ihr an speziellen Fähigkeiten benötigt, lernt ihr aber eigentlich automatisch wenn ihr euch mit CSS beschäftigt. Lediglich ein paar Kleinigkeiten über JSON müsst ihr wissen aber lasst euch davon nicht abschrecken
- CSS
- JSON
- reguläre Ausdrücke
Lokale Styles werden in Chrome über Erweiterungen eingebunden. Erweiterungen bestehen in Chrome aus einem Manifest und den dazugehörigen Skripts, Stylesheets, Meta-Dateien etc. Interessieren wird uns nur das Manifest und die Stylesheets. Bitte beachtet, dass die Verwendung von Erweiterungen rein technisch gegen AGB §13 verstößt, da Styles nicht mehr über das Interface von Freewar eingebunden werden und sich damit theoretisch dem Einfluss der Entwickler entziehen.
1. Die Struktur
Die Struktur eurer Erweiterung ist grundsätzlich egal. Im Endeffekt müsst ihr euch darin zurecht finden. Ich werde eine simple Struktur im Beispiel verwenden, die das Bearbeiten vereinfacht. Wir legen für unsere Erweiterung einen Ordner an, der aus dem manifest und einem Unterordner für die Stylesheets und eventuellen Bildern besteht. Die Stylesheets enthalten weiterhin Unterordner für jeden Frame und ein gemeinsames Stylesheet.
style/
- manifest.json
images/
stylesheets/- common.css
banner/
chat/
chatform/
item/
main/
map/
menu/
- common.css
Das Manifest legt fest wann, wie und wo eure Stylesheets eingebunden werden. Es wird als JSON-Datei gespeichert. Einfach gesagt ist JSON eine Objektvariable in Javascript. Das Manifest muss sauber geschrieben werden. Selbst Warnungen und technische Fehler verhindern die Ausführung der kompletten Erweiterung. Fehler die häufig gemacht werden:
- Abschließendes Komma in Arrays, Objekten (müssen entfernt werden)
- Einbindung nicht UTF-8 konvertierter Datein (UTF-8 ist Pflicht!)
Code: Alles auswählen
{
// benötigte Angaben
"name": "Mein lokaler Style",
"version": "Versionsnummer",
"manifest_version": 2, // hier die 2 verwenden
// eigentlich optionale Angaben, in diesem Fall aber zwingend
"content_scripts": [
{
"matches": ["http://*.freewar.de/freewar/internal/*.php*"],
"css": ["stylesheets/common.css"], // mehrere Dateien, komma-separiert möglich
"run_at": "document_start",
"all_frames": true // wichtig!
},
{
"matches": ["http://*.freewar.de/freewar/internal/item.php*"],
"css": ["stylesheets/item/csd_sunfire.css"],
"run_at": "document_start",
"all_frames": true
}
]
}
3. Die Stylesheets
Hier gibt es nicht viel zu beachten außer das Links als chrome-extension Link angeben werden müssen.
Code: Alles auswählen
chrome-extension://extension-id/images/beispiel.png
In Chrome in der rechten oberen Ecke auf das Anpassen-Symbol klicken > Tools > Erweiterungen. Entpackte Erweiterung laden, Ordner suchen und öffnen klicken. Chrome spukt nun hoffentlich keine Fehlermeldungen aus. Freewar ggf. neuladen und fertig ist euer lokaler Style. Um die extension-id zu erfahren, müsst ihr ein Häckchen beim Entwicklermodus setzen und dann steht die ID unter ID
5. Beispiel
Das Beispiel enthält die hier vorgeschlagene Grundstruktur. Weiterhin enthält es die aktuellen Zusatzkomponenten des kstyles sowie eine komprimierte Inventardarstellung von bwoebi. Es werden die gleichen Komponenten benutzt, die auch ich benutze.
http://www.file-upload.net/download-792 ... e.zip.html
6. Quellen
- KStyle Toller Style, exzellente Arbeit von isrador
Verkleinerte Statusanzeige im ColdSunfire (csdColdSunfire), nur Komponente benutzt und angepasst. Äußerst nützlicher Style, viel Arbeit reingesteckt von bwoebi
- deutsche JSON Seite
Mainfest Dokumentation
JSON-Validatorfür Manifest, Chrome ist mit dem Fehlerbericht aber sehr genau