Mach mehr aus Chrome!

Der einfache Weg zur Google-Chrome-Erweiterung
Kommentare

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, 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.

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. Mikroformatannotationen 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:

Max Mustermann, Musterfirma, , 01234/56789, example.com

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. Die komplette Spezifikation von hCard 1.0 ist hier abrufbar und hier finden Sie einen umfangreichen Generator für hCard.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -