Fonctionnement de Screenshot PDF : d'une longue page Web à une capture continue
Une capture d’écran pleine page n’est pas une photographie d’un document entier prise en un instant. Un navigateur expose normalement uniquement les pixels à l'intérieur de la fenêtre actuelle. Capturer une longue page nécessite donc une séquence contrôlée : identifier ce qui défile, le mesurer, s'y déplacer, capturer les tranches visibles et assembler ces tranches sans changer silencieusement la page source.
Cet article documente le pipeline d'extension PDF de capture d'écran actuel dans la version 0.0.13. Il est basé sur le code de capture et d'édition fourni, et non sur un diagramme idéalisé. Les limites ci-dessous sont importantes car une limitation reproductible est plus utile qu'une promesse que chaque page peut être parfaitement capturée.
1. L'extension commence par l'onglet actif
La capture d'écran PDF utilise une extension Chrome Manifest V3 et l'onglet de navigateur actif. Les pages internes de Chrome telles que chrome://settings et le Chrome Web Store sont restreintes par le navigateur et sont rejetées avant le début de la capture. Les pages publiques ordinaires, les pages authentifiées visibles par l'utilisateur et de nombreux écrans d'application peuvent être capturés car l'extension fonctionne dans la session actuelle de l'utilisateur.
Cet accès ne signifie pas que toutes les surfaces intégrées sont disponibles. Les images d'origine croisée, les vidéos protégées, WebGL, les listes virtualisées et le contenu dessiné en dehors du flux normal des pages peuvent toujours nécessiter une méthode d'exportation différente. Chrome documente l'opération d'onglet visible sous-jacente dans son API tabs.captureVisibleTab.
2. Trouver le véritable conteneur de défilement
Tous les sites ne font pas défiler le corps du document. Les tableaux de bord placent fréquemment la zone de défilement à l'intérieur d'un div, tandis que la page extérieure reste fixe. L'extension vérifie d'abord les éléments habituels de défilement du document. Si aucun n'est qualifié, il examine les conteneurs de contenu communs et sélectionne un élément visible avec un débordement vertical et la plus grande zone utile.
Ce choix est conséquent. Mesurer le mauvais élément produit une image qui s'arrête après un écran même si l'utilisateur peut voir plus de contenu. Un diagnostic pratique consiste à comparer la barre de défilement déplacée par l'utilisateur avec l'élément dont scrollHeight change dans DevTools. L'extension fait ce choix automatiquement, mais les applications imbriquées ou à défilement horizontal peuvent toujours nécessiter une capture sectionnelle.
3. Mesurer avant de déménager
La charge utile de capture enregistre la largeur de la page, la hauteur de la page, la largeur de la fenêtre d'affichage, la hauteur de la fenêtre d'affichage et le rapport en pixels de l'appareil. Les pixels CSS décrivent la mise en page ; Les pixels PNG capturés peuvent être plus denses sur un écran haute résolution. L'éditeur dérive ensuite le rapport de pixels intrinsèque de la première tranche capturée afin que les coordonnées CSS et les coordonnées de l'image restent alignées.
Le flux de travail pleine page actuel place une limite supérieure explicite à 15 000 pixels CSS de hauteur par exécution. La limite empêche un flux illimité de consommer de la mémoire indéfiniment. Si une page est plus longue, capturez les sections nommées avec un chevauchement visible ou utilisez une exportation officielle à partir du service source. Ne décrivez pas un résultat au-delà de cette limite comme étant complet.
4. Capturer une fenêtre à la fois
L'extension se déplace dans la page par étapes de hauteur de fenêtre. Après chaque défilement demandé, il lit la position réelle du défilement plutôt que de supposer que la page s'est déplacée exactement comme demandé. Cela protège la tranche finale, où le navigateur peut bloquer la position de défilement en bas.
Le script de contenu attend deux images d'animation, puis environ 300 millisecondes après le déplacement. Le flux de travail en arrière-plan ajoute une autre courte pause entre les tranches. Ces attentes donnent aux mises en page ordinaires le temps de s'installer, mais elles ne garantissent pas que chaque image, animation ou requête réseau paresseuse soit terminée. Pour les pages riches en médias, faites défiler la page une fois manuellement et attendez que les espaces réservés soient résolus avant de démarrer la capture.
Chrome peut temporairement limiter la capture des onglets visibles. Lorsque l'erreur correspond à la limite de taux de capture de Chrome, Screenshot PDF réessaye jusqu'à trois fois avec un délai d'une seconde. D'autres erreurs sont signalées au lieu d'être masquées. Cette distinction évite de transformer un problème persistant d’autorisation ou de rendu en une longue boucle silencieuse.
5. Gestion des éléments d'interface flottants
Les en-têtes collants, les contrôles de cookies, les lanceurs de discussion et les barres d'outils flottantes sont attachés à la fenêtre plutôt qu'à un seul endroit dans le document. S'ils restent visibles à chaque tranche, ils apparaissent de manière répétée dans l'image assemblée. La capture d'écran PDF enregistre les candidats flottants, les conserve dans la première tranche et les masque des tranches ultérieures en modifiant la visibilité plutôt qu'en réécrivant la position de la disposition.
La visibilité est restaurée après le succès et également à l'intérieur du chemin d'échec. La page revient en haut, l'interface de progression de la capture est supprimée et le badge d'extension est effacé. Ce nettoyage fait partie de la correction : un outil ne doit pas laisser la page source visuellement altérée lorsqu'une capture échoue.
6. Passer des tranches à l'éditeur
Chaque tranche porte sa position verticale réelle. L'éditeur charge toutes les tranches PNG, crée un canevas blanc et les dessine à des positions dérivées des coordonnées CSS, du rapport de pixels intrinsèque de l'appareil et de tout facteur d'échelle piloté par la mémoire. La hauteur utile se termine à la dernière fenêtre capturée plutôt que de faire automatiquement confiance à une mesure de page antérieure qui aurait pu changer.
Cette méthode d’assemblage fonctionne bien pour les mises en page stables à défilement vertical. Il ne peut pas reconstruire un contenu qui n’a jamais existé dans un seul état de défilement. Les tables virtualisées peuvent décharger les lignes précédentes à mesure que de nouvelles lignes apparaissent ; les tableaux de bord en direct peuvent modifier les valeurs entre les tranches ; les composants à rotation automatique peuvent afficher des cadres différents. Dans ces cas-là, utilisez des sections plus petites ou une exportation source native.
7. Un enregistrement de capture reproductible
Pour un document personnel ordinaire, une revue visuelle peut suffire. Pour les preuves à l’appui, la recherche, la révision de la conception ou les travaux d’enregistrement, enregistrez :
- URL publique ou une description non sensible de la page authentifiée ;
- Versions Chrome et extensions ;
- taille de la fenêtre d'affichage, zoom et rapport de pixels de l'appareil ;
- le début et le point final prévus ;
- si le contenu a été développé ou pré-défilé ;
- si la page dépassait 15 000 pixels CSS ;
- tout cadre manquant, surface intégrée ou valeur dynamique.
Screenshot PDF comprend une page de test de capture reproductible publique avec un en-tête persistant, un contrôle fixe, du contenu chargé à la demande, un tableau, des arrière-plans alternés et un repère final. Utilisez-la pour distinguer un problème général de capture d'un problème propre à la mise en page d'un site.
Ce que le pipeline ne prouve pas
Une capture d'écran visuellement complète ne prouve pas l'authenticité, la recevabilité légale ou une source non modifiée. Il enregistre les pixels rendus à partir d'une session de navigateur. Conservez séparément l’URL source, l’heure d’accès et le contexte pertinent. Lorsque le service source propose une déclaration signée, une exportation structurée, une facture ou un PDF né numérique, conservez cette source plus solide à côté de la capture d'écran.
Le pipeline actuel est délibérément limité : mesurez, capturez à des positions réelles, réessayez uniquement la limitation connue, restaurez la page, assemblez localement et demandez à l'utilisateur d'inspecter la sortie. Ces limites sont ce qui rend une capture de longue page compréhensible et reproductible.