Chrome – Comment prendre une copie d’écran

Google Chrome est un navigateur web reconnu pour sa rapidité d’exécution, son côté novateur et sa fiabilité. Ces trois caratéristiques en font, à mon humble avis, le meilleur navigateur web actuellement disponible sur le marché.

Il y a un aspect que l’on néglige dans beaucoup de cas. Les possibilités au niveau de l’extensibilité du navigateur grâce à son API de développement. Le navigateur opère sur un API complet permettant d’interagir directement avec l’utilisateur et sa page web.

Je me suis arrêté aujourd’hui à démystifier le concept de capture d’écran à partir du navigateur. À une époque ancienne, il n’est était pas possible de prendre une copie d’écran d’une page web sans avoir recours à un logiciel tiers.

Cette époque est maintenant révolue car il est possible de procéder à une capture d’écran directement à partir de l’API offert par Google Chrome.

chrome.tabs.captureVisibleTab

La fonction chrome.tabs.captureVisibleTab permet, sur papier, de prendre en image le contenu de l’onglet courant de la fenêtre active de Chrome.

Il y a deux paramètres pouvant être spécifié ainsi qu’un fonction de callback à spécifier obligatoirement.

  • windowId : Optionnel. Permettant de spécifier l’identifiant de la fenêtre à viser.
  • options : Inclusion de deux sous paramètres : quality (int) et format (jpeg ou png).

Son utilisation est assez simple et à sens unique. Voici la recette que j’ai utilisé pour y arriver :

  1. Utiliser un fichier manifest.json similaire à celui-ci.
    • Il est important garder le manifest_version à 2. Sinon l’extension ne fonctionnera plus. De plus, la permission à <all_urls> doit rester.
  2. Appeller la fonction captureVisibleTab de la façon suivante :

Pour le reste, la magie va s’opérer par elle-même. Un nouvel onglet sera ouvert avec la copie d’écran en question. Cela se fera grâce au mécanisme du Data URI Scheme. L’image est encodée en format Base64 et sera interprété par le navigateur comme un fichier lire.

Il y aurai été aussi possible d’envoyer cette même image encodée à un service tiers qui aurait enregistré l’image sur un serveur pour un traitement quelconque.

Conclusion

Cette approche est intéressante et très simple. Toutefois, il faut connaître certaines des limitations de celle-ci.

  • Il ne sera pas possible de commander par l’API l’enregistrement de l’image au niveau client. C’est à dire que le maximum qui peut être fait c’est d’ouvrir l’image dans un onglet et laisser le restant de l’opération à compléter au client.
  • Il est seulement possible de prendre une copie d’écran du contenu de l’onglet et non de l’entièreté de la fenêtre.
Advertisements

4 avis sur « Chrome – Comment prendre une copie d’écran »

  1. ami44 dit :

    Pour les captures écran, utilise http://casperjs.org !

    • En fait, CasperJS utilise l’engin Javascript Webkit « Headless ». Au bout du compte, cela revient bien à la même chose.

      Le gros avantage de CasperJS est qu’il peut être utilisé avec plusieurs navigateurs. Toutefois, ce n’était pas le but de cet article. On s’entend? :)

  2. […] je suis un utilisateur de Google Chrome. En fait, je l’ai ouvertement mentionné à plusieurs reprises ici même. J’ai toujours dit, le navigateur web doit être le premier outil qu’un […]

  3. […] pour différents projets personnels (Récupérer l’URL des onglets de la fenêtre courante, Comment prendre une copie d’écran et l’extension pour suivre votre consommation internet Vidéotron), j’avais déjà mes […]

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment ce contenu :