Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Dr. Web Redaktion
  • 16. Mai 2012
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

Chris Hortsch Webdesign

Berlin

Werbeagentur Hannover | 360 Grad Konzept

Hannover

PromoMasters Online Marketing

Wien

WPSteinheisser Photography

Ludwigsburg

Evergreen Media

Innsbruck

Alle Agenturpartner

Jobs

Media Manager in München

München

Assistent/in der Geschäfts­führung

Innsbruck

Webdesigner – Vollzeit

Remote

Copywriter – Vollzeit

Remote

System Engineer – Managed Service

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

So machst du den Tag zur Nacht mit Photoshop

Willst du aus Gründen eine Aufnahme bei Sonnenschein in eine romantische Version bei Nacht verwandeln, so ist das in Photoshop oder kostenlosen Alternativen einfacher als

 →   

Produktfotografie: Wie das perfekte Produktfoto entsteht

Besonders für den eigenen Online-Shop ist eine professionelle Produktfotografie unerlässlich. Denn: Das Produkt wird auch über die Fotos verkauft. Deshalb müssen diese Fotos möglichst perfekt

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.