Ob beruflich, privat, gemeinnützig oder „just-for-fun“ … im Web zu publizieren ist heute Normalität. Browser Erweiterungen können dabei praktische Helfer sein und Arbeitsabläufe effizienter machen. Unser Team Web & Digital Media präsentiert einige seiner Favoriten.

Was ist eine Browser Erweiterung ?

Eine Erweiterung, auch Extension genannt, fügt dem Browser eine neue Funktion hinzu. Mit einer Erweiterung kann der Browser somit individueller auf die eigenen Bedürfnisse zugeschnitten werden.

Im Gegensatz zu Browser Apps besitzen Erweiterungen lediglich eine kleine bis keine eigene User Interface (UI) Komponente. Das heisst sie integrieren entweder mit einem bereits genutzten Service (z. B. OneNote Clipper), fügen dem Browser neue Features hinzu oder ändern Einzelelemente direkt auf einer Webseite (z. B. wie Currency Converter die Währung von Preisangaben auf einer Webseite). Erweiterungen wirken entsprechend über Websites und Web-Apps hinweg (von wenigen Ausnahmen abgesehen).[¹]

Chrome, Firefox und Internet Explorer

Chrome hat sich seit 2012 kontinuierlich als meistgenutzter Browser weltweit durchgesetzt (siehe dazu Statista)[²]. Dazu hat nicht zuletzt das breite Angebot an Erweiterungen und Apps für Chrome beigetragen. Daher ist dieser Blogbeitrag auf Chrome ausgerichtet.
Firefox ist ebenfalls für Vielfalt und -zahl erhältlicher Erweiterungen bekannt und beliebt. Diese weisen teilweise einen Funktionsumfang auf, der bei anderen Browsern nicht möglich wäre. Firefox-Erweiterungen werden Gegenstand eines späteren Blogbeitrags sein.
Für den Internet Explorer ist das Angebot von Add-ons vergleichsweise klein.[³]

10 Chrome Erweiterungen

Window Resizer

Wie sieht die Homepage der eigenen Website auf unterschiedlichen Endgeräten aus? Mit dem Window Resizer kann einfach ermittelt werden, wie sich eine responsive Website verhält. Sie verändert die Grösse des Browser-Fensters mit einem Klick und simuliert so unterschiedliche Bildschirmgrössen. Die gleiche Funktion gibt es zwar auch in den Google Developer Tools. Über die Extension spart man jedoch ein paar Klicks.

Abbildung 1: Anpassung der Grösse des Browserfensters mit dem „Window Resizer“

Font Playground

Mit der Erweiterung können Live-Websites in unterschiedlichen Schriftarten durchgespielt werden. Verwendet werden können dafür die jeweils lokal gespeicherten sowie die Google Schriftarten.

Abbildung 2: ETH-Zürich Homepage mit Schrift Monotype Corsiva

What Font

Eine Website gefällt und man wüsste gern welche Schrift verwendet wird? Kein Problem! Mit der Erweiterung „What Font“ lässt sich diese leicht ermitteln. Die Erweiterung wird mit einem Klick auf das Icon neben der Omnibox aktiviert. Fährt man dann mit der Mouse über die Textelemente, wird die verwendete Schriftart mittels Tooltip eingeblendet.

Abbildung 3: Bestimmung der Schriftart von Innovation@ETH-Bibliothek mit „What Font“

ColorPick Eyedropper

Mit diesem Tool können Farbwerte von Webseiten extrahiert werden. Die Farbe kann Pixel-genau ausgewählt werden. Dadurch ist die Erweiterung auch gut auf Fotografien anwendbar. Der Funktionsumfang ist einfach und übersichtlich.

Abbildung 4: Farbbestimmung mit dem ColorPick Eyedropper auf der Einstiegsseite des Thomas-Mann-Archiv Online

ColorZilla

Auch mit ColorZilla lassen sich Farbwerte von Webseiten und Bildern bestimmen. Darüber hinaus können mit dem Webpage Color Analyzer die Farben aller CSS-Elemente einer Webseite ermittelt werden. Ein zusätzlich verfügbarer Gradient Generator macht die Erweiterung auch zu einem Werkzeug für die fortgeschrittene Verwendung.

Abbildung 5: „ColorZilla“ im Test auf E-Pics

Check my links

Viele Links auf einer Website und keine Zeit einzeln zu testen, ob sie funktionieren? Dann kann „Check my links“ hilfreich sein. Die Erweiterung zeigt die Anzahl der Links auf einer Seite an und schlüsselt die davon funktionierenden bzw. nicht funktionierenden auf. Entsprechend werden diese auf der Seite entweder grün oder rot hervorgehoben.

Abbildung 6 : Link-Check auf einer Seite des Wissensportals

Project Naptha

Diese praktische Erweiterung ermöglicht eine OCR Texterkennung für Bilder. Der vorhandene Text kann hervorgehoben, kopiert, und sogar editiert sowie übersetzt werden. Die Anwendungsmöglichkeiten sind vielfältig, allerdings ist die Bedienung des Tools zu Beginn nicht besonders intuitiv. Sich eines der von Usern auf Youtube eingestellten Tutorials (z. B. von N. Boyd) anzusehen, kann daher hilfreich sein.

Abbildung 7: Screenshot Website „Project Naptha“

aXe

Die Erweiterung aXe ist ein hilfreiches Werkzeug, um die Barrierefreiheit (Accessibility) von Websites zu testen. Sie wird nach ihrer Installation nicht als Icon neben der Omnibox angezeigt, sondern erweitert die anwählbaren Tabs der in Chrome integrierten Google DevTools. Mit der rechten Maustaste die angezeigte Webseite anklicken und über „Prüfen“ das Panel öffnen. Dann den Tab „aXe“ anwählen und die Analyse starten. Für Barrierefreiheit problematische Elemente werden, falls vorhanden, in einer Liste mit Kurzbeschreibungen angezeigt. Zu diesen können bei Bedarf detaillierte Informationen abgerufen werden.

Abbildung 8: aXe vor dem Analysestart für e-manuscripta

Page Load Time

Mit der Erweiterung können die Ladezeiten von Webseiten gemessen und direkt im Toolbar angezeigt werden. Sehr praktisch um sich einen Eindruck zu verschaffen, wo man in Sachen Web Performance steht.

Abbildung 9: Load Time Messung am Beispiel des Wissensportals

SEOStack Keyword Tool

Für diejenigen die sich mit Suchmaschinenoptimierung (SEO) befassen, kann dieses Tool hilfreich sein. SEOStack zeigt auf Basis von „Seed-Keywords“ welche Suchanfragen mit diesen durchgeführt werden. So kann ein besseres Verständnis dafür entwickelt werden, welche (Suchan-) Fragen die User in Zusammenhang mit dem eigenen Angebot besonders oft stellen. Das Tool bezieht sich dabei auf Suchen in Google und Youtube.