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 :
- 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.
- Appeller la fonction captureVisibleTab de la façon suivante :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| chrome.browserAction.onClicked.addListener(function(tab) { | |
| chrome.tabs.captureVisibleTab(tab.windowId, {"format": "png"}, function(img) { | |
| window.open(img); | |
| }); | |
| }); |
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.
French Coding 
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? :)