Votre navigateur regorge de fonctionnalités avancées que vous n’utilisez jamais.

Parmi elles, il y a les bookmarklet.

Ce que les bookmarklets permettent et ce qu’ils ne permettent pas

Ils permettent de modifier le contenu de la page affichée par votre navigateur.

Les bookmarklets ne permettent pas de :

  • conserver durablement les modifications apportées à la page (si la page est rafraîchie, la version originale de la page sera affichée)
  • modifier l’ensemble des pages d’un site (seule la page affichée est concernée, changer de page perdra toutes les modifications)
  • modifier une page sur le serveur (tout se passe dans votre navigateur et uniquement votre navigateur, vous serez le seul à constater les modifications)

Écrire des bookmarklets

Il est tout à fait possible d’écrire des bookmarklets en disposant uniquement d’un navigateur. Aucun outil supplémentaire n’est nécessaire puisque tout se trouve déjà sur Internet :

Un premier exemple avec Wikipédia

Nous allons prendre la page Wikipédia sur le hackerspace comme base pour notre premier exemple.

Sous Firefox (mais cela fonctionne aussi sous Chrome), en appuyant sur la touche F12 lors de l’affichage de la page de Wikipédia, la fenêtre accueille en bas de page une zone avec l’inspecteur. L’inspecteur permet de voir comment Firefox interprète la structure de la page affichée.

Capture_d_ecran_de_2017-04-03_22_52_28.png

On peut voir (encadré bleu) qu’une page de contenu Wikipédia est composée de 5 blocs :

  • mw-page-base, l’espace du haut
  • mw-head-base, l’espace du haut
  • content, le contenu principal
  • mw-navigation, les liens de navigations (colonne de gauche et en-tête)
  • footer, le pied de page

Nous allons développer un script JavaScript qui va supprimer tous les blocs à l’exception du bloc principal :

document.getElementById("mw-page-base").outerHTML='';
document.getElementById("mw-head-base").outerHTML='';
document.getElementById("mw-navigation").outerHTML='';
document.getElementById("footer").outerHTML='';

L’instruction document.getElementById permet de récupérer le nœud. La propriété outerHTML permet de supprimer le nœud.

Maintenant que le code est écrit, il faut utiliser Bookmarklet Creator with Script Includer pour générer le bookmarklet comme suit :

Capture_d_ecran_de_2017-04-03_23_20_45.png

Il ne vous reste plus qu’à glisser-déposer le bouton « this link » dans votre barre de favoris (ou barre personnelle qu’il vous faudra peut-être activer car elle n’est pas toujours afficher).

Rendez-vous sur la page Wikipédia et cliquez sur le lien nouvellement créé, et voilà !

Capture_d_ecran_de_2017-04-03_23_27_04.png

Et ensuite…

À partir de maintenant, il est possible d’écrire des programmes plus évolués comme des programmes utilisant la bibliothèque jQuery ou ouvrant de nouvelles fenêtres etc.

Note : Internet Explorer peut poser des problèmes si vous générez des bookmarklets trop lourds (>5000 caractères).

Commentaires

1. Le samedi 16 juin 2018, 06:22 par intelliboost-iq.com

I needed to thank you for this wonderful read!! I certainly loved every
bit of it. I have you book marked to look at new stuff you post?

2. Le dimanche 8 juillet 2018, 06:18 par http://markets.pettinga.Com/Pettinga/News/read/36225181

Whats up very cool site!! Guy .. Beautiful .. Amazin ..
I will bookmark your blog and take tthe feeds additionally?
I'm happy to search out numerous helpful info right here in the submit, we want work out more techhniques on this regard, thank youu for sharing.

. . . . .

3. Le vendredi 13 juillet 2018, 01:57 par Lightning Cable for iPhone iPod 

Oxygen-free, long-crystal can be employed to make sure that
the very best audio quality is produced. One effective way to transfer HD interface in one HD source to another HD device is by using
a HDMI splitter cable. RCA cables are quite common, but some manufacturers are starting to phase them in favour of other options.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

La discussion continue ailleurs

URL de rétrolien : https://www.ventresmous.fr/trackback/983

Fil des commentaires de ce billet