Langsam aber sicher gewinnt Googles neuer Browser Chrome (für die, die Google nicht vertrauen gibt es noch Chromium) mehr und mehr an Beliebtheit was sicherlich an der schnellen Ladezeit (sowohl des Programms als auch von Webseiten) liegt. Auch wenn noch nicht klar ist, wo genau Google mit Chrome hin will (Chrome OS ist hier ja eine Variante) habe ich das Gefühl, dass Google der Konkurrenz zeigt, wie sich ein Browser verhalten sollte.
Besonders gut gefällt mir bei Chrome der Ansatz, den die Entwickler bei den Erweiterungen gehen: Mozillas Firefox zeigte hier ja schon vor einigen Jahren, wie interessant Erweiterungen für Nutzer sein können. Angefangen bei Werbeblockern, E-Mail Benachrichtungen bis zu vollwertigen Twitter-Clients findet man allerlei nützliches (aber auch überflüssiges) um den eigenen Browser zu verbessern.
Googles Chrome geht hier einen interessanten Weg denn im Prinzip basieren die Extensions erstmal auf HTML, CSS und JavaScript und nutzen die Möglichkeiten, die diese Sprachen liefern (u.a. auch client-side data storage in HTML5), vollständig. Es lässt sich also, mit Kenntnissen in diesen drei Sprachen schon eine eigene Erweiterung programmieren, was ich Euch an einem einfachen beispiel demonstrieren möchte.
Vorbereitungen
- Lade Dir Chrome oder Chromium (wenn Du ein wenig Googlest ersparst Du Dir ggf. den Browser selber compilieren zu müssen) auf Deinen Rechner: (Windows/Linux / Mac)
- Erstelle einen Ordner "HelloWorld" auf Deinem Rechner der den Code beinhalten wird.
- Erstelle eine Datei manifest.json, die einige Informationen zu Deiner Erweiterung beinhalten wird.
manifest.json
{"name": "Hallo Welt","version": "1.0","description": "Meine erste Erweiterung.","browser_action": {"default_icon": "icon.png"}}
Die Bezeichnungen in der JSON-Datei sollten selbsterklärend sein. Die einzigen Punkte hier sind "browser_action" und "default_icon" welche wir brauchen, damit unsere Erweiterung auch ein Icon neben der Adressleiste in Chrome bekommt.
icon.png
Natürlich brauchen wir auch ein passendes Icon für unsere Anwendung. Ich greife hier auf ein Iconset von Manuela Hoffmann zurück, welches ihr unter www.pixelgraphix.de findet. Das Icon Eurer Wahl wandelt Ihr dann noch schnell in png um und nennt es icon.png. Sowohl manifest.json als auch icon.png kommen in den Ordner HelloWorld.
Erster Test
Und schon können wir die Erweiterung testen:
- Öffne Chrome und dort die Seite mit den Erweiterungen. (Unter Linux findet man diese, wenn man auf das Icon mit dem Schraubenschlüssel klickt. Am Mac unter dem Menüpunkt "Fenster.")
- Klicke auf "Entwicklermodus"
- Importiere den Ordner HelloWorld indem Du auf "Entpackte Erweiterung laden…" klickst
Du solltest jetzt, wenn Du alles richtig gemacht hast, das Icon oben neben der Adressleiste sehen. Du kannst zwar schon auf das Icon klicken aber noch bringt Dich das nicht weiter.
Etwas anzeigen
Interessanter wird es jetzt, wenn wir die Erweiterung ein wenig ausbauen. Es geht uns jetzt erstmal nur um ein kleines Fenster in dem, wie der Name des Tutorials schon vermuten lässt, "Hallo Welt" steht.
Damit unsere Erweiterung auch weiß, welche HTML-Datei sie anzeigen soll, ergänzen wir die manifest.json nun um eine neue Zeile:
..."browser_action": {"default_icon": "icon.png","popup": "popup.html"},...
popup.html
Bei der Datei popup.html, die wir ebenfalls in unserem Ordner HelloWorld speichern, handelt es sich um eine simple HTML5-Datei:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Hallo Welt</title></head><body><p>Hallo Welt.</p></body></html>
Wenn Du diese Erweiterung jetzt installierst (deinstallier die allte Version besser vorher – habe ich schon erwähnt, wie toll es ist nicht bei jeder Änderung an Erweiterungen den Browser neu starten zu müssen?) solltest Du bei einem klick auf Dein Icon den Text "Hallo Welt" lesen können.
Optimierungen
Damit unsere Ausgabe nun etwas schöner ist formatieren wir sie jetzt noch mit etwas CSS. Auf die Möglichkeiten die JavaScript uns noch bietet gehe ich vielleicht später mal ein.
HTML
<head>...<link rel="stylesheet" href="style.css" type="text/css" /></head>
CSS
body {font-size: 150%;font-family: Helvetica,Arial,Verdana,sans-serif;color: #fff;text-shadow: 0px 2px 3px #555;font-weight: bold;background: #cdd9e6;width: 350px;height: 75px;}