© saicle/Shutterstock.com
Der einfache Weg zur Google-Chrome-Erweiterung

Mach mehr aus Chrome!


Nie war es so einfach, Erweiterungen für einen Browser zu schreiben wie mit Google Chrome. Kenntnisse in den gängigen Webtechnologien HTML, CSS und JavaScript sind dafür ausreichend. Schritt für Schritt erfahren Sie, wie Sie in kürzester Zeit eine sinnvolle Erweiterung programmieren können. Somit sind die Grundlagen für die Entwicklung von Add-ons gesetzt und Sie können sofort mit dem Erstellen weiterer nützlicher Erweiterungen beginnen.

Google Chrome ist der Browser der Stunde. Version 1.0 wurde erst am 11. Dezember 2008 veröffentlicht; somit ist der Internetbrowser aus dem Hause Google erst knapp drei Jahre alt. Dank regelmäßiger Updates ist im November 2011 die Version 16 aktuell. Es scheint, als sei Googles Vormarsch auf dem Browsermarkt derzeit nicht zu stoppen. Globale Statistiken von StatCounter [1], einem renommierten Anbieter für Datenverkehrsanalyse und Webstatistiken, bescheinigten Chrome im Oktober 2011 einen weltweiten Marktanteil von 25 Prozent. Damit liegt Google nur knapp hinter dem zweitplatzierten Mozilla Firefox mit 26,39 Prozent und dem bisher ungeschlagenen Marktführer Microsoft Internet Explorer (seit Version 7 ist die korrekte Bezeichnung Windows Internet Explorer) mit 40,18 Prozent. Weit abgeschlagen folgen Apple Safari (5,93 Prozent) und Opera (1,81 Prozent). Neben umfangreicher Werbung gibt es mehrere weitere Gründe für den Siegeszug von Google Chrome: Der Browser gilt als besonders schnell und zeichnet sich durch sehr gute Stabilität aus. Auch Sicherheit ist in der heutigen Zeit ein großes Thema, und schon bei der Veröffentlichung der ersten Betaversion im September 2008 hatte das BSI (Bundesamt für Sicherheit in der Informationstechnik) Chrome „technisch vielversprechende Ansätze“ zugeschrieben [2]. Speziell für Webentwickler stellt Chrome einen interessanten Browser dar: Die integrierten Entwicklertools sind sehr umfangreich und müssen den Vergleich mit den allseits beliebten Firefox Add-ons Firebug und Web Developer nicht scheuen. Ein großer Vorteil von Chrome ist die einfache und schnelle Entwicklung von Erweiterungen. Sie werden in erster Linie mit bekannten Technologien wie HTML, CSS und JavaScript entwickelt. Zwar kann Chrome auch mit NPAPI-Plug-ins (Netscape Plug-in Application Programming Interface), einer bei vielen Browsern verbreitete und plattformunabhängige Plug-in-Architektur, erweitert werden, diese Lösung ist laut Google aber nur in Ausnahmefällen empfehlenswert. Es wird ausdrücklich der hier erklärte Entwicklungsweg mit den bekannten Webtechnologien empfohlen. Mithilfe dieses Artikels werden Sie eine einfache aber sinnvolle Chrome-Erweiterung programmieren: Sie wird Ihnen auf den Seiten, die Kontaktinformationen als so genannte hCard ausgezeichnet haben, ein Icon in der Adressleiste anzeigen. Beim Klick darauf werden die wichtigsten der gefundenen Informationen übersichtlich und zentral dargestellt. Der Artikel ist so geschrieben, dass Sie den Quelltext direkt übernehmen können. Nach jedem dargestellten Programmcode folgt die Erklärung, wozu er benötigt wird und welche Funktionen darin definiert werden.

Kurze Einführung: Mikroformate

Wikipedia definiert Mikroformate wie folgt: „Mikroformate sind ein Markup-Format zur semantischen Annotation von HTML oder XHTML. Mikroformat­annotationen können leicht aus Webseiten extrahiert werden und machen weiteren Programmen (etwa Suchmaschinen) die Bedeutung des Seiteninhalts verständlich“. Mikroformate gibt es zum Beispiel für Termine (hCalendar), soziale Beziehungen oder wie im Falle der hCard für Kontaktinformationen. hCard nutzt eins zu eins die Definitionen der bekannteren vCard-Spezifikation (siehe RFC 2426: vCard MIME Directory Profile). Ausgezeichnet wird diese Implementierung durch HTML-Klassen im Quelltext. Eine einfache hCard könnte als HTML wie folgt aussehen:

<div class="vcard"> <span class="fn">Max Mustermann</span>, <span class="org">Musterfirma</span>, <span class="email">example@example.com</span>, <span class="tel">01234/56789</span>, <a class="url" href="http://example.com/">example.com</a> </div>

Das span-Element mit der Klasse fn steht hierbei für „Formatted Name“, genauer gesagt für den Vor- und Nachnamen, getrennt durch ein Leerzeichen. org ist die Abkürzung von „Organization“ und bestimmt den Namen der Organisation beziehungsweise Firma. email definiert die E-Mail-Adresse und tel die Telefonnummer. Der Link mit der Klasse url legt die Internetadresse der Webseite fest. Das Beispiel erklärt daher, dass die Person mit dem Namen Max Mustermann bei der Firma Musterfirma arbeitet. Erreichbar ist Max Mustermann via der E-Mail-Adresse example@example.com oder der Telefonnummer 01234/56789. Der URL der Webseite lautet http://example.com. Weitere Informationen über Mikroformate finden Sie auf der offiziellen Projektwebseite unter [3]. Die komplette Spezifikation von hCard 1.0 ist direkt unter [4] abrufbar und unter [5] finden Sie einen umfangreichen Generator für hCard.

Bevor Sie loslegen

Angesichts der automatischen Updatefunktion in Goo­gle Chrome sollten Sie bereits die aktuellste Version des Browsers besitzen, die Ihnen die meisten Möglichkeiten, speziell im Hinblick auf neue CSS3-Eigenschaften oder JavaScript-Funktionen verschafft. Der bekannte Goo­gle-Mitarbeiter Matt Cutts [6] empfiehlt in seinem Blog für die Entwicklung von Erweiterungen, in den Goo­gle Chrome Developer Channel zu wechseln [7]. Diese Version des Browsers befindet sich aktuell noch in der Entwicklung, gilt generell jedoch bereits als stabil und nutzbar. Sie sollten diese Information für zukünftige Erweiterungen im Hinterkopf behalten, aber für unser Projekt ist der Channel nicht notwendig. Für das Bearbeiten von HTML5, CSS3 und JavaScript benötigen Sie einen Editor Ihrer Wahl. Unter [8] finden Sie den Goo­gle Chrome Extensions Developer Guide. Dieses Nachschlagewerk wird Ihnen bei der Programmierung von Erweiterungen eine große Hilfe sein und stellt immer die erste Anlaufstelle bei Fragen und Problemen dar.

Erstellen Sie ein eigenes Verzeichnis für die Erweiterung auf Ihrem System und nennen Sie es hCard-Finder. Es empfiehlt sich, ihm den gleichen Namen zu geben, den Ihre Erweiterung später bekommen soll. Darin werden alle für die Erweiterung benötigten Dateien abgelegt. Um für mehr Struktur zu sorgen, erstellen Sie innerhalb des Verzeichnisses zusätzlich einen Ordner js für JavaScript-Dateien sowie img für Bilder. Später benötigen Sie noch zwei freie JavaScript-Bibliotheken, die Ihnen einige Arbeit beim Programmieren abnehmen werde...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang