Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein! Für aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich über neue Artikel und wichtige Hinweise von uns!

Einstieg in das Erstellen von Browser-Erweiterungen

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

Seien wir ehrlich: Die meisten von euch haben vermutlich nur eine Erweiterung installiert, nämlich AdBlock. Dabei bieten uns Browser-Erweiterungen so viel mehr Möglichkeiten, als nur Werbung zu blockieren. Um euch nun auch dafür zu begeistern, legen wir am besten direkt los!

In diesem ersten Artikel gibt es vorab einige Hintergrundinformationen; mit dem Programmieren beginnen wir im nächsten Artikel.

Die Voraussetzungen

Bevor wir mit dem Programmieren beginnen, noch eine schnelle Übersicht, was ihr schon an Erfahrungen mitbringen solltet:

  • Grundverständnis für HTML sowie CSS
  • Erfahrung im Umgang mit JavaScript und JSON

Unsicher? Schaut euch ruhig noch einige Tutorials auf YouTube dazu an oder lest euch den ein oder anderen aufschlussreichen Artikel von HelloCoding zu den Themen durch, bevor ihr loslegt!

Video über das Thema Browser Erweiterungen

Marktanteile der Browser

Browser gibt es wie Sand am Meer, aber für welche sollte ich meine Browser-Erweiterung entwickeln und veröffentlichen? Für diese Frage habe ich euch einmal eine Infografik mitgebracht:

Generell lässt sich sagen: Je mehr Browser ich unterstütze, desto mehr potenzielle Nutzer habe ich auch.

Da Chrome mit Abstand den größten Marktanteil (71%) hat, empfiehlt es sich, die Erweiterung dafür zu entwickeln. Bevor ihr euch den Kopf darüber zerbrecht, welche Browser ihr nun unterstützen solltet: Die Umwandlung von Chrome-Erweiterungen in Erweiterungen für andere Browser (Firefox, Safari und Edge) ist meistens nicht sonderlich schwierig. Einige Browser, wie beispielsweise Opera, Vivaldi und Brave können Erweiterungen sogar direkt aus dem "chrome web store" installieren, da diese, genau wie Chrome, auf Chromium basieren!

Den Internet Explorer (IE) vernachlässige ich in der Infografik, da dieser, abgesehen davon, dass er längst veraltet ist, vermehrt notgedrungen von Firmen eingesetzt wird, da bestimmte Software nur an den IE angepasst ist.

Übrigens: Einige Browser nennen es nicht Erweiterung, sondern Add-on, Plugin oder auch Extension. Bis auf die Bezeichnung gibt es hier aber keinen Unterschied.

Was muss ich beim Veröffentlichen der Erweiterung beachten?

Nachdem wir unsere Erweiterung entwickelt haben, müssen wir diese nun auch irgendwie an den Mann oder die Frau bringen. Dafür bieten uns die Browser häufig offizielle Websites  bzw. Software an, wo wir die Erweiterung veröffentlichen können. Bei Chrome wäre dies z.B. der "chrome web store", bei Firefox "Firefox Add-ons", bei Safari der "App Store" und so weiter. Da einige Browser die Erweiterung auch direkt aus dem "chrome web store" beziehen können, müssen wir unsere Erweiterung lediglich in folgenden Stores veröffentlichen:

  • Chrome web store (5$ / einmalig)
  • Firefox Add-ons (kostenlos)
  • App Store (99$ / jährlich)
  • Microsoft Store (15€ / einmalig)*

Damit decken wir sämtliche Browser (abgesehen vom IE und evtl. einigen Browsern unter "Sonstige") ab.

Die Browser bieten auch die Möglichkeit an, Erweiterungen für Testzwecke außerhalb des entsprechenden Stores zu laden. Dies sollte allerdings keine Dauerlösung sein, da es für Endnutzer relativ umständlich ist.

* Microsoft arbeitet momentan schon an einer neueren Version von Edge, welche ebenfalls auf Chromium basiert, wodurch auch hier Installationen über den "chrome web store" möglich sein werden.

Programmwahl

Welches Programm ihr zum entwickeln verwendet, ist letztendlich euch selbst überlassen, im Laufe der Tutorialreihe verwende ich selbst Visual Studio Code. Falls ihr ein simpleres Programm präferiert, kann ich euch auch Notepad++ ans Herz legen.

Fazit

Dadurch, dass sich Chrome Erweiterungen relativ leicht in Erweiterungen für andere Browser umwandeln lassen, sollte man definitiv davon Gebrauch machen. Um fast alle Browser abzudecken, muss die Erweiterung lediglich im "chrome web store", in "Firefox Add-ons", im "App Store" sowie im "Microsoft Store" veröffentlicht werden. Bis auf den "App Store" sind die Kosten sehr gering (knapp 20€) und können auch von Hobbyprogrammierern beglichen werden. Einzige Voraussetzung für die folgenden Beiträge ist ein Grundverständnis in HTML, CSS, JS und JSON.

Vielen Dank fürs Lesen, bis zum nächsten Artikel!

Autor

Lars

Ich bin Lars, 20 und studiere Wirtschaftsinformatik. In meiner Freizeit beschäftige ich mich leidenschaftlich gerne mit Webentwicklung sowie Webdesign.

Zur Autorseite
Home Menü Suche
X