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.
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.
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.
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.
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.
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!
Recevez nos articles par e-mail
Comme + de 11.000 personnes recevez nos articles et ressources .directement par e-mail.
