Comment rendre les modifications d'éléments d'inspection permanentes dans votre navigateur avec Tampermonkey

La fonctionnalité Inspecter les éléments de votre navigateur Web est un outil de développement qui vous permet de modifier les aspects front-end d'un site Web, notamment HTML, CSS et JavaScript, et d'apporter des modifications temporaires. Vous pouvez également faire bien plus avec Inspect Element. Cependant, toutes les modifications sont perdues après une actualisation.

Mais parfois, vous souhaiterez peut-être conserver les modifications pendant une période prolongée ou ajouter des fonctionnalités supplémentaires pour améliorer l'expérience utilisateur. Une façon de rendre les modifications d’Inspect Element permanentes consiste à utiliser l’extension Tampermonkey. Il vous permet d'ajouter des scripts personnalisés sur des pages Web, rendant les modifications permanentes sur votre ordinateur local.

Voyons comment utiliser Tampermonkey pour rendre les modifications des éléments d'inspection permanentes sur votre navigateur local.

Qu’est-ce que Tampermonkey et comment l’installer ?

Tampermonkey, un gestionnaire de scripts utilisateur, est une extension de navigateur populaire disponible pour tous les principaux navigateurs Web, notamment Chrome, Edge, Opera Next et Firefox. Il vous permet de créer et d'exécuter des scripts utilisateur personnalisés et existants pour modifier les pages Web afin de les corriger ou de les améliorer.

transfert d'un lecteur google à un autre

Il propose également une bibliothèque de scripts utilisateur créée par d'autres utilisateurs de Tampermonkey. Par exemple, vous pouvez utiliser le script utilisateur Local YouTube Downloader pour télécharger des vidéos YouTube en utilisant Tampermonkey ou regarder des vidéos YouTube signalées sans vous connecter .

L'extension exécute les scripts utilisateur enregistrés dès le chargement de la page Web spécifiée, rendant ainsi les modifications prévues permanentes.

Avant de commencer à écrire un script, vous devrez installer Tampermonkey. Commençons donc par installer l’extension :

1. Allez au Page officielle de Tampermonkey . Il détectera automatiquement votre navigateur Web. Sinon, cliquez sur n'importe quel onglet de Chrome, Microsoft Edge, Firefox, Safari et Opera, selon le navigateur que vous utilisez.
2. Dans le Télécharger rubrique, cliquez sur Obtenir depuis le magasin . Vous serez dirigé vers la boutique en ligne de votre navigateur.
3. Cliquer sur Installer pour ajouter l'extension à votre navigateur. Suivez les instructions à l’écran pour terminer l’installation.

Si votre navigateur n'est pas répertorié, mais que vous utilisez un navigateur Chromium, vous devriez pouvoir installer cette extension à partir du Chrome Store .

Une fois installé, vous pouvez commencer à écrire des scripts utilisateur personnalisés à l'aide de JavaScript pour apporter les modifications souhaitées à n'importe quel site Web. Inutile de dire que vous aurez besoin d'une compréhension de base de HTML, CSS et JavaScript pour écrire le script utilisateur et apporter des modifications à l'aide de Tampermonkey.

Pour démontrer les capacités de Tampermonkey, nous allons écrire un script pour ajouter un bouton de partage WhatsApp afin de partager des liens d'articles avec vos contacts WhatsApp.

Ce qu'il faut considérer avant d'apporter des modifications aux éléments du site Web

Lorsque vous apportez des modifications à un site Web, il est important de respecter leurs politiques relatives à l'utilisation de JavaScript tiers. N'essayez pas d'exécuter des scripts utilisateur de manière arbitraire sur un site Web, en particulier lorsque vous traitez des données sensibles.

Bien que Tampermonkey vous aide à modifier l'apparence et à ajouter des fonctionnalités à un site Web, toutes les modifications ne sont visibles que localement dans votre navigateur et n'affectent pas la source.

Premiers pas avec Tampermonkey

Une fois que vous avez planifié les modifications que vous souhaitez apporter à une page Web, vous pouvez commencer à écrire votre script. De nouveaux scripts utilisateur peuvent être créés à partir de la barre d'outils ou du tableau de bord Tampermonkey.

Pour créer un nouveau script, cliquez sur le Rallonges dans la barre d'outils du navigateur et sélectionnez Tampermonkey . Ensuite, sélectionnez Créer un nouveau script . Cela ouvrira un éditeur de script dans le tableau de bord Tampermonkey.

L'en-tête ou les commentaires de métadonnées Tampermonkey par défaut ressemblent à ceci :

// ==UserScript== 
 
// @name New Userscript 
 
// @namespace http://tampermonkey.net/ 
 
// @version 0.1 
 
// @description try to take over the world! 
 
// @author You 
 
// @match http://example.com/* 
 
// @grant none 
 
// ==/UserScript== 
 
(function() { 
 
'use strict'; 
 
// Your code here... 
 
})();

Ces commentaires de métadonnées incluent des informations cruciales sur le nom du script utilisateur, son objectif et ses autorisations et indiquent à Tampermonkey quand exécuter le script.

Pour ce guide, nous nous concentrerons sur @correspondre directive, alias métadonnées déposées. Tampermonkey utilise cette directive pour garantir que le script utilisateur n'est appliqué qu'à un ou plusieurs sites Web spécifiques. Dans ce cas, le script utilisateur suivant ne s'exécutera que sur example.com (remplacez l'URL du site Web selon vos besoins) et toutes ses pages.

Écrire un script utilisateur pour ajouter un bouton de partage WhatsApp

À la fin de chaque article MakeUseOf, vous trouverez un widget de partage pour diverses plateformes de médias sociaux, à l'exception de WhatsApp. Bien que vous puissiez copier et coller l'URL, un bouton de partage WhatsApp est utile si vous partagez fréquemment des articles sur votre groupe WhatsApp.

Vous pouvez créer un script utilisateur dans Tampermonkey pour ajouter un bouton de partage WhatsApp à la fin de l'article. Nous intégrerons le bouton dans le widget de partage existant qui vous permettra de partager l'URL de la page Web avec vos contacts WhatsApp.

Commençons par créer un bouton de partage WhatsApp de base.

l'ordinateur met une éternité à s'éteindre

//create a WhatsApp button 
const Whatsapp_btn = document.createElement('button'); 
Whatsapp_btn.textContent = 'Share';

Maintenant que nous avons un bouton de partage WhatsApp de base, ajoutons-lui un peu de style. Cela donnera au bouton sa couleur d'arrière-plan et de texte, sa bordure, son remplissage et son style de curseur. Avec un peu de bricolage, vous pouvez modifier les propriétés du bouton pour affiner l'apparence.

//add styling to the button 
Whatsapp_btn.style.backgroundColor = '#075E54'; 
Whatsapp_btn.style.color = 'white'; 
Whatsapp_btn.style.border = 'none'; 
Whatsapp_btn.style.borderRadius = '5px'; 
Whatsapp_btn.style.padding = '10px'; 

Une fois le bouton prêt, il est temps de le tester. Mais où le placez-vous ? De manière courante, le bouton de partage est souvent placé à la fin des articles.

Cependant, dans ce cas, nous avons déjà un widget de partage à la fin de chaque article. Il est donc idéal d’intégrer ce bouton de partage au widget.

Pour ce faire, nous inspecterons le widget de partage existant pour trouver le conteneur parent qui contient les éléments de partage afin de le localiser dans le script utilisateur. Sur la page Web, appuyez sur Ctrl + Maj + C pour ouvrir Inspecter l’élément. Ensuite, sélectionnez l’élément du widget de partage sur la page pour l’inspecter.

Vous verrez que c'est un

élément avec le nom de classe ' partager le fond ». Vous pouvez sélectionner cet élément à l'aide du sélecteur de requête méthode dans votre script utilisateur.

const sharingDiv = document.querySelector ('div.sharing.bottom');

Après avoir sélectionné l’élément, insérons le bouton de partage en tant qu’enfant :

if (sharingDiv) { 
 sharingDiv.appendChild(Whatsapp_btn); 
}

Presse Ctrl+S pour enregistrer le script. Si vous rechargez la page, vous verrez un bouton de partage inséré dans le widget de partage existant. Mais cliquer dessus ne fera rien.

Pour faire fonctionner le bouton, nous allons créer une fonction permettant de générer une URL de partage WhatsApp basée sur l'URL de la page actuelle. Vous pouvez utiliser location.href pour renvoyer l'URL de la page.

function generateWALink() { 
 const pageURL = encodeURIComponent(window.location.href); 
 return `https://api.whatsapp.com/send?text=${pageURL}`; 
}

Ensuite, ajoutons un écouteur d'événement au bouton. Lorsque vous cliquez dessus, le navigateur ouvrira un nouvel onglet avec un lien de partage WhatsApp qui vous permettra de rédiger un message.

Whatsapp_btn.addEventListener('click', () => { 
 const whatsappURL = generateWALink(); 
 window.open(whatsappURL, '_blank'); 
});

Enregistrez et exécutez le script utilisateur

Une fois que vous avez le script utilisateur prêt, appuyez sur Ctrl+S pour enregistrer les modifications. Ouvrez le Scripts utilisateur installés dans Tampermonkey pour afficher tous les scripts utilisateur installés sur votre navigateur.

Pour voir le script utilisateur en action, ouvrez la page Web cible. Vous verrez un vert Partager bouton. En cliquant sur le bouton, vous serez invité à ouvrir le bureau WhatsApp, à condition que l'application soit installée. Vous pouvez ensuite sélectionner le contact dans la liste pour envoyer le lien de l'article.

Vous pouvez modifier davantage le script pour ajouter d'autres améliorations. Par exemple, vous pouvez afficher l'icône WhatsApp sur le bouton ou modifier son emplacement à l'aide d'une fonction InsertAfter().

Vous pouvez activer, désactiver ou modifier des scripts utilisateur individuels à partir du tableau de bord Tampermonkey. Vous pouvez également cliquer sur l'icône Tampermonkey dans la barre d'outils pour désactiver tous les scripts utilisateur actifs à la fois.

lorsque vous formatez un lecteur, vous devez choisir la taille de laquelle des attributs de système de fichiers suivants ?

Rendre les modifications des éléments d'inspection permanentes à l'aide de Tampermonkey

Tampermonkey est l'un des nombreux gestionnaires de scripts utilisateur disponibles qui vous permettent de modifier les pages Web pour améliorer votre expérience de navigation. De petites modifications peuvent contribuer à une meilleure accessibilité et résoudre des désagréments mineurs avec votre site Web préféré.

Avant de commencer à écrire un script, vérifiez si un script d'autres utilisateurs existe déjà. Cependant, soyez prudent lorsque vous installez des scripts utilisateur tiers provenant de sources inconnues pour éviter tout code malveillant.