Demos für Browser-Erweiterungen aufnehmen, die zur Installation überzeugen

Browser-Erweiterungen sind schwer zu demonstrieren. Das ganze Produkt lebt in einem 300 Pixel breiten Popup, einem 16 Pixel kleinen Symbol in der Symbolleiste und in ein paar Änderungen an einer Seite, die jemand anderes gebaut hat. Es gibt kein App-Fenster zum Vorzeigen, keinen Startbildschirm, kein Dashboard. Trotzdem ist die Demo oft das Einzige, was zwischen einem neugierigen Besucher und der Installation steht.

Die gute Nachricht: Die Einschränkungen sind vorhersehbar. Wenn du weißt, wo Erweiterungs-Demos üblicherweise scheitern, kann schon eine kurze Aufnahme erstaunlich überzeugend sein.

Warum Erweiterungs-Demos anders sind

Die meisten Tipps zur Screen-Aufnahme gehen davon aus, dass dein Produkt das Fenster besitzt. Eine Erweiterung tut das nicht. Das ändert vier Dinge:

• Deine UI ist winzig: Popups, Badges und Kontextmenüs machen nur einen Bruchteil des Bildes aus, im Standardbildausschnitt sind sie unsichtbar
• Die Host-Seite ist die Bühne: Zuschauer müssen die Website erkennen, die du verbesserst, bevor sie die Verbesserung sehen können
• Der Wert ist die Differenz: Du zeigst kein Feature, du zeigst eine Seite, die besser geworden ist
• Die Installation ist Teil des Produkts: Berechtigungsdialoge und das Anpinnen sind das Erste, was neue Nutzer erleben — und hier entsteht echter Absprung

Plane die Aufnahme um diese vier Punkte, der Rest ist normales Handwerk.

Zuerst ein sauberes Demo-Profil anlegen

Nimm eine Erweiterungs-Demo nie im Alltagsbrowser auf. Lege ein eigenes Profil an und nutze es ausschließlich für Aufnahmen.

• Symbolleiste leeren: Jedes andere Erweiterungssymbol konkurriert mit deinem. Alle entfernen oder ausblenden
• Nur deine Erweiterung anpinnen: Ein einzelnes Symbol in einer ansonsten leeren Leiste ist unverwechselbar
• Aus privaten Konten abmelden: Avatare, Namen und E-Mail-Adressen erscheinen in überraschend vielen Frames
• Lesezeichen und Lesezeichenleiste aufräumen: Oder durch neutrale, demotaugliche ersetzen
• Neue-Tab-Seite zurücksetzen: Standardseiten zeigen den Browserverlauf gern als Vorschaubilder
• Unnötige Benachrichtigungen ausschalten: Im Browser und im Betriebssystem
• Sinnvollen Zoom einstellen: 100 % Seitenzoom und eine Fenstergröße, die zu deinem Exportformat passt

Einmal einrichten, dann das Profil speichern. Jede weitere Aufnahme startet aus demselben sauberen Zustand — und deine Videos wirken als Serie konsistent.

Den richtigen Aufnahmemodus wählen

Es gibt drei sinnvolle Optionen, die Wahl hängt davon ab, ob die Browser-Oberfläche wichtig ist.

• Fensteraufnahme: Der Standard für Erweiterungs-Demos. Die Symbolleiste ist sichtbar, und dort leben Symbol und Badge. Außerdem bleiben Desktop und Dock verborgen
• Bereichsaufnahme: Gut für einen engen Ausschnitt aus Popup plus betroffenem Seitenbereich. Praktisch für kurze Social-Clips, schneidet aber die Symbolleiste ab — der Bezug zum Ort deiner UI geht verloren
• Vollbild: Nur wenn du etwas außerhalb des Browsers zeigen musst: einen Systemdialog, eine Betriebssystem-Berechtigung oder eine zweite App

Für die meisten Demos nimmst du das Browserfenster in einer Größe nahe 16:9 auf und machst Nahaufnahmen später per Zoom im Editor, statt mitten im Video den Aufnahmemodus zu wechseln.

Den Installationsablauf ehrlich zeigen

Es ist verlockend, die Installation zu überspringen und direkt zur laufenden Erweiterung zu springen. Mach in mindestens einem Video das Gegenteil. Neue Nutzer sorgen sich um Berechtigungen, und jemandem dabei zuzusehen, wie er den Dialog gelassen bestätigt, beruhigt.

• Beim Store-Eintrag oder deinem Installationsbutton beginnen: Genau der Weg, den echte Nutzer gehen
• Den Berechtigungsdialog nicht verstecken: Zeige ihn und erkläre in einem Satz, warum die Berechtigung nötig ist. „Sie braucht Zugriff auf diese Seite, weil sie die Preise darauf ausliest” beantwortet die Frage, bevor sie zum Zweifel wird
• Das Anpinnen zeigen: Viele installieren eine Erweiterung und finden sie danach nicht. Zehn Sekunden Anpinnen ersparen viele Supportanfragen
• Frisches Profil verwenden, damit der Ablauf echt ist: Eine bereits erteilte Berechtigung überspringt den Dialog stillschweigend und macht dein Video irreführend

Wenn du zusätzlich einen kurzen Feature-Clip willst, schneide ihn separat aus derselben Aufnahme, statt den vollständigen Durchlauf zu verwässern.

Winzige UI lesbar machen

Hier werden Erweiterungs-Demos gewonnen oder verloren. Dein Popup ist auf deinem Monitor klein und auf dem Handy mikroskopisch.

• Bei jedem Popup zoomen: Ein Zoom auf das Popup, solange es offen ist, ist der wertvollste einzelne Schnitt in einem Erweiterungsvideo
• Auf das Symbol zoomen, wenn sich der Badge ändert: Eine Zahl, die von 0 auf 12 springt, ist sinnlos, wenn sie niemand lesen kann
• Den Cursor hervorheben: Klicks auf ein 16-Pixel-Symbol sind sonst unsichtbar. Cursor-Highlights und Klickeffekte zeigen genau, wo die Interaktion passiert ist
• Nach dem Öffnen stillhalten: Gib dem Popup eine ganze Sekunde, bevor du die Maus bewegst. Bewegung auf kleiner UI wird nach der Kompression zu Unschärfe
• Text-Overlays für Labels, die du nicht vergrößern kannst: Eine kurze Einblendung schlägt das Entziffern von 10-Pixel-Schrift
• Nicht auf Hover-Tooltips verlassen: Sie sind klein, langsam und oft gar nicht in der Aufnahme sichtbar. Sag das Label stattdessen laut

Als Vorher-Nachher aufbauen

Erweiterungen verbessern ein bestehendes Erlebnis, also beginne mit dem Schmerz.

1. Zeige die Seite ohne Erweiterung für fünf bis zehn Sekunden: die Handarbeit, die fehlende Information, den mühsamen Schritt
2. Schalte die Erweiterung sichtbar ein oder klicke ihr Symbol an
3. Zeige dieselbe Seite verwandelt, möglichst im selben Bildausschnitt, damit der Unterschied ins Auge springt
4. Erledige eine realistische Aufgabe von Anfang bis Ende mit dem Feature
5. Schließe mit dem Installationsweg und dem Ort der Einstellungen

Den Bildausschnitt zwischen Schritt 1 und 3 identisch zu halten, nimmt dir viel Arbeit ab: Das Auge vergleicht beide Frames direkt, statt sich zu erinnern, wie die Seite vor einer Minute aussah.

Aufnahme- und Exporteinstellungen

• 30 fps genügen für Seiteninteraktionen und Popup-UI; Text bleibt scharf, Dateien klein
• In nativer Auflösung aufnehmen und im Editor zuschneiden oder zoomen, statt klein aufzunehmen und hochzuskalieren
• Fenstergröße fixieren: Größenänderungen während der Aufnahme lassen die Seite umfließen und ruinieren deine Zoom-Keyframes
• Systemaudio aufnehmen, wenn die Erweiterung Töne macht, sonst nur Mikrofon
• Für das Web in 1080p exportieren und die besten 20 Sekunden zusätzlich vertikal zuschneiden

Checkliste vor der Aufnahme

[ ] Demo-Browserprofil aktiv, andere Erweiterungen ausgeblendet
[ ] Nur deine Erweiterung ist angepinnt
[ ] Aus privaten Konten abgemeldet, Neue-Tab-Seite aufgeräumt
[ ] Demodaten auf der Host-Seite vorbereitet
[ ] Seitenzoom 100 %, Fenster im Exportverhältnis
[ ] Berechtigungen noch nicht erteilt, falls du die Installation zeigst
[ ] Benachrichtigungen aus, Badges geleert
[ ] Zehn-Sekunden-Testaufnahme in Handygröße geprüft

Häufige Fehler

• Demo in einem Browser mit fünfzehn anderen Erweiterungen: Niemand erkennt, welches Symbol deines ist
• Nie zoomen: Der häufigste Grund, warum Erweiterungsvideos scheitern
• Den Berechtigungsdialog herausschneiden: Das wirkt, als würdest du etwas verbergen
• Ein echtes, eingeloggtes Konto verwenden: Private Daten landen in Frames, die du nie genau kontrollierst
• Das Popup erklären, während die Maus wandert: Erst das eine, dann das andere
• Den Kontext der Host-Seite vergessen: Zuschauer müssen wissen, welche Seite das ist, bevor die Änderung sie interessiert

Fazit

Eine Erweiterungs-Demo muss in unter zwei Minuten zwei Dinge leisten: zeigen, dass die Installation sicher und einfach ist, und ein kleines Stück UI bedeutend erscheinen lassen. Das Erste erledigt ein sauberes Profil. Das Zweite erledigen Zoom-Effekte, Cursor-Highlights und ein knapper Vorher-Nachher-Aufbau. Nimm das Browserfenster auf, halte es ruhig, zoome auf jedes Popup — und lass die verwandelte Seite für dich argumentieren.