Catégorie : Extensions

Faites attention aux extensions Google Chrome que vous installez!

Développeurs web, lorsque vous installez une extension Google Chrome, inspectez-vous son contenu pour y voir ce qu’elle contient?

intenta

En guise de mise en contexte, mon équipe utilise la fonctionnalité de tableau agile fournie avec l’application Jira. Afin de présenter l’avancement des tâches à tous, le tableau du sprint courant est affiché sur un écran visible à tous. En temps normal, lorsqu’il est utilisé, ce tableau se met à jour automatiquement lorsqu’un changement est effectué par un utilisateur.

La limitation de cette mise à jour du tableau est qu’elle est effectuée si la fenêtre courante possède le focus de la souris. Sinon, le JavaScript ne sera jamais exécuté. Cela n’est pas très pratique lorsqu’on est en mode kiosque et que le seul accès à la machine en question est par un accès à distance.

La solution facile à ceci est d’opter pour une extension Google Chrome (ou Firefox, si c’est votre style) afin que la page se rafraîchisse à intervalle régulier. En plus, c’est simple installer une extension Google Chrome. En moins de six clics, et quelques recherches par mots clés, ça y est.

À ce moment-là, j’avais opté pour l’extension Page Refresh. Les commentaires étaient bons, le look était correct. J’ai installé.

pixel

Après quelques jours, j’ai eu à me connecter sur l’ordinateur central. Par un pur hasard (en fait, non. J’ai appuyé sur F12 au lieu de F11 pour sortir du mode plein écran), j’ai remarqué qu’il y avait une quantité phénoménale d’erreurs dans la console d’erreurs des outils de développement. Le proxy internet avait bloqué les requêtes à un domaine nommé pixel.intenta.io.

Par déduction, j’ai relié ces requêtes à l’extension Google Chrome que je venais d’installer. C’était facile à déduire. Il s’agissait de la seule extension installée sur ce navigateur. Avec grande curiosité, avant de désinstaller l’extension, j’ai été confirmer mes suspicions en allant inspecter le code source HTML et JavaScript de l’extension.

Ayant développé un peu d’extensions Google Chrome 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 repaires pour faire mon enquête.

Pour faire simple, il y a deux endroits à visiter pour inspecter une extension Google Chrome.

  1. La présentation de l’extension (la partie visible de celle-ci): Accédez à l’icône de votre extension. Faites un clic droit sur celle-ci et allez au menu « Inspecter le pop-up ». À ce moment, vous aurez accès aux outils de développement et vous pourrez consulter la source pour la présentation.
  2. Le backend: Accédez au menu d’extensions et activez le mode développeur. Trouvez votre extension dans la liste et cliquez sur le lien HTML à côté du libellé « Examiner les vues ». Vous aurez accès au JavaScript qui alimente votre extension. Habituellement, vous trouverez à cet endroit l’accès aux données ou la persistance de session à cet endroit.

Dans le cas de Page Refresh, le cas était situé au niveau du backend de l’extension. Il s’agit de la prise d’écran présentée en introduction à ce billet. Le commun des mortels ne l’aurait jamais trouvé. Alors, à chaque fois que l’extension est activée pour effectuer un rafraîchissement de page, elle envoie un appel à pixel.intenta.io avec un token (probablement qui est utilisé pour m’identifier) et l’URL que j’ai visitée.

Tout cela à mon insu. Pas cool. Vraiment pas cool.

Ce que j'aurais bien réservé au développeur de l'extension.
Ce que j’aurais bien réservé au développeur de l’extension.

En conclusion, cette petite aventure est un rappel que le web n’est pas une boîte noire. Si vous connaissez un peu le développement web, vous avez les outils nécessaires pour faire vos propres investigations sur ce que vous installez sur votre navigateur web.

Cela vaut autant pour Firefox que pour Google Chrome. Les deux navigateurs supportent les extensions sous la forme d’applications HTML/JavaScript.

Une petite exception est à noter pour l’inclusion de Google Analytics dans certaines extensions. Google Analytics est parfois utilisé pour faire le suivi des interactions dans l’extension en tant que tel. Cependant, une inspection serrée du code source HTML serait à faire si vous ne faites pas entièrement confiance à l’auteur. Il est facile d’ajouter des variables de suivi supplémentaires à Google Analytics.

Publicité

Les liens de la semaine – Édition #151

Développement

.NET

Web

Technologie

Science et autres

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.