So funktioniert Screenshot PDF: Von der langen Webseite zur durchgehenden Aufnahme

Ein ganzseitiger Screenshot ist kein Foto eines gesamten Dokuments, das in einem Moment aufgenommen wurde. Ein Browser stellt normalerweise nur die Pixel innerhalb des aktuellen Ansichtsfensters zur Verfügung. Das Erfassen einer langen Seite erfordert daher eine kontrollierte Reihenfolge: Identifizieren Sie, was scrollt, messen Sie es, bewegen Sie sich darin, erfassen Sie sichtbare Slices und fügen Sie diese Slices zusammen, ohne die Quellseite stillschweigend zu ändern.

Dieser Artikel dokumentiert die aktuelle Screenshot-PDF-Erweiterungspipeline in der Version 0.0.13. Es basiert auf dem mitgelieferten Capture- und Editor-Code, nicht auf einem idealisierten Diagramm. Die unten stehenden Grenzen sind wichtig, weil eine reproduzierbare Einschränkung nützlicher ist als das Versprechen, dass jede Seite perfekt erfasst werden kann.

1. Die Erweiterung startet mit der aktiven Registerkarte

Screenshot-PDF verwendet eine Manifest V3 Chrome-Erweiterung und die aktive Browser-Registerkarte. Interne Chrome-Seiten wie chrome://settings und der Chrome Web Store werden vom Browser eingeschränkt und vor Beginn der Erfassung abgelehnt. Gewöhnliche öffentliche Seiten, authentifizierte Seiten, die für den Benutzer sichtbar sind, und viele Anwendungsbildschirme können erfasst werden, da die Erweiterung innerhalb der aktuellen Sitzung des Benutzers funktioniert.

Dieser Zugriff bedeutet nicht, dass jede eingebettete Oberfläche verfügbar ist. Für Cross-Origin-Frames, geschützte Videos, WebGL, virtualisierte Listen und außerhalb des normalen Seitenflusses gezeichnete Inhalte kann dennoch eine andere Exportmethode erforderlich sein. Chrome dokumentiert den zugrunde liegenden Vorgang des sichtbaren Tabs in seiner API tabs.captureVisibleTab.

2. Den echten Scroll-Container finden

Nicht jede Site scrollt im Dokumenttext. Dashboards platzieren den scrollbaren Bereich häufig innerhalb eines div, während die äußere Seite fest bleibt. Die Erweiterung überprüft zunächst die üblichen Scrollelemente für Dokumente. Wenn keiner die Anforderungen erfüllt, werden gängige Inhaltscontainer untersucht und ein sichtbares Element mit vertikalem Überlauf und der größten nutzbaren Fläche ausgewählt.

Diese Wahl ist folgenreich. Wenn Sie das falsche Element messen, bleibt das Bild nach einem Bildschirm stehen, obwohl der Benutzer mehr Inhalt sehen kann. Eine praktische Diagnose besteht darin, die Bildlaufleiste, die der Benutzer bewegt, mit dem Element zu vergleichen, dessen scrollHeight sich in DevTools ändert. Die Erweiterung trifft diese Auswahl automatisch, aber verschachtelte oder horizontal scrollende Anwendungen benötigen möglicherweise trotzdem eine abschnittsweise Erfassung.

3. Messen vor dem Umzug

Die Erfassungsnutzlast zeichnet Seitenbreite, Seitenhöhe, Ansichtsfensterbreite, Ansichtsfensterhöhe und Gerätepixelverhältnis auf. CSS-Pixel beschreiben das Seitenlayout; Aufgenommene PNG-Pixel können auf einem Display mit hoher DPI-Zahl dichter sein. Der Editor leitet später das intrinsische Pixelverhältnis aus dem ersten erfassten Slice ab, sodass CSS-Koordinaten und Bildkoordinaten ausgerichtet bleiben.

Der aktuelle Ganzseiten-Workflow legt eine explizite Obergrenze bei 15.000 CSS-Pixeln Höhe pro Lauf fest. Die Grenze verhindert, dass ein unbegrenzter Feed unbegrenzt Speicher verbraucht. Wenn eine Seite länger ist, erfassen Sie benannte Abschnitte mit sichtbarer Überlappung oder verwenden Sie einen offiziellen Export vom Quelldienst. Beschreiben Sie ein Ergebnis außerhalb dieser Grenze nicht als vollständig.

4. Erfassen Sie jeweils ein Ansichtsfenster

Die Erweiterung bewegt sich in Schritten in der Höhe des Ansichtsfensters über die Seite. Nach jedem angeforderten Bildlauf wird die tatsächliche Bildlaufposition gelesen, anstatt davon auszugehen, dass die Seite genau wie angefordert verschoben wurde. Dies schützt den letzten Abschnitt, in dem der Browser möglicherweise die Bildlaufposition unten festklemmt.

Das Inhaltsskript wartet zwei Animationsbilder und dann etwa 300 Millisekunden nach dem Verschieben. Der Hintergrundworkflow fügt eine weitere kurze Pause zwischen den Slices hinzu. Diese Wartezeiten geben normalen Layouts Zeit, sich zu beruhigen, sie sind jedoch keine Garantie dafür, dass jedes verzögerte Bild, jede Animation oder jede Netzwerkanfrage abgeschlossen wurde. Scrollen Sie bei medienintensiven Seiten einmal manuell durch die Seite und warten Sie, bis die Platzhalter aufgelöst sind, bevor Sie mit der Erfassung beginnen.

Chrome kann die Erfassung sichtbarer Tabs vorübergehend drosseln. Wenn der Fehler mit dem Capture-Rate-Limit von Chrome übereinstimmt, versucht Screenshot PDF bis zu dreimal mit einer Verzögerung von einer Sekunde erneut. Andere Fehler werden gemeldet, anstatt ausgeblendet zu werden. Durch diese Unterscheidung wird vermieden, dass ein anhaltendes Berechtigungs- oder Rendering-Problem zu einer langen stillen Schleife wird.

5. Umgang mit schwebenden Schnittstellenelementen

Sticky-Header, Cookie-Steuerelemente, Chat-Starter und schwebende Symbolleisten werden an das Ansichtsfenster angehängt und nicht an einer einzelnen Stelle im Dokument. Wenn sie bei jedem Schnitt sichtbar bleiben, erscheinen sie im zusammengefügten Bild wiederholt. Screenshot-PDF zeichnet schwebende Kandidaten auf, behält sie im ersten Segment und verbirgt sie vor späteren Segmenten, indem die Sichtbarkeit geändert wird, anstatt die Layoutposition neu zu schreiben.

Die Sichtbarkeit wird nach Erfolg und auch innerhalb des Fehlerpfads wiederhergestellt. Die Seite wird wieder nach oben verschoben, die Schnittstelle zum Erfassungsfortschritt wird entfernt und das Erweiterungskennzeichen wird gelöscht. Diese Bereinigung ist Teil der Korrektheit: Ein Tool sollte die Quellseite nicht optisch verändert hinterlassen, wenn eine Erfassung fehlschlägt.

6. Slices an den Editor übergeben

Jede Scheibe trägt ihre tatsächliche vertikale Position. Der Editor lädt alle PNG-Slices, erstellt eine weiße Leinwand und zeichnet sie an Positionen, die aus CSS-Koordinaten, dem intrinsischen Gerätepixelverhältnis und einem beliebigen speichergesteuerten Skalierungsfaktor abgeleitet werden. Die nutzbare Höhe endet beim zuletzt erfassten Ansichtsfenster, anstatt automatisch auf eine frühere Seitenmessung zu vertrauen, die sich möglicherweise geändert hat.

Diese Stitching-Methode eignet sich gut für stabile, vertikal scrollende Layouts. Es können keine Inhalte rekonstruiert werden, die nie in einem einzelnen Bildlaufzustand existierten. Virtualisierte Tabellen können frühere Zeilen entladen, wenn neue Zeilen erscheinen. Live-Dashboards können Werte zwischen Slices ändern; Automatisch rotierende Komponenten können unterschiedliche Frames anzeigen. Verwenden Sie in diesen Fällen kleinere Abschnitte oder einen quellennativen Export.

7. Ein reproduzierbarer Erfassungsdatensatz

Für ein gewöhnliches persönliches Dokument kann eine visuelle Überprüfung ausreichend sein. Für Belege, Recherchen, Entwurfsprüfungen oder Aufzeichnungen notieren Sie Folgendes:

• öffentliche URL oder eine nicht vertrauliche Beschreibung der authentifizierten Seite;
• Chrome- und Erweiterungsversionen;
• Größe des Ansichtsfensters, Zoom und Pixelverhältnis des Geräts;
• geplanter Start- und Endpunkt; – ob der Inhalt erweitert oder vorgescrollt wurde;
• ob die Seite 15.000 CSS-Pixel überschreitet;
• alle fehlenden Rahmen, eingebetteten Oberflächen oder lebendigen Werte.

Screenshot-PDF enthält eine öffentliche reproduzierbare Aufnahmevorrichtung mit einem Sticky-Header, fester Steuerung, verzögertem Inhalt, einer Tabelle, abwechselnden Hintergründen und einem endgültigen Endpunkt. Verwenden Sie es, um ein allgemeines Erfassungsproblem von einem standortspezifischen Layoutproblem zu unterscheiden.

Was die Pipeline nicht beweist

Ein visuell vollständiger Screenshot ist kein Beweis für Authentizität, rechtliche Zulässigkeit oder eine unveränderte Quelle. Es zeichnet gerenderte Pixel einer Browsersitzung auf. Halten Sie die Quell-URL, die Zugriffszeit und den relevanten Kontext getrennt. Wenn der Quelldienst einen signierten Kontoauszug, einen strukturierten Export, eine Rechnung oder ein digitalisiertes PDF anbietet, bewahren Sie diese stärkere Quelle neben dem Screenshot auf.

Die aktuelle Pipeline ist bewusst begrenzt: Messen, an tatsächlichen Positionen erfassen, nur bekannte Drosselung wiederholen, Seite wiederherstellen, lokal zusammenstellen und den Benutzer auffordern, die Ausgabe zu überprüfen. Diese Grenzen machen eine lange Seitenerfassung verständlich und wiederholbar.