Das Szenario: Ein Kunde mit bestehendem Magento-Shop möchte sein aktuelles Theme modernisieren und vor allem für mobile Endgeräte zugänglicher gestalten. Als Agentur wurden wir eingeladen, vorab unterschiedliche Ansätze, nach Möglichkeit in Form einer jeweiligen Fallstudie, zu erarbeiten.
Möchte man auf eine komplette konzeptionelle Neuentwicklung – eventuell vorerst – verzichten, ist ein möglicher Ansatz sicherlich die Erweiterung des bestehenden Themes um entsprechende Responsive-Features. Bei der Frage, wie wir die Möglichkeiten und Einschränkungen dieser Option – bei relativ geringem Aufwand unsererseits – dem Kunden veranschaulichen können, habe ich einen für diesen Zweck vielleicht etwas unkonventionellen, aber durchaus logischen und praktikablen Weg eingeschlagen.
Vorweg: Google Chrome Extensions kannte ich lange Zeit als reiner Nutzer. Suchen. Installieren. Nutzen. Glücklich sein. Vor kurzem habe ich mich dann allerdings doch mit deren Aufbau beschäftigt. Als Frontend-Mensch bin ich vom Grundprinzip, der Simplizität und Flexibilität schlichtweg begeistert. Mehr als solides HTML, CSS, JavaScript und eine Prise JSON braucht es nicht, um Spaß zu haben. Die Handhabe ist mehr als einfach.
Dateistruktur
Zunächst wird ein beliebiges Verzeichnis auf dem lokalen Rechner benötigt, das den Code für die Extension beinhaltet. Im Folgenden der Aufbau für ein extrem simples Grundgerüst:
|
1 2 3 4 5 6 7 |
|-- ext_folder - background.js - manifest.json |-- css - styles.css |-- js - script.js |
Grundkonfiguration
In der manifest.json wird nun die Extension konfiguriert:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "name": "integer_net | Drive-by Mockup", "description": "Loads Mockup Styles", "version": "2.0", "icons": { "16": "images/favicon.png", "48": "images/favicon.png", "128": "images/favicon.png" }, "permissions": [ "activeTab" ], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_icon": "images/favicon.png", "default_title": "Drive-By!" }, "manifest_version": 2 } |
Neben der trivialen Konfiguration sind hier vor allem die Konfigurations-Arrays in den Zeilen 9, 12 u. 16 interessant. Über die „Permissions“ legen wir fest, worauf wir Zugriff erhalten wollen. In unserem Fall arbeiten wir im Kontext des aktiven Browser-Tabs.
Unter „Background“ definieren wir die Hauptinstanz unserer Extension.
Last but not least definieren wir im Bereich „browser_action“ eine Interaktion. Hier fügen wir einen Button rechts neben der Adressleiste hinzu, der unsere Styles und Skripte für den aktiven Tab aktiviert.
Hauptinstanz
Hier können nun beliebige Ressourcen geladen werden. Die API bietet natürlich viel, viel, viel mehr als nur das. Für unser Szenario reicht das allerdings schon aus.
|
1 2 3 4 5 6 7 8 9 10 |
// Called when the user clicks on the browser action. chrome.browserAction.onClicked.addListener(function(tab) { // No tabs or host permissions needed! chrome.tabs.insertCSS({ file: 'css/styles.css', runAt: 'document_end' }); //chrome.tabs.insertCSS({ file: 'css/another-file.css', runAt: 'document_end' }); chrome.tabs.executeScript({ file: 'js/script.js', runAt: 'document_end' }); }); |
Über den Parameter „runAt“ können wir steuern, wie bzw. an welcher Stelle die Ressource im Document verarbeitet wird. Da wir ein existierendes Theme nachträglich modifizieren wollen, wählen wir hier „document_end“.
Styling/Scripting
Nun können wir wie gewohnt über CSS/JS auf alle möglichen Selektoren losgehen. Je nach Aufbau des Themes und der CSS-Struktur muss ein wenig getrickst werden, um auch tatsächlich zum Zug zu kommen. Überexplizite Selektoren sind hier manchmal hilfreich.
Es ist kein Problem, auch per JavaScript auf das DOM zuzugreifen. Auch wenn es sich um eine gekapselte Umgebung handelt, kann bei Bedarf auch auf Objekte der eigentlichen Seite zugegriffen werden. Siehe dazu: https://developer.chrome.com/extensions/content_scripts#pi
So konnten wir zum Beispiel auch Slider-Elemente nach deren Initialisierung manipulieren.
Anwendung der Extension
Die Erweiterung kann einfach in den Chrome-Einstellungen unter chrome://extensions/ aktiviert werden. Dazu rechts oben das Häkchen für den „Entwicklermodus“ aktivieren und auf den Button „Entpackte Erweiterung laden…“ Klicken. Jetzt kann im Dateisystem einfach der erstellte Ordner angewählt werden.
Die Extension ist sofort aktiv und Änderungen im Quellcode sind augenblicklich verfügbar.
Für einen Austausch muss nicht einmal der Weg über das Extension-Repository gegangen werden. Ein Versenden des Ordners als ZIP oder das Bereitstellen in einem eigenen GIT-Repository sind so unkompliziert möglich.
Fazit
Man ersetzt hiermit natürlich keineswegs eine ordentliche Konzeption. Auch muss man sich darüber im klaren sein, dass die Lösung abhängig ist von der Konsistenz der zu beeinflussenden Seite. Ändert sich dort beispielsweise ein Selektor, so läuft man zwangsläufig an entsprechender Stelle ins Leere.
Es ist jedoch ein wundervolles Werkzeug, um mit wenig Aufwand bevorstehende Änderungen an bestehenden Frontends zu skizzieren bzw. zu testen und gleichzeitig für den entsprechenden Nutzer/Kunden erlebbar zu machen.
Nachlesen
Mehr in der Dokumentation zu Google Chrome Extensions.
Autor: Sandro Wagner
Sandro Wagner ist Mediengestalter für digitale und Druckmedien. Während seiner dreijährigen Selbstständigkeit hat er für verschiedene Agenturen und nationale sowie internationale Kunden gearbeitet, wobei er sich auf Frontend-Entwicklung und CMS-Integrationen fokussiert hat.
Bei integer_net ist er als Magento Certified Frontend Developer tätig.