L'article est long car il présente toutes les fonctionnalités de KrISS pin bookmarklet, mais n'hésitez pas à descendre tout en bas pour utiliser directement ce bookmarklet et découvrir ses fonctionnalités :-)

L'objectif du bookmarklet :

Je ne sais pas si vous utilisez les bookmarklets Aardvark, Click2Zap, Html Clipper, lunettes à rayons X, MyPage, Xray mais si tel est le cas, je vous propose KrISS pin pour remplacer tout ça !

Il n'est pas aussi sexy que lunettes à rayons X mais il est plus complet et permet de manipuler une page web relativement facilement (récupérer ou supprimer des infos sur la page, modifier le code html ou css, etc.).

J'ai fait ce bookmarklet il y a déjà quelque temps quand j'avais besoin de fonctionnalités que ne proposait pas MyPage. (C'était le bookmarklet que j'utilisais pour modifier une page avant son impression). Je voulais récupérer le code source d'une page pour pouvoir le copier coller dans un unique fichier html pour en faire une sorte de sauvegarde (sans css externe : utilisation du style dans les éléments html, sans image : utilisation de base64).

Finalement, j'ai ajouté des fonctionnalités au fur et à mesure lorsque je me suis aperçu qu'il ne restait pas beaucoup de lettres de disponible. Aussi, avant de vous le présenter, j'ai cherché à le compléter pour associer à chaque lettre une fonctionnalité (parfois gadget : 'A', 'Q').

Présentation des fonctionnalités du bookmarklet :

Quand vous lancez le bookmarklet, un menu se glisse à droite de la page. Il suffit de passer dessus pour le faire apparaître, sinon vous pouvez appuyer 'F1' pour les boulets qui ne le trouvent pas (je ne vise bien sûr personne en particulier... n'est-ce pas...)

Ensuite, il suffit de sélectionner les éléments de la page en cliquant dessus (un cadre bleu entoure alors ces éléments)
Les flèches directionnelles :
- permettent de se déplacer dans l'arbre DOM, 'T' pour sélectionner l'élément en cours
About :
- affiche juste des infos inutiles sur KrISS pin bookmarklet
Body tree :
- affiche l'arbre des balises html
CSS edit :
- permet l'édition (en live) du style du dernier élément sélectionné (il faut générer le style d'un élément avant avec la lettre 'G')
Deselect all :
- déselectionner tous les éléments sélectionnés
Export :
- TODO (dans l'idéal permettra d'exporter le lien et le code html pour une sauvegarde)
First child selection :
- se déplacer vers le premier enfant (dans les listes (ul ou ol) par exemple)
Generate style for selected :
- utilise 'getPropertyValue' pour associer le style aux éléments html (attention car génère beaucoup de code CSS inutile)
Html edit last selected :
- permet d'éditer le code html du dernier élément sélectionné (ne permet pas d'éditer body et certains élements comme td, tr, il faut sélectionner table à la place)
Isolated selected :
- permet d'isoler les éléments sélectionnés (génère le style, les images en base64 si 'O' avant et supprime l'arborescence parent) : attention l'ordre de sélection est pris en compte
Javascript information :
- quelques informations sur les scripts javascript de la page
Keep selected :
- permet de conserver les éléments sélectionnés (sans générer le style, mais en conservant l'arborescence parent)
Last child selection :
- se déplace vers le dernier enfant (dans les listes (ul ou ol) par exemple)
Margin auto on last selected :
- un bug firefox ? quand le style margin est auto, il est perdu avec 'getPropertyValue'. Il suffit alors de sélectionner les éléments qui posent problèmes et d'appuyer sur 'M'
None display for selected :
- permet de supprimer les éléments de l'affichage, mais il reste dans l'arbre DOM (permet la gestion de l'historique de suppression grâce à la touche 'U')
On/Off image base64 :
- pour firefox permet de générer le code base64 des images de la page (attention les images doivent être héberger sur le même site, sécurité javascript oblige). Ne considère pas encore les images en background.
Put in order :
- permet d'ordonner des éléments sur une page : plus de détails sur la page de Fred
Quit KrISS pin :
- permet de quitter KrISS pin (Esc aussi)
Remove selected or none :
- si des éléments sont sélectionnés, ils sont supprimés du DOM (pas de retour possible). S'il n'y a pas d'élément sélectionné, les éléments effacés avec 'N' sont supprimés du DOM (plus d'historique possible)
Style information :
- quelques informations sur le style de la page
Toggle selection current over :
- permet de sélectionner ou déselectionner l'élément actif
Undo none display :
- permet de gérer l'historique des éléments supprimés avec 'N'
View code :
- permet de voir le code à inclure dans une page html pour reproduire la page désirée (n'affiche pas le code html de la page, mais des éléments conservés)
Widen last selected :
- permet de sélectionner l'élément parent du dernier élément sélectionné, après body, déselectionne l'élément
Xray :
- affiche des informations de style du dernier élément sélectionné comme le bookmarklet Xray
Your browser :
- affiche des informations sur votre navigateur
Zoom :
- permet de zoomer le dernier élément sélectionné


Comment ajouter un bookmarklet ?

Chromium :
- glisser le bookmarklet dans votre barre de favoris
ou
- afficher la barre de favoris
- clic droit sur le bookmarklet -> Copier l'adresse du lien
- clic droit sur la barre de favoris -> Ajouter une page
- coller l'adresse du lien
Firefox :
- glisser le bookmarklet dans votre barre personnelle
ou
- clic droit sur le bookmarklet -> Marque-page sur ce lien
Opéra :
- clic droit sur le bookmarklet -> Signet vers le lien...

Problèmes avec KrISS pin bookmarklet :

- attention, le code généré n'a pas pour but d'être optimal (le style CSS associé à chaque élément peut être très long et redondant, les images en base64 sont gourmandes en ko)
Chromium :
- la conversion des images en base64 ne fonctionne pas (touche 'O')
Firefox :
- le style margin est mal généré quand auto (la touche 'M' permet de corriger ça)
Opera :
- la sélection des éléments bogue un peu car Opera ne supporte pas pointer-events
- la conversion des images en base64 ne fonctionne pas (touche 'O')
- la génération et l'édition du style ne fonctionnent pas (touche 'G')
- le zoom ne fonctionne pas (touche 'Z')

Pour finir :

- les lettres 'A', 'M', 'Q', 'Z' ne sont pas indispensables, 'F' et 'L' ?
- je me suis basé sur MyPage que j'utilisais et l'édition utilise innerHTML qui contraint fortement les éléments qu'il est possible d'éditer (voir 'H'). Cela ne m'a pas encore gêné, à voir si le besoin s'en fait ressentir d'utiliser autre chose, comme le chemin dans l'arbre DOM par exemple.
- si vous avez d'autres propositions pour améliorer les fonctionnalités, ou si je n'ai pas été suffisamment clair dans les explications, n'hésitez pas !

Quelques utilisations bien pratiques avec KrISS pin :

- imprimer le strict nécessaire ('K', 'I', 'R' ou 'N' puis Ctrl+'P')
- avoir des infos sur les éléments d'une page ('B', 'J', 'S', 'X')
- récupérer, modifier le contenu d'un élément ('H')
- récupérer, modifier le style d'un élément ('G', 'C')
- récupérer le code base64 d'une image ('O', 'I', 'V')
- avoir les infos de son browser ('Y')
- sauvegarder une page pour la rendre indépendante ('I', 'V')



KrISS pin
('F1' pour afficher le menu ou survol '?' à droite)