Unsere Chrome-Erweiterung wird zum Aufnahmestudio

Die erste Version der Erweiterung hatte genau einen Zweck: Sie ließ uns eine Seite hinter deiner Anmeldung filmen, mit deiner eigenen Browsersitzung. Nützlich, aber eng. Heute wird daraus ein vollständiges Aufnahmepanel, übernommen aus der Aufnahme-Erweiterung von drurls.com, unserem Schwesterprodukt, mit allen Funktionen.

Öffne es neben einem beliebigen Tab, und du bekommst:

• Einen Screencast-Rekorder mit gestaltetem Cursor, Punkt, Ring oder Spotlight in deiner Farbe, mit Klickwellen und weicher Nachführung.
• Ganzseitige Screenshots, beim Scrollen zusammengesetzt, und eine Elementauswahl, die die Aufnahme auf ein einzelnes Element zuschneidet und sein genaues Styling behält.
• Ein Marken-Kit: die Farben der Seite, gewichtet nach ihrer Fläche, ihre Schriften, Eckenradien, Button-Stile und das Logo.
• Eine Abkürzung zu einem neuen Film, die /new mit der Adresse des Tabs und einem bereits ausgefüllten Kreativ-Briefing öffnet.

Eine Aufnahme nützt nur, wenn du sie später findest. Jede geht jetzt in deine PageToVid-Mediathek: Screenshots als Bilder, Screencasts umgewandelt in ein Standard-MP4, das überall läuft, Marken-Kits als wiederverwendbare Daten.

Wir haben auch geändert, was die Mediathek zuerst zeigt. Sie öffnete sich bisher auf dem geteilten Tab, während eine neue Aufnahme privat bleibt, bis du sie teilst. Deine eigenen Medien sind jetzt die Standardansicht, also siehst du die gerade gemachte Aufnahme als Erstes.

Erweiterung, Mediathek und Editor verhalten sich jetzt wie ein einziger Ort: In Chrome aufnehmen, PageToVid öffnen, und die Bilder sind da.

Wir wollten, dass jede Aufnahme ankommt, jedes Mal, und dafür mussten wir verstehen, wie ein Browser eine Erweiterung behandelt.

Deine PageToVid-Anmeldung lebt in einem Cookie, der durch eine Regel namens SameSite geschützt ist. Der Browser schickt ihn nur mit Anfragen, die von unserer eigenen Seite kommen, oder wenn du direkt zu uns navigierst. Das ist ein guter Schutz mit einer leicht übersehenen Folge: Für den Browser ist eine Chrome-Erweiterung eine andere Seite, egal welche Berechtigungen sie hat. Ihre Anfragen tragen deine Anmeldung nicht von selbst.

Also trägt die Erweiterung sie jetzt ausdrücklich. Sie liest deine Sitzung über die Erweiterungswerkzeuge des Browsers und schickt sie mit jeder Anfrage auf dem üblichen Weg in einem Header. Auf unserer Seite versteht die Anmeldebibliothek, die wir ohnehin nutzen, diesen Header so selbstverständlich wie den Cookie und prüft ihn genau gleich. Keine neue Art von Zugangsdaten, kein neues Geheimnis: eine kleine Hilfsfunktion, userFromRequest, die die Routen für Aufnahmen, Sites und Anmeldung teilen.

Unsere Server stehen hinter einem Load Balancer, der die sichere Verbindung übernimmt, sodass die Anwendung selbst gewöhnlichen internen Verkehr sieht. Wie die Anmeldebibliothek eine Sitzung liest, hängt davon ab, ob die Verbindung sicher ist, und der interne Zwischenschritt kann einen sicheren Aufruf anders aussehen lassen.

Statt zu raten, probiert der Server jetzt einfach beide Arten, die Sitzung zu lesen. Das kostet fast nichts, scheitert nie laut und hängt von keinem Detail der Weiterleitung ab.

Geprüft haben wir es von Anfang bis Ende, so wie die Erweiterung wirklich arbeitet: eine echte Sitzung erzeugen, damit von außen eine Aufnahme senden und bestätigen, dass sie in der richtigen Mediathek landet. Eine Sitzung aus anderer Quelle wird abgelehnt, wie es sein soll.

Da die Erweiterung jetzt die Mediathek füllt, haben wir die Navigation der Seite aufgeräumt. Der Kopfbereich für angemeldete Konten zeigte sieben Links nebeneinander, das war zu viel. Jetzt sind es die fünf, die du täglich brauchst: Dashboard, Sites, Editor, Mediathek und Animationen. Preise und Ressourcen sind ins Kontomenü gewandert, und die Knöpfe für Design und Sprache bilden eine eigene Gruppe.

Das Ergebnis ist ein einfacher Kreislauf: Du entdeckst etwas im Browser, nimmst es im Seitenpanel auf und findest es einen Klick entfernt, wenn du deinen nächsten Film baust. Die Erweiterung hat eine eigene Seite, PageToVid für Chrome, mit allem, was sie kann.