Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger

Chrome ist nicht zuletzt durch seine schnelle Ladezeit und seine kurzen Updatezyklen, die für ein hohes Innovationstempo sorgen, in den letzten Jahren immer beliebter geworden. Dabei unterstützte Chrome von Beginn an das Konzept der Erweiterungen. Erweiterungen sind kleine Apps, die auch mit Hilfe von HTML, JavaScript und CSS erstellt werden. Doch was ist, wenn man kein Profi in HTML5 ist und dennoch eine Erweiterung basteln möchte? Nicht verzweifeln: Man kann den Einstieg in die Entwicklung eigener Erweiterungen auch ohne tiefgehende HTML,- CSS,- oder JavaScript-Kenntnisse finden. An einem Beispiel erläutert Jef Vlamings in seinem Blog, wie das geht. Und ich habe mich im Selbstversuch mit seiner Anleitung auseinander gesetzt…

“Hallo Welt”: Eine einfache Browser-Erweiterung

Mit einer Browser-Erweiterung lassen sich neue Funktionen zu einem Browser hinzufügen. In diesem Tutorial geht es darum, eine sehr einfache Browser-Erweiterung zu basteln, welche ein Popup mit der Botschaft “Hallo Welt” anzeigen kann. Natürlich handelt es sich um keine sehr nützliche Erweiterung. Sie dient aber hervorragend zur Verdeutlichung der Grundstrukturen und erleichtert die ersten Schritte auf dem Wege zum Chrome-Erweiterungen-Profi. Ich, als völliger Neuling mit den richtigen Voraussetzungen ausgestattet, bin alle Schritte, am Ende sogar erfolgreich, durchgegangen.  Jetzt kann ich mit gutem Gewissen und aus eigener Erfahrung darüber berichten.

Schritt 1: Eine Manifestdatei erstellen

Als Erstes lege ich einen separaten Ordner an, in dem sich später alle Dateien, die für die zukünftige Chrome-Erweiterung benötigt werden, befinden sollen. Danach öffne ich “Notepad” (man kann natürlich auch einen anderen Texteditor verwenden), kopiere den aus Bild 1 ersichtlichen Code hinein und speichere die Datei unter dem Namen “manifest.json” im Ordner ab. Die Manifestdatei enthält alle Informationen über die Funktionsweise der Erweiterung. Nun kann man die Informationen der Beispieldatei anpassen. Was da genau gemacht wird, beschreibe ich in den weiteren Schritten.

Bild 1: Anlegen der Manifestdatei

Schritt 2:  Anlegen der Datei popup.html

Unsere Erweiterung soll beim Klicken auf das Erweiterungsicon ein Fenster mit dem Text “Hallo Welt” aufmachen. Dafür öffnet man eine neue Editordatei und kopiert den entsprechenden Code (Bild 2) hin. Die Datei wird unter dem Namen “popup.html” abgespeichert. Das Popup zeigt diese HTML-Datei in einem separaten Fenster an.

Bild 2: Erstellung des Popup

Schritt 3: Weitere Dateien gemäß Manifest-Datei

Da in der Manifestdatei weitere Dateien deklariert wurden, müssen diese ebenfalls angelegt werden. Jetzt erstelle ich noch zwei neue leere Dateien im Editor auf und nenne sie background.html und inject.js. Ich verwende das vorgefertigte Icon von Jef. Natürlich kann man ein beliebiges, anderes Icon nehmen, beispielsweise aus einem Freebie.

Los geht’s!

Meine Chrome-Erweiterung ist nun fertig. Um sie zu aktivieren, öffne ich den Chrome Browser und klicke auf das Schraubenschlüssel-Symbol. Im Menü wähle ich “Tools”, dann “Erweiterungen”, setze  ein Häkchen bei “Entwicklermodus” und klicke auf “entpackte Erweiterung laden”. Dann öffne ich den Ordner mit den zuvor erstellten Dateien, womit diese nun geladen werden. Oben rechts erscheint das ausgewählte Icon. Ich klicke darauf und erblicke mit grosser Freude das Popup mit den Worten “Hallo Welt”.

Bild 3: Es funktioniert tatsächlich!

Background.html und inject.js

Die Erweiterung kann weiter aufgebohrt werden. Im Weiteren habe ich erfahren, welchen Sinn die Dateien “background.html” und “inject.js” haben. Background-Pages (Hintergrundseiten) sind in HTML5-Code eingebettete JavaScripte, die für den Nutzer nicht sichtbar sind. Sie werden aber ständig im Hintergrund ausgeführt (daher auch der Name) und fungieren als Vermittler zwischen allen Erweiterungen, sowie allen aktuell geöffneten Tabs. Um meine Hintergrundseite auszubauen, habe ich in meine background.html folgenden Code eingefügt:

Bild 4: Ausbauen einer Hintergrundseite

Um die eigenen Hintergrundseiten zu debuggen, sollte man die eigens zu diesem Zweck verfügbare Debugging-Konsole aktivieren. Zu diesem Zweck gehe ich gemäß Jefs Anleitung auf die Erweiterungsseite, um dort die “background.html” zu wählen. Nun wird die Debugging-Konsole aktiviert und folgendes Fenster geöffnet:

Bild 5: Aktivieren der Debugging-Konsole

Content-Scripts und Message-Passing

Weiter geht es um JavaScripte, welche mit Hilfe der Verwendung von DOM Inhalte einer Webseite lesen können. Damit zwischen dem sogenannten Content-Script ein Datenaustausch mit der Hintergrundseite erfolgen kann, muss das sogenannte Message-Passing, also ein Informationsaustausch, erfolgen. Dies ist erforderlich, weil die Content-Scripte zusammenhängend mit verschiedenen Webseiten laufen und nicht mit Hintergrundseiten. Also müsste ich die background.html-Datei nochmal verändern. Nun sieht meine background.html folgendermaßen aus:

Bild 6: Kommunikation zwischen der Hintergrundseite und dem Content-Script mittels Message-Passing

Durch das strikte Befolgen sämtlicher Anleitungsschritte habe ich meine erste Erweiterung in Chrome gebaut und zusätzlich einiges an Hintergrundwissen gewonnen. Wenn man keine tiefen Kenntnisse in HTML5, CSS3 und JavaScript hat, aber dennoch eine Erweiterung selber basteln möchte, ist dieses Tutorial für den Einstieg sehr hilfreich.

Weitere Quellen zur Entwicklung eigener Erweiterungen in Chrome

Folgend habe ich noch ein paar Links zu weiteren Tutorials hinzugefügt, welche sich ebenfalls mit Erweiterungen für Chrome beschäftigen:

• Chrome Extensions: Hello World – ugotit.de
• Making your first Google Chrome extension – TutorialZine.com

(dpe)