lokale Styles in Google Chrome

Hier wird über Freewar-Styles und -Designs geredet. Man kann eigene Styles vorstellen oder Fragen zu den CSS-Styles stellen.
Antworten
Benu
Zauberer der Bergwiesen
Beiträge: 658
Registriert: 26. Okt 2008, 13:21

lokale Styles in Google Chrome

Beitrag von Benu » 4. Aug 2013, 12:19

Lokale Styles in Chrome zu benutzen dürfte für die meisten weitaus einfacher sein als manche gedacht haben. Gleichzeitig kann die Methode performanter und modularer eingesetzt werden.

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
Ich werde am Ende noch ein komplettes Paket verlinken, welches ihr schnell und simpel an eure Bedürfnisse anpassen könnt.

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/
2. Das Manifest
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!)
Ich zeige euch hier ein einfaches Beispiel mit dem ihr euren eigenen Style und eine komprimierte Inventardarstellung verwenden könnt.

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
    }
  ]
}
In der dynamische Einbindung der Styles liegt die wahre Stärke von Chrome's Erweiterungen. Mit den regulären Ausdrücken könnt ihr steuern in welcher Welt, Frame ja sogar bei welchen NPC ein bestimmter Style eingebunden wird. Beachtet aber, dass mit zunehmender Komplexität die Performance leiden kann. Ich rate davon ab noch kompliziertere Einbindungsmuster zu verwenden, da ihr schon sehr viel mit CSS steuern könnt.

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
4. Aktivierung
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 :P

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 7. weiterführende Links PS: Ich bin nicht wirklich der Guide-Schreiber. Ich arbeite schon eine Weile mit CSS, JSON etc und es ist sehr wahrscheinlich, dass ich wichtige Dinge ausgelassen habe, die für mich offensichtlich sind. Wer also Fragen hat, kann diese gern hier oder via PN stellen.
http://fwrails.net
lokale Styes in Google Chrome
lokale Styles in Gologle folgen...
I'm beginning to feel like a Spam God

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 17 Gäste