Chrome Extensions sind einfach genial und super geeignet für kleinere Redesigns von Webseiten. Ja, mit Photoshop lassen sich super Layouts erstellen. Alles passt genau ins Raster und ist abgestimmt. Flattertexte gibt es nicht und die Farben strahlen auch viel besser. Bei der Fertigstellung dann die grosse Ernüchterung. Im Detail stimmt es einfach nicht
Und dann muss es auch noch das Management sehen… ein paar Screenshots. Nicht sehr interaktiv. Langweilig und halt eben nicht wahrheitsgetreu… und überhaupt wie passt das Redesign auf der Webseite XY? Fragen, die Photoshop nicht beantworten kann.
Mit Chrome Extensions Javascript und CSS dynamisch einfügen
Workflow sieht dann ungefähr wie folgt aus:
- Photoshop Vorlage erstellen
- Chrome Extension erstellen und damit ein JS File dynamisch in die Seite injecten.
- Optional ein bestehendes CSS File entfernen
- Angepasstes CSS dynamisch injecten
- Extension packen und an Entscheidungsträger schicken
- Finetuning
Ein paar gratis Tipps
- Bilder müssen als Web Resource im Manifest deklariert werden, sonst werden sie nicht angezeigt oder aber einfach als Base64 encodieren und direkt einfügen.
- Javascript und CSS nicht als content_script laden, sondern als externe Scripts. Dadurch muss nicht nach jeder Änderung das Script neu geladen werden. Ein einfacher Page refresh ist dann ausreichend
Mein nächstes Projekt: Eine Extension, welche abklärt, inwiefern mittels media query eine Mobile Webseite möglich wäre.