Catégorie : Google Chrome

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 :


chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.captureVisibleTab(tab.windowId, {"format": "png"}, function(img) {
window.open(img);
});
});

view raw

gistfile1.js

hosted with ❤ by GitHub

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.
Publicité

Google Chrome – Découverte accidentelle du jour : Visualisation de tableaux

Les meilleures découvertes sont souvent les celles que l’on attend le moins. En général, les outils qu’on utilise au quotidien font le travail qu’on exige et on passe peu de temps à tenter d’explorer des fonctionnalités cachées.

Google Chrome m’a réservé une belle surprise lorsque je travaillais sur un livrable client nécessitant beaucoup de développement HTML et Javascript. Qui dit HTML et Javascript, dit beaucoup de temps passé dans l’inspecteur d’éléments de son navigateur. Après tout, l’essentiel de l’interaction se passe là.

Dans le cas qui m’intéresse, j’étais à investiguer sur la structure de la liste d’éléments d’une liste de résultats de recherche à afficher. Il s’agissait d’une liste assez volumineuse d’éléments à manipuler, trier et filtrer.

La surprise est arrivée lorsque j’ai voulu consulter l’état actuel de la totalité de la liste des éléments. Comme à l’habitude, j’ai tapé la commande jQuery qui me permet d’afficher les résultats et puis là j’ai eu devant moi quelque chose de similaire à ceci :

L’inspecteur de Google Chrome regroupe par tranche les éléments d’un tableau ayant un grand volume d’éléments. Intéressant n’est-ce pas?

Si cela vous dit, pour avoir le senti de cette fonctionnalité, vous devez procéder de la façon suivante :

  1. Visitez Stackoverflow
  2. Invoquez la console de l’inspecteur Chrome avec le raccourci clavier : Control-Shift-J ou ⇧⌘C pour les utilisateurs Mac.
  3. Tapez la commande jQuery suivante : $(‘a’)

Il semblerait que cette fonctionnalité est présente depuis très longtemps dans Chrome. Je fais cette déduction parce que je n’ai pas été en mesure de retrouver un article de blogue ou une documentation au sujet de celle-ci. Si ce n’est pas documenté, c’est que ça doit être évident au point qu’il ne vaut pas la peine d’en parler?

Google Chrome – Récupérer l’URL des onglets de la fenêtre courante

Lorsque je travaille sur un article, je passe beaucoup de temps à faire de la recherche sur mon sujet. Sans exagérer, il y a des fois où je peux avoir près d’une vingtaine d’onglets d’ouvert pour une seule fenêtre dédiée au sujet que je recherche.

En général, une fois que je suis satisfait de ma recherche, je vais procéder au classement de ceux-ci dans un article dédié à ce sujet. Le processus est relativement long car cela ne se fait pas nécessairement le jour même. Pour chaque lien, je vais copier/coller l’URL dans l’article et revoir ce que je peux y extraire.

Comme le dis le proverbe : La nécessité est mère de l’invention. C’est à ce moment que je me suis demandé s’il y avait une façon d’y extraire l’URL et de les rassembler sous un seul document que je peux rapatrier dans mon article?

J’ai tenté l’expérience avec Google Chrome et il s’avère que cela est possible en passant par une extension!

Première étape – Création de l’extension de base

Avant de procéder à la création de l’extension, ma plus grosse appréhension était que l’opération allait être compliquée puisqu’il fallait interagir avec le navigateur directement.

Il s’agit du genre de faits que j’aurais dû valider bien avant. Il s’avère que la création d’une extension pour Google Chrome est très facile.

Dans mon cas, j’ai eu recours du guide d’introduction documenté par Google permettant la création d’un canevas de base.

Ce guide permet d’avoir une extension qui est visible dans la barre d’extensions à droite de la barre d’URL dans le haut du navigateur. Au clic sur l’icône, l’information qui est programmée est visible.

Deuxième étape – Développement du plugin

Comme je disais précédemment, mon but de pouvoir rassembler l’URL de tous mes onglets ouverts de la fenêtre courante dans le même document.

La seule modification que j’ai eu à faire au canevas initial a été d’ajuster le code Javascript dans le fichier popup.js.

Sommairement, ce code récupère de l’appel à la fonction chrome.tabs.query() une liste, sous la forme d’un tableau, des onglets.

Par la suite, il suffit de les parcourir dans une boucle pour ainsi récupérer leur URL. C’est ainsi que je popule la liste à puce finale.

Résultat final

Au final, le résultat n’est peut-être pas très beau mais c’est fonctionnel. Le but est atteint.

De cette façon, je peux maintenant regrouper, d’un seul clic, les liens que j’ai récupéré pour mes recherches.