Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Tutorials » Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 16. Mai 2012

Inhaltsverzeichnis

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…

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

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

chrome extension 009 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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.

chrome extension 010 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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“.

chrome extension 0031 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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:

chrome extension 012 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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:

chrome extension 005 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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:

chrome extension 006 Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger
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)

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

webtronix-media-laravel-agentur-frankfurt-hanau-logo-opt

Webtronix Media GmbH

Hanau

Wolli Ruf Mediendesign Agentur Freiburg.

wolli ruf – mediendesign

Freiburg im Breisgau

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

Webdesign Doerrer Frankfurt.

Webdesign DOERRER

Frankfurt am Main

Andrea Becker Design Logo.

design andrea becker

Frankfurt am Main

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

0 Antworten zu „Erweiterungen für Chrome selbst erstellen: Eine Anleitung für blutige Anfänger“
— was ist Deine Meinung?

  1. Friedrich Meichsner sagt:
    22. Februar 2018 um 7:40 Uhr

    Bei mir wird die Fehlermeldung „Manifest is not valid JSON“ angezeigt.
    Was kann ich machen?

    Antworten
  2. Mike sagt:
    7. Januar 2016 um 19:06 Uhr

    Hi !
    auch wenn der Beitrag nun schon knapp 3 Jahre alt ist, habe ich es nach o.g. Anleitung versucht….
    Leider bekomme ich bei chrome eine Fehlermeldung angezeigt wenn ich versuche das Script zu laden ….
    um genau zu sein an dieser Stelle:
    „Dann öffne ich den Ordner mit den zuvor erstellten Dateien, womit diese nun geladen werden.“
    Folgende Zeile wird reklamiert:
    content_scripts“: [{„matches“: [„http://*/*“],“js“: [inject.js“]}],
    mit der Bemerkung: Fehler beim Laden der Erweiterung aus: ~Desktopchrome extension
    Manifest is not valid JSON. Line: 7, column: 56, Unexpected token.

    also habe die Zeile jetzt ca. 5 mal neu gelesen und geschrieben …. oder vertue ich mich da jedesmal an der gleichen Stelle?
    Oder kann es sein das diese Anleitung mit meiner Chromeversion: 47.0.2526.106 m
    nicht mehr kompatibel ist ?

    Danke im voraus
    Mike

    Antworten
  3. Michael Wagner sagt:
    16. Mai 2012 um 16:53 Uhr

    Wo ist der Gefällt-mir-Button? 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑