Der einfache Weg zur Google-Chrome-Erweiterung
Kommentare

Bevor Sie loslegen
Angesichts der automatischen Updatefunktion in Google Chrome sollten Sie bereits die aktuellste Version des Browsers besitzen, die Ihnen die meisten Möglichkeiten, speziell im Hinblick

Bevor Sie loslegen

Angesichts der automatischen Updatefunktion in Google 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 Google-Mitarbeiter Matt Cutts [6] empfiehlt in seinem Blog für die Entwicklung von Erweiterungen, in den Google 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 Google 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 werden. Laden Sie die aktuelle Version von Microformat Shiv [9], einem hCard-Parser in JavaScript, unter [10] herunter und legen Sie die zwei erforderlichen Dateien microformats-coredefinition.min.js und microformats-shiv.min.js im Ordner js ab.

Ferner benötigen Sie jSmart, eine JavaScript-Portierung des beliebten Template-Systems Smarty. Die aktuelle Version finden Sie unter [11]. Legen Sie anschließend die Datei smart-2.5.min.js im Verzeichnis js ab.

manifest.json: die Konfigurationsdatei

Erstellen Sie in dem Verzeichnis Ihrer Erweiterung die Datei manifest.json. Sie wird für jede Erweiterung benötigt und enthält wichtige und zwingend erforderliche Definitionen des Add-ons, intern formatiert als JSON (JavaScript Object Notation). Übernehmen Sie zunächst die folgende JSON-Struktur. Bitte passen Sie dabei auf, die Struktur muss valide sein, eine absolut korrekte Übernahme ist daher erforderlich:

{
 "name":"hCard-Finder",
 "version":"1.0",
 "description":"Zeigt die wichtigsten Informationen der gefunden hCards an zentraler Stelle übersichtlich an.",
 "icons":{
   "16":"img/hCardFinder-16.png",
   "48":"img/hCardFinder-48.png",
   "128":"img/hCardFinder-128.png"
 }
}

Das sind die grundlegenden Informationen Ihrer Erweiterung. Mit name definieren Sie den Namen, der später im Browser beziehungsweise im Google Chrome Web Store [12] angezeigt wird. version bestimmt die aktuelle Versionsnummer. Sie muss bestimmten Regeln entsprechen, die Sie unter [13] nachschlagen können.

Der Text bei description enthält eine kurze und treffende Beschreibung der Erweiterung und steht im Browser unterhalb des bei name definierten Namens. Unter icons wird das Icon der Erweiterung in drei unterschiedlich vordefinierte Größen (16*16, 48*48 und 128*128 Pixel) festgelegt.

Die Angaben name und version sind Pflichtangaben. description und icons sind generell optional, es empfiehlt sich jedoch, sie immer zu definieren. Die drei verschiedenen Größen der Icons werden an unterschiedlichen Positionen benötigt: Die 16*16 Pixel-Version wird als Favicon im Browser beim Google Chrome Web Store und in dieser Erweiterung später ebenfalls als Icon in der Adressleiste genutzt. Die 48*48 Pixel-Version bekommen Sie in der ERWEITERUNGEN-Seite in Chrome angezeigt. Die 128*128 Pixel-Version finden Sie während der Installation sowie im Web Store wieder. Icons können in den Formaten PNG, JPEG, GIF, BMP oder ICO gespeichert werden.

Beachten Sie, dass nur die von Google vorgegebenen Größen benutzt werden dürfen [14]. Erstellen Sie die drei Icons und legen Sie sie in dem Unterordner img innerhalb des Verzeichnisses Ihrer Erweiterung ab. Achten Sie auf eine korrekte Benennung.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -