Für unsere Kunden entwickeln wir Browser Extensions für Firefox, Chrome, Edge, Opera, IE (ab Version 9) und Safari. Hierbei gibt es unterschiedliche Technologien um Erweiterungen für die verschiedenen Browser zu entwickeln. Auch das W3C-Konsortium hat diese Problematik erkannt und einen Standard/API erstellt, welcher „WebExtensions“ genannt wird, mit welcher man Cross-Browser-Extensions für gleich mehrere Browser entwickeln kann. Zur Zeit werden diese von Chrome, Firefox, Opera und Edge unterstützt. Für Internet Explorer und Safari muss man dies auf die „alte“ native Weise erstellen.
Bei „WebExtensions“ gibt es eine Reihe von Techniken, die ich hier aufzählen möchte:
- Content scripts: Diese werden dazu verwendet um eine Website zu manipulieren (DOM Manipulation).
- Background page/scripts: Dieses Skript läuft im Hintergrund. Hier kann man zum Beispiel REST-Aufrufe tätigen.
- Messaging API: Über eine Messaging API können Informationen/Daten/Nachrichten zwischen content und background script ausgetauscht werden.
- Browser actions: Hiermit kann man die Buttons der Erweiterung definieren
- Page actions: Hiermit kann man Buttons in die Adressleiste einfügen. Wird von Erweiterungen verwendet, welche nur auf einer/einigen Seite(n) ausgeführt werden.
- Options page: Damit kann man Einstellungsmöglichkeiten definieren, welche über eine Standardisierte Einstellungsseite vorgenommen werden.
- Web accessible resources: Damit können Ressourcen in die Erweiterung gepackt werden. Zum Beispiel um auf einer Website ein Bild auszutauschen.
Wir entwickeln unsere „WebExtesions“ zuerst immer mit Firefox (da dieser die besten Entwicklungstools bietet). Danach werden diese nach Chrome, Opera und Edge portiert. Das Portieren ist meistens relativ wenig Aufwand. Manche Funktionen von Firefox werden im Chrome nicht implementiert oder haben dort einen anderen Namen und umgekehrt. Für Edge gibt es ein automatisches Tool zum Portieren von „WebExtensions“ von Chrome nach Edge. Eine gute Seite mit vielen Beispielen ist die Entwickler-Seite von Mozilla. Außerdem gibt es ein gutes Boilerplate hierfür.
Sonstige Browser
Für die weiteren relevanten Browser (Internet Explorer und Safari) können natürlich auch Browser Extensions entwickelt werden. Diese Browser unterstützen allerdings nicht die „WebExtensions“-Methode, daher müssen die Extensions nativ entwickelt werden:
- Internet Explorer (6-11): Hierfür werden sogenannte BHO‚s (Browser Helper Object) entwickelt. Diese haben eine ähnliche Funktionalität wie bei „WebExtensions“ (Zugriff auf DOM, Buttons erstellen, REST-API aufrufen), allerdings werden die BHO’s mittels .NET (VB, C#, C++) entwickelt. Dies ist allerdings sehr viel umständlicher und aufwändiger als „WebExtensions“, da es hier nicht viel Dokumentation, Beispiele etc. gibt. Also hier verhält sich der Internet Explorer um einiges schwer fälliger und komplizierter.
- Safari: Diese werden in Xcode mittels HTML, CSS und JavaScript entwickelt. Diese sind sehr gut dokumentiert und es gibt auch viele Beispiele zu Extensions mit Safari.
Hier ist noch zu sagen dass „WebExtensions“ von den mobilen Browsern meist nicht unterstützt werden. Einzig Firefox und ein eher unbekanntere Browser Namens „Dolphin“ unterstützen auch mobile Extensions.
Stores
Extensions werden zumeist über die jeweiligen Stores der Browser-Hersteller vertrieben, wie dies bei Chrome, Safari, Firefox, Opera und Edge der Fall ist. Bei diesen kann man auch auswählen ob die Extension privat oder öffentlich verfügbar sein soll – mann kann sogar einen Preis hierfür festlegen. Auch findet eine automatische Sicherheitsprüfung der Extensions statt. Bei Edge befindet sich der Store noch im Aufbau, und ist nur für ausgewählte Partner-Extensions zugänglich (hier).
Comdirect Extension (Bonus-Radar)
Für einen Kunden haben wir das „comdirect Bonus-Radar“ entwickelt. Dabei werden dem Nutzer auf Partner-Shop-Seiten der comdirect angezeigt, ob hier ein Bonus gewährt wird bzw. ob das Cashback aktiv ist.
Aus der Beschreibung der Extension: „Nutzen Sie unseren comdirect Bonus-Radar, um beim Online-Shopping direkt in Ihren Shops vom Bonus-Sparen zu profitieren und keine Rabatte zu verpassen. Das Login über das Bonus-Sparen-Portal entfällt damit“. Weitere Informationen findet man unter diesem Link.
Kontakt und weitere Informationen
Holzmann Harald, BSc
E-Mail: harald(at)varioous.at
Telefon: +43 7242 21 99 44 33
Quellen / Links
Wir entwickeln digitale Lösungen mit Leidenschaft
Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.
Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:
