Crop - Chrome-Erweiterung zum präzisen Auswählen und Erfassen von Webseiten-Elementen

Hallo. Ich möchte euch Crop vorstellen, eine Chrome-Erweiterung zum präzisen Erfassen gewünschter Bereiche auf Webseiten.

Crop blendet ein Overlay über der aktuell angezeigten Seite ein und ermöglicht es, DOM-Elemente per Mauszeiger auszuwählen oder direkt einen Bereich aufzuziehen, um ihn als PNG zu kopieren oder zu speichern.

Ich fand den Ablauf zum exakten Auswählen von Elementen in der Screenshot-Funktion von Firefox sehr praktisch und habe deshalb damit angefangen, etwas Ähnliches auch in Chrome nutzbar zu machen.

Hauptfunktionen

DOM-Elemente per Mouse Hover hervorheben
Elemente per Klick auswählen
Benutzerdefinierte Bereiche per Drag auswählen
Auswahlbereich verschieben und in der Größe ändern
Aktuellen Viewport erfassen
Ganze Seite erfassen
Scroll-Erfassung für Auswahlbereiche, die über den Viewport hinausgehen
PNG in die Zwischenablage kopieren oder als Datei speichern

Berechtigungen und Datenschutz

Da es sich um eine Browser-Erweiterung handelt, können Berechtigungen ein sensibles Thema sein, daher wollte ich diesen Teil so weit wie möglich minimieren.

Aktuell werden ungefähr die folgenden Berechtigungen verwendet.

activeTab: nur vorübergehender Zugriff auf den aktuellen Tab, in dem der Nutzer die Erweiterung ausführt
scripting: Einfügen des Overlay-Skripts in den aktuellen Tab
clipboardWrite: Kopieren des erzeugten PNG in die Zwischenablage
downloads: Speichern des erzeugten PNG

Breite Berechtigungen wie debugger oder <all_urls> werden nicht angefordert.

Screenshots werden lokal im Browser verarbeitet. Weder Screenshots noch Seitendaten werden auf einen Server hochgeladen, und es ist auch keine Telemetrie integriert. Bilder verlassen den Browser nur dann als Zwischenablageinhalt oder Download-Datei, wenn der Nutzer auf Copy oder Save klickt.

Aktuelle Einschränkungen

Wegen der Einschränkungen von Chrome-Erweiterungen gibt es in den folgenden Fällen Begrenzungen.

Auf eingeschränkten Seiten wie chrome://-Seiten oder dem Chrome Web Store funktioniert die Erweiterung nicht.
Innerhalb von Cross-Origin-iframes ist die Elementauswahl eingeschränkt, da das Content Script dort keine Inspektion durchführen kann.
Auch auf das Innere eines geschlossenen Shadow DOM kann nicht zugegriffen werden.
Die Erfassung ganzer Seiten arbeitet derzeit auf Basis des Top-Level-Dokuments.
Bei sehr großen Seiten kann das PNG wegen Browser-Canvas-Limits herunterskaliert werden.
Auf Seiten mit viel Lazy Loading, Animationen oder Sticky Headern/Footern ist das Ergebnis des Full-Page-Stitchings möglicherweise nicht perfekt.

Zur Implementierung

Es wurde auf Basis von Chrome Manifest V3 entwickelt.

Auf der Seite wird ein Content Script injiziert, und in einem Shadow-DOM-basierten Overlay werden Auswahl-, Resize- und Capture-Abläufe verarbeitet. Ganze Seiten oder Bereiche außerhalb des Viewports werden durch die Kombination von chrome.tabs.captureVisibleTab() und Scroll-Stitching erfasst.

Einige Codebestandteile, die sich an Firefox Screenshots orientieren bzw. daraus übernommen wurden, behalten den MPL-2.0-Hinweis bei; der neu geschriebene Projektcode ist zur Veröffentlichung unter der MIT-Lizenz vorbereitet. Es handelt sich nicht um ein offiziell mit Mozilla/Firefox verbundenes oder von ihnen unterstütztes Projekt.

Links

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

Ich würde mich freuen, wenn Leute, die häufig Webseiten-Screenshots machen, es ausprobieren und Feedback zu Unannehmlichkeiten oder Ideen für Verbesserungen hinterlassen würden, etwa bei Dokumentation, Bug Reports oder UI-Reviews.