Premier article d’une série sur les extensions et bookmarklets. Aujourd’hui, présentation et quelques exemples.

Introduction

Tout le monde connaît les extensions que l’on peut installer sur son navigateur.

Popularisées grâce aux premières versions de firefox, elles permettent d’ajouter des fonctionnalités à son navigateur, ou bien (au départ grâce à greasemonkey pour firefox, nativement pour chrome et firefox maintenant) permettre de modifier directement la vision que l’on a de certains sites.

Mais avez-vous déjà croisé un bookmarklet? Ce sont de petits codes que l’on place dans la barre de favoris du navigateur (généralement par copier coller), et qui, au lieu d’ouvrir une autre fenêtre, modifie la page actuel. Comme exemple, vous pourrez par exemple trouver Css Refresh, qui permet de recharger une page dès que son Css est modifié sans avoir à faire F5. Ils sont, en définitive, des sortes de mini-extensions navigateurs, plus simple à installer, et au fonctionnement un peu plus limitéė.

Ces deux technologies sont très proche, par les possibilités mais aussi par la construction : Leur langage principal est le javascript, agrémenté de html et css.

Exemples

Voilà quelques exemples de bookmarklets.

Readability

Cette petite extension permet de nettoyer son écran, pour n’en garder que le contenu, et avoir un meilleur confort de lecture.

disponible en bookmarklet et en extension sur leur site.

 

PDF download

Connaissez vous pdf download ? Ce site permet de récupérer une version pdf d’un site web. Ce petit bookmarklet simplifie l’opération, en ouvrant directement les champs du site pdfdownloader préremplis avec le site actuel.

Download as PDF

Et comme on ne se refait pas, voilà les quelques uns que j’utilise au quotidien pour m’aider dans mon travail.

Pendule

Pendule est une extension pour chrome qui permet d’avoir beaucoup d’informations sur le css, les formulaires et autres des pages web. Très pratique en collaboration avec l’inspection d’éléments de chrome.

L’installer ici

Spry Media

Voilà un petit bookmarklet sympatique qui permet d’afficher des grilles ou mesurer une distance entre deux points sur un site web. Plus pratique que d’avancer à tatons.

Spry Media

XRay

XRay permet de connaitre le type, l’arbre de node et la taille d’un élément rien qu’en cliquant dessus. Un peu doublons avec l’outil d’inspection d’élément, mais pratique quand l’on surf sur un navigateur ne le proposant pas.

XRAY

Test Selector

Test selector fait un peu le travail inverse de test selector: Donnez lui une requête de selection CSS (par exemple « p nav.menu a »), et il mettra en avant tout les éléments qui correspondent à cette requête.

Test Selectors

Le mot de la fin

Voilà pour aujourd’hui. Ne manquez pas le prochain article qui proposera un tutoriel sur comment créer un bookmarklet!