Crop - une extension Chrome pour capturer précisément des éléments de page web

Bonjour. Je voudrais vous présenter Crop, une extension Chrome conçue pour capturer avec précision la partie souhaitée d’une page web.

Crop affiche un overlay au-dessus de la page en cours de consultation, puis permet de pointer et sélectionner un élément DOM avec la souris, ou de faire glisser directement une zone, afin de la copier ou l’enregistrer en PNG.

J’ai trouvé très pratique le flux de sélection précise d’éléments dans la fonctionnalité de capture d’écran de Firefox, et j’ai commencé ce projet parce que je voulais pouvoir utiliser une approche similaire dans Chrome.

Fonctionnalités principales

mise en surbrillance des éléments DOM au survol de la souris
sélection d’un élément par clic
sélection d’une zone personnalisée par glisser-déposer
déplacement et redimensionnement de la zone sélectionnée
capture du viewport actuel
capture de la page entière
capture avec défilement pour une zone sélectionnée qui se prolonge hors du viewport
copie du PNG dans le presse-papiers ou enregistrement dans un fichier

Autorisations et vie privée

Comme il s’agit d’une extension de navigateur, les autorisations peuvent susciter des inquiétudes, donc j’ai essayé de les réduire au maximum.

À l’heure actuelle, les autorisations utilisées sont à peu près les suivantes.

activeTab : accès temporaire uniquement à l’onglet actuel dans lequel l’utilisateur exécute l’extension
scripting : injection du script d’overlay dans l’onglet actuel
clipboardWrite : copie du PNG généré dans le presse-papiers
downloads : enregistrement du PNG généré

Aucune autorisation étendue comme debugger ou <all_urls> n’est demandée.

Les captures d’écran sont traitées localement dans le navigateur. Aucune capture ni donnée de page n’est envoyée vers un serveur, et aucune télémétrie n’a été ajoutée. Les images ne quittent le navigateur vers le presse-papiers ou les téléchargements que lorsque l’utilisateur clique sur Copy ou Save.

Limites actuelles

En raison des contraintes des extensions Chrome, les cas ci-dessous ont des limitations.

L’extension ne fonctionne pas sur les pages restreintes comme chrome:// ou le Chrome Web Store.
L’intérieur des iframes cross-origin ne peut pas être inspecté par le content script, ce qui limite la sélection d’éléments.
L’accès à l’intérieur d’un closed shadow DOM n’est pas possible non plus.
La capture de page entière fonctionne actuellement sur la base du document top-level.
Sur les très grandes pages, le PNG peut être réduit à cause des limites du canvas du navigateur.
Sur les pages avec beaucoup de lazy loading, d’animations ou de sticky header/footer, le résultat du stitch full-page peut ne pas être parfait.

À propos de l’implémentation

Le projet est basé sur Chrome Manifest V3.

Un content script est injecté au-dessus de la page, et un overlay basé sur Shadow DOM gère le flux de sélection, redimensionnement et capture. Pour la page entière ou les zones hors viewport, la capture combine chrome.tabs.captureVisibleTab() et du scroll stitching.

Une partie du code inspirée ou reprise de Firefox Screenshots conserve la mention MPL-2.0, et le code du projet écrit spécifiquement pour ce projet a été préparé pour une distribution sous licence MIT. Il ne s’agit pas d’un projet officiellement affilié à Mozilla/Firefox ni approuvé par eux.

Liens

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

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

Si vous capturez souvent des pages web pour rédiger de la documentation, signaler des bugs ou faire des revues d’interface, je vous serais reconnaissant d’essayer l’outil et de partager les points gênants ou vos idées d’amélioration.