Unverzichtbare Chrome-Erweiterungen für Webflow (Update 2026)

Hier bei Milk Moon Studio sind wir auf Webdesign spezialisiert und darauf, diese Designs auf Webflow zum Leben zu erwecken. Weil wir aber nur ein kleines Webflow-Studio sind, versuchen wir, uns das Leben so einfach zu machen, wie es menschenmöglich ist (siehe Potato weiter unten, einfacher geht es kaum). Deshalb haben wir im Lauf der Jahre einige Webflow-Chrome-Erweiterungen ausprobiert, um unsere Workflows zu optimieren. Weil wir auch der Community gern etwas zurückgeben (schau dir unsere How-tos an), haben wir unten einen Überblick über die Webflow-Erweiterungen zusammengestellt, die wir genutzt haben. Wir hoffen, die Liste gefällt dir und spart dir etwas Zeit. 

Update, September 2026: Wir haben jede Erweiterung unten noch einmal mit ihrer Seite im Chrome Web Store abgeglichen. Die meisten gibt es weiterhin, aber die Finsweet-Erweiterung hat sich stark verändert (das meiste steckt jetzt in einer nativen Webflow-App), Modkit wurde aus dem Store entfernt, und ein paar Funktionslisten sind nicht mehr auf dem Stand von früher. In jedem Abschnitt haben wir markiert, was sich geändert hat. Wenn du zusätzlich die größere Werkzeugkiste suchst: In unserem Beitrag über kostenlose und kostenpflichtige Tools für kleine Designagenturen und Freelancer geht es über Browser-Erweiterungen hinaus.

Finsweet Extension für Webflow

Wir starten mit der Mutter aller Erweiterungen: DER VON FINSWEET. Von allen Webflow-Partnern hat dieses Team wohl am meisten für die Community getan. Die Leute dort haben den Client-First-Ansatz entwickelt, und hier kannst du nachlesen, wie Milk Moon zu Client-First gekommen ist. Darüber hinaus haben sie aber so viel für den Normalanwender gebaut. Die Finsweet-Erweiterung gibt dir Zugriff auf alle ihre Attribut-Lösungen, etwa nahtlose Paginierung und CMS-Slider, dazu Dinge wie das Neuordnen von Styles und Farbfeldern, das Entbinden von CMS-Collection-Listen, das vertikale Skalieren des Canvas und natürlich Client-First. Alle größeren Änderungen erzeugen außerdem ein Backup, falls etwas kaputtgeht, also ja, das ist ein Muss. Unser persönlicher Favorit ist die Ordnerfunktion, und wenn du Client-First einsetzt, ist sie großartig. Du willst die Benennung eines ganzen Abschnitts oder einer Komponente ändern? Das erledigt sie. 

Update, September 2026: Finsweet hat die meisten dieser Funktionen in eine native Webflow-App verlagert, die Finsweet-Extension-App. Im Eintrag im Chrome Web Store steht jetzt: „Most features are now in our new native Webflow App. Only site settings remain in this Chrome Extension due to Webflow API limits.“ Installiere also zuerst die App und behalte die Chrome-Erweiterung für die Site-Einstellungen. Die App nennt unter anderem Klassenordner, das Zusammenführen von Combo-Klassen, das Entfernen doppelter Styles, das Entbinden von CMS-Collections, einen Asset-Exporter und eine PX-zu-REM-Migration. Die obige Beschreibung zeigt, wie die Erweiterung funktionierte, als wir diesen Beitrag geschrieben haben. Prüfe also noch einmal, ob die Funktion, die du brauchst, noch vorhanden ist. Wenn Client-First neu für dich ist, ist unser Beitrag zum Webflow-Acme-Styleguide ein guter Einstieg. 

Funktionen (wie sie waren)

• Bulk-Weiterleitungen (Bulk Redirects)
• Styles sortieren und bearbeiten
• Finsweet Attributes
• Client-First
• Und vieles mehr, zu viel für diese Liste, installiere sie einfach

Finsweet im Chrome Web Store hinzufügen

F'in sweet Scrollbar Styler für Webflow

Wir fassen uns kurz, denn auch diese Erweiterung stammt von Finsweet. Mit ihr gestaltest du Scrollbars visuell direkt in Webflow und fügst das CSS dem Projekt hinzu. Sie wurde seit 2022 nicht mehr aktualisiert, ist aber weiterhin im Store und erledigt ihre eine Aufgabe immer noch.

F'in sweet Scrollbar im Chrome Web Store hinzufügen

Relume Chrome Extension für Webflow

Die ist ideal, wenn du gerade erst mit Webflow anfängst und, na ja, einen Startpunkt brauchst. Hier warten mehr als 1.000 vorgefertigte Komponenten auf dich, und fortgeschrittene Webflow-Nutzer können die selbst gebauten Komponenten in einer privaten Bibliothek speichern und teilen. Wie praktisch das ist, wenn du in einem größeren Team arbeitest oder Komponenten mit Kunden teilen musst, lässt sich kaum sagen. 

Das verborgene Highlight ist aber Class Sync. Schon mal etwas von einem Projekt ins andere kopiert und danach einen Haufen neuer Klassen wie Button1, Button2 usw. gehabt? Mit Class Sync fügst du es einfach ein, und zack, die doppelten Klassen sind weg. Enthält das Eingefügte eine bereits vorhandene Klasse, nutzt Class Sync einfach die Klasse im aktuellen Projekt, in das du einfügst. Denk nur daran, es einzuschalten, bevor du ins Projekt einfügst. Im Eintrag im Chrome Web Store (aktualisiert im Juli 2026) steht all das weiterhin, einschließlich der privaten Bibliothek, die du mit Kunden und deinem Team teilen kannst. Wenn du lieber mit einem ganzen Projekt statt mit einer einzelnen Komponente startest, sind unsere Webflow-Cloneables eine weitere Anlaufstelle für einen Startpunkt.

Funktionen

• Mehr als 1.000 Komponenten und Seitenlayouts
• Class Sync, um doppelte Klassen zu vermeiden
• SVGs in einbettbare HTML-Elemente umwandeln
• Eigene Komponenten erstellen und in einer privaten Bibliothek speichern, aus der du sie teilen kannst.

Relume im Chrome Web Store hinzufügen

Potato Extension für Webflow

Diese hier fällt dir zunächst kaum auf, hat aber eine tolle Funktion. Gib im Webflow Designer einen Pixelwert in ein Feld ein, drück die Leertaste, und der Pixelwert wird in REM umgerechnet und als REM-Wert im Designer gesetzt. Das ist eine große Hilfe, wenn du responsivere Websites in Webflow bauen willst. Vor allem, wenn du mit einem Design arbeitest, das standardmäßig in px vorliegt, etwa aus Figma (Figmas Dev Mode kann mittlerweile zwar REM-Werte ausgeben, aber na ja). Webflow hat REM inzwischen im Einheiten-Dropdown, setzt aber standardmäßig weiterhin px, deshalb ist das hier klasse und spart auf Dauer jede Menge Zeit. Zuletzt aktualisiert wurde sie im August 2026, sie wird also offenbar noch gepflegt.

Funktionen

• px in rem umrechnen und den Wert auf rem setzen.
• SVG-HTML-Einbettungscode aus dem Asset-Panel kopieren.
• CLS-Probleme in Google PageSpeed optimieren, indem du die Inline-Bildhöhe mit einem Klick setzt.
• Alt-Text aus dem Dateinamen des Bildes im Asset-Panel hinzufügen (steht nicht in der aktuellen Store-Beschreibung, prüfe also, ob es noch da ist).
• KI für Alt-Texte bei Bildern nutzen (steht ebenfalls nicht in der aktuellen Store-Beschreibung).
• Class Name Helper, damit du Klassen schneller benennst.
• Auch in EM umrechnen und die Desktop-Breite beibehalten, wenn du zurückwechselst (beides neu im aktuellen Store-Eintrag).

Potato für Webflow im Chrome Web Store hinzufügen

Flowbase Chrome Extension

Flowbase bringt eine weitere Komponentenbibliothek mit und einige andere Werkzeuge, ähnlich dem, was Finsweet beim Neuordnen usw. macht. Dazu kommen eine umfangreiche SVG-Bibliothek und ein Importer für Figma-Farbfelder. Der aktuelle Store-Eintrag spricht von mehr als 3.500 Komponenten, Tausenden SVG-Icons und einem Wireframe-System, erwähnt den Farbfeld-Importer aber nicht mehr. Prüfe ihn also, bevor du dich darauf verlässt.

Funktionen

• Komponentenbibliothek (mehr als 3.500 Komponenten laut aktuellem Eintrag)
• SVG-Bibliothek
• Wireframe-System
• Figma-Color-Webflow-Importer
• Einige weitere praktische Werkzeuge

Flowbase im Chrome Web Store hinzufügen

Modkit für Webflow

Update, September 2026: Modkit ist nicht mehr verfügbar. Die Seite im Chrome Web Store ist leer, und Extpose verzeichnet die Erweiterung als am 15. September 2025 entfernt, such also nicht mehr nach dem Installationslink. Wir haben die Beschreibung als Dokumentation dessen stehen lassen, was Modkit konnte. AidKit (weiter unten) hat eine aktive Breakpoint-Anzeige, falls dir die Warnung fehlt.

Die Erweiterung von Jetboost sollte vor allem den Alltag ein wenig angenehmer machen, etwa mit einer Warnung, dass du womöglich am falschen Breakpoint bearbeitest, damit du nicht zum Desktop zurückwechseln und alles noch einmal machen musst. Sie hat dich auch darauf hingewiesen, dass das Element, an dem du arbeitest, mehr als ein Element betrifft. Das ist super, wenn du eine Arbeit von jemand anderem übernimmst und nicht immer genau weißt, was gemacht wurde und wo. Besonders gefallen hat uns, dass sie dir einen deutlich größeren Code-Editor gegeben hat. 

Funktionen

• Code-Editor maximieren
• Breadcrumbs an den oberen Rand des Designers verschieben
• Warnungen bei mehreren betroffenen Elementen
• Warnungen beim Bearbeiten an einem Nicht-Desktop-Breakpoint

Modkit im Chrome Web Store hinzufügen (nicht mehr verfügbar, daher kein Link)

Webflow Collection Reorder

Diese Erweiterung macht genau das, was der Name sagt: Sie ordnet Collection-Listenelemente im Designer neu an. Lege in der Collection einfach ein Zahlenfeld mit dem exakten Namen „Sort Order“ an, klick auf der Collection-Seite auf den neuen Sort-Button und ordne die CMS-Elemente per Drag-and-drop neu an. Die neue Reihenfolge wird in diesem Feld gespeichert, achte also darauf, dass deine Collection-Liste nach Sort Order sortiert ist. Beachte nur, dass sie zuletzt im Januar 2023 aktualisiert wurde.
Wir wollen nichts vortäuschen: Wir haben diese Erweiterung nicht getestet, sie könnte aber Zeit sparen, gerade für deine Kunden.

Webflow Collection Reorder im Chrome Web Store hinzufügen

Webflow Checker

Es gibt viele Erweiterungen, die dir verraten, auf welchem Tech-Stack eine Website läuft. Diese hier hält es einfach: Du willst wissen, ob die Seite in Webflow gebaut wurde, ja oder nein, mehr steckt nicht dahinter. Das Icon bleibt grau und wird auf Webflow-Seiten blau mit einem grünen Häkchen.

Webflow Checker im Chrome Web Store hinzufügen

AidKit für Webflow

AidKit ist eine weitere Erweiterung für mehr Komfort in Webflow. Sie zeigt zum Beispiel Zeichenzähler in deinen Meta-Eingabefeldern an und gibt an, ob die Texte ihrer Meinung nach zu lang oder zu kurz sind. Ein nettes kleines Helferlein.

Funktionen

• Zeichenzähler in Texteingaben ergänzen
• ‘Status’ von Meta-Beschreibungen hinzufügen
• Länge der Meta-Beschreibung auf 160 Zeichen begrenzen
• Anzeige des aktiven Breakpoints, damit du merkst, wenn du nicht am Basis-Breakpoint arbeitest
• Rückgängig- und Wiederholen-Buttons dort, wo Webflow sie früher hatte

AidKit im Chrome Web Store hinzufügen

Und das ist, wie man so schön sagt, das Wichtigste zu den besten Webflow-Erweiterungen für Chrome. Wir haben so lange im Netz gesucht, wie wir konnten, um die besten zu finden, und es gibt noch andere, zum Beispiel CopyCat, aber einige davon sind im Grunde eigene Produkte, die nur eine Erweiterung nutzen, um etwas in Webflow hinein- oder herauszubekommen. Falls wir aber etwas übersehen haben, das du nutzt, schreib uns in die Kommentare einen Namen und einen Link, dann nehmen wir es in die Liste auf. Noch besser: Erzähl uns, warum du es liebst und wie es dir geholfen hat, zum Webflow-Profi zu werden. 

Und noch eine Randbemerkung: Wir nutzen selbst gar kein Chrome, sondern sind auf Arc umgestiegen. Es basiert allerdings auf Chromium und kann all diese Erweiterungen ausführen, wenn man sie einfach im Chrome Web Store hinzufügt. Über Arc haben wir vor einer Weile schon geschrieben, und du kannst das hier nachlesen.

Update, September 2026: Arc befindet sich seit Mai 2025 im Wartungsmodus, das heißt Sicherheitsupdates, aber keine neuen Funktionen, und The Browser Company hat sich Dia zugewandt (Atlassian hat das Unternehmen Ende 2025 übernommen). Arc führt weiterhin alle diese Erweiterungen aus, überleg dir aber gut, ob du umsteigen willst.

Webflow-Chrome-Erweiterungen: kurze Antworten

Was ist die beste Webflow-Chrome-Erweiterung?

Die eine gibt es nicht, es kommt auf die Aufgabe an. Den meisten würden wir Relume für Komponenten und Class Sync empfehlen, Potato für px zu REM und die Finsweet-Extension-App für Klassenordner und Aufräumarbeiten. AidKit ist ein schönes Extra für die Länge von Meta-Beschreibungen.

Funktioniert die Finsweet-Chrome-Erweiterung noch?

Ja, aber sie ist abgespeckt. Finsweet sagt, die meisten Funktionen seien jetzt in der nativen Webflow-App, und in der Chrome-Erweiterung blieben nur die Site-Einstellungen.

Wie prüfe ich, ob eine Website mit Webflow gebaut wurde?

Installiere die Erweiterung Webflow Checker. Ihr Icon ist auf den meisten Seiten grau und wird blau mit einem grünen Häkchen, wenn die Seite in Webflow gebaut wurde.

Kann ich diese Erweiterungen in einem anderen Browser als Chrome nutzen?

Ja, sofern er auf Chromium basiert. Wir nutzen sie in Arc und fügen sie über den Chrome Web Store hinzu, mehr dazu weiter oben.