Das ganze Potential des Browsers nutzen

Das ganze Potential des Browsers nutzen

Problem

Jeder weiß, wie man einen Browser bedient, um bestimmte Aufgaben zu erledigen. Und dennoch (oder vielleicht genau deswegen) gibt es Dinge, bei denen viele Menschen um ein Problem drumherum arbeiten, da sie den vollen Umfang des Browser nicht kennen. Mögliche Probleme:

  • Man hat den Verdacht, dass der Browser-Cache, Local-Storage oder Cookies für ein Problem verantwortlich sind und löscht diese deshalb, um diese Theorie zu testen.
  • Man schreibt Debugging-Code, der helfen soll, den Status(-wechsel) der Applikation nachzuvollziehen.
  • Man muss sich in einem Web-Service (Google Mail, Office365, ...) mit unterschiedlichen Nutzerkennungen einloggen und nutzt deshalb je Benutzeraccount einen anderen Browser.

Lösung

  • Anstatt den Browser-Cache, etc. zu löschen, einfach den privaten/inkognito Modus des Browsers nutzen. Dieser trennt strikt Cache, Local-Storage, Cookies, etc. von den nicht privaten Tabs.
  • So genannte Web-Extensions (Früher: Browser-Erweiterung) erlauben es, Funktionalität zum Browser hinzuzufügen. Am bekanntesten sind Ad-Blocker, aber es gibt auch einige spezielle Erweiterungen für Entwickler. Diese ermöglichen es z.B., den Redux State zu beobachten.
  • Die Abkapselung von privaten Fenstern hat Mozilla im Firefox eine Stufe weitergetrieben:
    • So genannte Container Tabs (Kontextuelle Identitäten) erlauben es, neue Tabs zu erstellen, die, ähnlich wie der private Modus, getrennt von normalen Tabs sind. Im Gegensatz zum privaten Modus werden Cache, Cookies, etc. beim Schließen nicht vergessen.
    • Man kann sich also jeweils einen Container für die Firma, den Kunden und auch für den privaten Account erstellen. Dazu einfach länger auf das Plus in der Tableiste drücken oder über das Menü "Datei -> Neuen Container Tab".

Beispiel

Web-Extensions, die man sich mal anschauen kann:

Weiterführende Aspekte

Falls es mal keine passende Web-Extension gibt, kann man sich relativ leicht eine Web-Extension in JavaScript oder TypeScript schreiben:

  • Popups oder Sidebars können Informationen oder Bedienelemente bereitstellen
  • Panels können die Browser Entwickler-Tools ergänzen
  • HTTP Header können live inspiziert und verändert werden. Anfragen auf andere URLs umleiten ist auch möglich.
  • Code und CSS kann in Webseiten injiziert werden, um fehlende Funktionalität zu ergänzen.
  • Cookies lesen, speichern und löschen gehört zu den Basics.

Die Möglichkeiten sind endlos. Die meisten Features sind im Firefox verfügbar, aber alle großen Browser (Firefox, Chrome, Edge, Opera) unterstützen Web-Extensions zumindest in Teilen. Polyfills für Cross-Browser Entwicklung sind auf NPM zu finden: JavaScript (webextension-polyfill) und TypeScript (webextension-polyfill-ts)

API Dokumentation: https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions

---

Autor: Santo Pfingsten / Software Engineer / jambit Standort Leipzig

Das ganze Potential des Browsers nutzen mit Web Extensions (Browsererweiterungen)

Wir verwenden Cookies, um unsere Webseite für Sie zu optimieren. Mit dem Besuch unserer Webseite erklären Sie sich damit einverstanden. // Our website is using cookies to improve your experience. By continuing to browse the site, you are agreeing to our use of cookies.

Weitere Informationen finden Sie in unserer Datenschutzerklärung. // For more information, please refer to our privacy policy.