Google Chrome ist seit vielen Jahren mein bevorzugter Browser. Über die Jahre habe ich unzählige Extensions ausprobiert.
Einige sind von Tag 1 an dabei. Viele wurden durchgetauscht oder mit der Zeit überflüssig, da Chrome ähnliche Funktionalitäten nachgerüstet hat.
Diese 16 Chrome Extensions habe ich aktuell installiert und viele davon nutze ich regelmäßig. Manche hingegen kaum, denke aber, dass Sie einmal nützlich sein werden.
Einige sind sich sehr ähnlich, da würde ich gerne noch aussortieren. Ich freue mich immer über Tipps.
Auflistung in alphabetischer Reihenfolge.
1. Accessibility Insights for Web
Diese Extension bietet umfangreiche Accessibility-Tests. Bietet dir damit viele hilfreiche Tools zur Optimierung der Barrierefreiheit einer Website.
Auch ein Schnelltest “FastPass” ist dabei, sowie “Ad hoc tools” zur Markierung von Überschriften, Kontrasten, Tabnavigation und Landmarks auf der Seite.
Eine sehr gute Erweiterung für A11y-Optimierung.
2. Accessible Color Picker
Color Picker gibt es wie Sand am Meer. Dieser hier prüft dabei aber auch den Kontrast zwischen Vordergrund- und Hintergrund-Farbe nach WCAG 2.0 und hilft dir diesen zu optimieren.
Die Oberfläche ist nach kurzer Orientierung sehr gut bedienbar und das Tool extrem hilfreich.
3. Blipshot
Auch Screenshot-Extensions gibt es unzählige. Ich habe auch schon viele ausprobiert und oftmals können die viel zu viel oder wollen die Bilder irgendwo ins Netz teilen.
Blipshot ist da ganz simpel: Ein Klick auf das Icon startet direkt den Screenshot-Prozess. Die Seite wird automatisch gescrollt und häppchenweise aufgenommen. Dann kurz noch montiert und das Ergebnis kann begutachtet und nach belieben abgespeichert werden.
Für Screenshots von einzelnen Bereichen nutze ich die in Chrome integrierte Screenshot-Funktion oder direkt die vom Betriebssystem.
4. CSS Peeper
Anders als der Name vermuten lässt, spannert diese Chrome Extension nicht nur auf CSS. Ein Klick auf das Icon öffnet ein kleines, sehr hübsches, modales Fenster auf der Seite. In drei Tabs gibt es allgemeine Infos, Farben und Assets.
Die Übersicht im ersten Tab zeigt beispielsweise ein Artikelbild, den Titel der Seite, Schriften für Headlines und Fließtext, Dateigröße des CSS, sowie dessen Ladezeit.
Der zweite gibt eine Übersicht aller Farbwerte mit einfacher Kopierfunktion. Und im dritten Tab werden die Assets der Seite aufgeführt, wie Bilder und Icons. Auch diese lassen sich einfach exportieren.
5. ColorZilla
Wohl das Urgestein unter den Color Pickern. Einfach und solide.
Den Aufnahmebereich für den Farbwert kannst du selbst bestimmen, von 1×1 Pixel bis zu einer frei aufgezogenen Auswahl. Zudem lassen sich alle verwendeten Farben einer Seite auflisten.
Das Format für die Anzeige der Farbwerte lässt sich einstellen und es gibt auch noch weitere nette Optionen.
6. Emmet Re:view
Ein Helferlein für responsive Webentwicklung. Ein Klick öffnet die aktuelle Seite in diversen Viewports. Entweder auf Basis der verwendeten Breakpoints oder von dir ausgewählten Gerätegrößen.
Dafür legt die Extension eine Seite mit entsprechend großen iFrames an. Schön übersichtlich beieinander, zum Vergleich der Darstellung. So skaliert, dass es in dein Browserfenster passt.
Scrollen tust du dann alle Viewports gleichzeitig – sehr praktisch!
7. Export SVG with Style
Tut was es sagt. Gilt aber nur für als Bild oder Sprite eingebundene SVGs, nicht aber für direkt im Code enthaltene.
Diese Extension redet nicht viel. Bei Aufruf erscheint ein Dialogfenster mit der Info, wie viele SVGs zum Download bereit sind. Es gibt dann nur eine Option: OK.
Dumm nur, wenn man doch nicht alle SVGs einer Seite herunterladen möchte. Vielleicht, weil es überraschend viele sind und man eigentlich nur ein paar haben wollte.
Es wird nämlich für jedes einzelne ein “Speichern unter”-Dialog geöffnet. Möchtest du den Vorgang abbrechen, musst es für jeden einzelnen Download tun…
Hab es wieder deinstalliert.
8. Kontrast
Noch ein Color Picker im weitesten Sinne. Wieder geht es um Kontrast und damit um Barrierefreiheit. Wenn dir der Accessible Color Picker zu komplex ist, ist Kontrast genau richtig für dich.
Sehr übersichtlich, schick und einfach zu bedienen. Vielleicht der schnellste Weg Kontraste zu prüfen.
9. Loom
Mit Loom kannst du deinen Bildschirm abfilmen und zeitgleich via Webcam dein Angesicht als Bild-im-Bild einblenden. Dazu Ton aufnehmen, und auch schneiden kannst du es mit dem Dienst.
Fertig ist das Video-Tutorial, welches du dann heruntergeladen oder gesichert teilen kannst.
Ein Google- oder Slack-Account ist Voraussetzung für die Nutzung.
Es dauerhaft kostenlos nutzbar, gibt aber auch Premium mit mehr Speicher und besserer Qualität für die Videos.
10. Stylish
Gefällt dir eine Website nicht, du möchtest sie aber dennoch nutzen? Passe den Style einfach selbst an.
Genau das kannst du mit Stylish tun: eigenes CSS anhängen und damit die Stile der Website überschreiben bzw. erweitern.
Auch praktisch um störende Inhalte auszublenden, wie den News-Feed auf Facebook oder typische Werbebereiche.
11. Tag Assistant
Offizielle Extension von Google. Prüft die aktuelle Seite auf Google Tags – nach ausdrücklicher Erlaubnis. Also die Verwendung von Google Analytics oder dem Google Tag Manager (GTM).
Zeigt die korrekte Einbindung dann mittels Ampelfarben an und gibt Hinweise auf Fehler und liefert Infos zu den Tags.
Scheint lokal eingebundene Scripte nicht zu erkennen bzw. zeigt diese als fehlend an. So habe ich es jedenfalls erlebt mit einem Press-Plugin, welches das Script lokal cached und regelmäßig aktualisiert. Da heißt es dann, dass analytics.js fehlt – das Tracking funktioniert aber.
12. VisBug
Eine sehr sexy Oberfläche hat dieser “FireBug für Designer“.
Für super schnelle Analysen von Styles und A11y-Eigenschaften. Einfaches Anpassen von Styles, fast wie in Sketch & Co. – mit Shortcuts, Drag&Drop und Hilfslinien.
Besonders praktisch, wenn man “mal schnell was zeigen” soll oder kurz etwas ausprobieren möchte. Deutlich schneller und komfortabler als mit dem Inspektor.
13. Wappalyzer
Zeigt das eingesetzte System der aktuellen Website auf einen Blick als Icon (Contao, Shopware, WordPress, whatever…).
Ein Klick darauf bietet noch viele weitere Hintergrundinfos zum verwendeten Webserver, Programmiersprachen, Scripten, Statistiken, etc.
Ein sehr praktischer kleiner Helfer.
14. Web Developer
Der Klassiker. Nicht schön, aber mächtig. Bietet eine breite Palette an hilfreichen Funktionen für die Webentwicklung.
Meine liebsten Funktionen sind:
- CSS: Reload Linked Style Sheets
- Forms: Populate Form Fields
- Forms: Display Passwords
- Tools: Validate Local CSS/HTML
Aber da sind noch so viele weitere Funktionen, die ich teils noch nie verwendet habe, die aber extrem viel Potenzial haben.
Bonuslevel
Diese beiden Chrome Extensions sind etwas Off-Topic, aber für Entwickler und Designer dennoch sehr hilfreich.
Ich stolpere sehr häufig über Informationen, die ich mir für später speichern möchte. Dafür nutze ich in erster Linie zwei Dienste: Pocket und Pinterest.
15. Save to Pocket
Ich liebe Pocket! Ich habe da bestimmt schon 1 Million Artikel drin. Einige sogar brav verschlagwortet und archiviert. Die meisten aber wohl leider noch ungelesen.
Pocket speichert nicht einfach Bookmarks, Pocket speichert ganze Beiträge. Ideal ist das für interessante Texte, die ich später lesen oder einfach schnell wiederfinden möchte.
Mit dieser Extension kann ich Artikel mit einem Klick speichern und dann später auf dem Handy offline lesen oder in der Web-App.
Ich einstellen, wie ich meine Texte gerne lese. In meinem Fall in der App weißer Text auf schwarzem Grund und serifenlose Schrift. Der Text etwas größer, damit ich es unterwegs oder auch mal im Bett einfach lesen kann.
Alternativ kann auch die Originaldarstellung der Website gewählt werden. Ich bevorzuge allerdings fast immer meine individualisierte Darstellung. Nur manchmal gelingt es Pocket nicht, den Text sauber zu erfassen. In der Regel liegt das dann aber an unsauberer Syntax, da kann Pocket dann nichts für.
Pocket ist sogar kostenlos. Es gibt aber auch Premium-Tarife.
16. Merken-Button von Pinterest
Für eher visuelle Inhalte nutze ich gerne Pinterest. Ich kann mich dort stundenlang aufhalten. Das sieht man auch an meinen Pinwänden… Schau gerne mal rein, ist ja nicht alles nur für mich.
Die meisten Pins, also gespeicherte Inhalte, habe ich direkt auf Pinterest gefunden. Zunehmend füge ich aber auch selbst Inhalte hinzu, die ich im Web finde.
Das mache ich dann mit dieser Extension. Einfach Rechtsklick auf ein Bild und ab damit zu Pinterest.
Es lassen sich auch private Pinwände anlegen und auch gemeinsam verwalten. Für Moodboards ideal.
Pinterest ist kostenlos. Aber pass auf, was du da pinnst. Mir wurde auch schon eine Pinwand mit bestimmt über 1000 Pins gelöscht…
Solltest du also beispielsweise Inspiration für Akt-Fotografie speichern wollen… lege es im Zweifel als private Pinwand an, dann scheinen die prüden Regeln nicht zu gelten. Oder verteile die Inhalte generell auf viele kleinere Pinwände, damit nicht so viel auf einmal verschwinden kann.
Wie sind deine Erfahrungen mit diesen Chrome Extensions? Welche gehören deiner Meinung noch auf diese Liste? Schreib mir. Ich freue mich von dir zu hören.