:-y

KrISS pin bookmarklet

lundi 15 octobre 2012 - 17:57

[Edit : 16/03/2018 : KrISS pin -> KrISS html]
L'article est long car il présente toutes les fonctionnalités de KrISS html 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 html 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 html :
- permet de quitter KrISS html (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 html 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 html :
- 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 html
('F1' pour afficher le menu ou survol '?' à droite)


Edit (2013-03-02) : 'P'ut in order pour remplacer 'P'rint via Fred pour essayer une démo

Comments

1 - @ - Nico admin

Salut

Dsl mais ça a pas l'air de marcher sur firefox 19.0.
Il est donc dans la barre perso avec comme adresse le javascript mais pas d'action au clic :)
Je pense pas avoir fait une mauvaise manip puisque je me sert d'autres bookmarklet comme celui de shaarli, ou font-friend: http://code.google.com/p/font-friend/
Sinon bien le bonjour!

2 - @ - Tontof

@Nico admin : C'est bon, ça devrait être corrigé maintenant, le bookmarklet est de nouveau fonctionnel. Merci pour l'info. Il faut que tu supprimes l'ancien bookmarklet de ta barre perso et que tu le remettes.

3 - @ - Nico admin

^^C'est ok maintenant. Merci à toi..

4 - @ - Monstrinfo

Bonjour, et merci pour votre appli tres utile.
Je suis en train de la tester.
-en utilisant le Standalone bookmarklets "Youtube":
http://tontof.net/kriss/dwld/#sec-2
cela fonctionne tres bien, j'ai le choix entre les differntes qualite d'image, et enregistrer ou regarder avec la visionneuse par defaut (VLC pour moi).
Par contre, cela ne récupère pas automatiquement le nom du fichier, comme le fait par exemple download helper (bien plus lourd;;;)
-lorsque j'essaie d'utiliser le KrISS dwld de cette page:
http://tontof.net/kriss/dwld/#sec-2
Je le drag and drop sur ma barre de marque-pages.
mais lorsque je lance une video, et que je clique dessus, rien ne se passe (enfin si, dans la barre d'etat de firefox, il y a l'indication du lancement du code javascript, mais rIen d'autre se passe.)
Est ce ma version de firefox (version 31) qui est en cause?
En tous cas merci, je garde l'appli en plus de download helper.
bon developpement!
et merci!

5 - @ - Tontof

Je pense que tu voulais donner le lien http://tontof.net/kriss/dwld/#sec-1 pour KrISS dwld ?

En tout cas je pense simplement que le problème vient du certificat de sécurité. Quand tu es sur une page https de youtube, le bookmarklet va chercher la page sur https://tontof.net

Essaye d'y aller dessus et tu vas avoir une demande d'acceptation de certificat qui n'apparaît pas quand tu utilises le bookmarklet. Si tu l'acceptes tu devrais pouvoir te servir du bookmarklet sans problème par la suite.

En ce qui concerne le nom de la vidéo, je ne pense pas qu'il est possible de le faire simplement avec javascript. J'avais essayé sans succès. Je n'ai pas eu le temps de regarder depuis.
New comment







 ___  __   __            
  |  /  \ /  \ |  | |    
  |  | _  |    |__| |    
  |  |  | |    |  | |    
\_/  \__/ \__/ |  | |___