Come rendere permanenti le modifiche agli elementi di ispezione nel browser con Tampermonkey

La funzione Ispeziona elemento sul tuo browser web è uno strumento per sviluppatori che ti consente di modificare gli aspetti front-end di un sito web, inclusi HTML, CSS e JavaScript, e apportare modifiche temporanee. Puoi anche fare molto di più con Ispeziona Elemento. Tuttavia, tutte le modifiche andranno perse dopo un aggiornamento.

A volte, però, potresti voler mantenere le modifiche per un periodo prolungato o aggiungere funzionalità aggiuntive per migliorare l'esperienza dell'utente. Un modo per rendere permanenti le modifiche di Ispeziona elemento è utilizzare l'estensione Tampermonkey. Ti consente di aggiungere script personalizzati alle pagine Web, rendendo le modifiche permanenti sul tuo computer locale.

Diamo un'occhiata a come utilizzare Tampermonkey per rendere permanenti le modifiche dell'elemento di ispezione sul browser locale.

Cos'è Tampermonkey e come puoi installarlo?

Tampermonkey, un gestore di script utente, è una popolare estensione del browser disponibile per tutti i principali browser Web, inclusi Chrome, Edge, Opera Next e Firefox. Ti consente di creare ed eseguire script utente personalizzati ed esistenti per modificare le pagine Web per correggerle o migliorarle.

Dispone inoltre di una libreria di script utente creata da altri utenti Tampermonkey. Ad esempio, puoi utilizzare lo script utente Local YouTube Downloader per scaricare video di YouTube utilizzando Tampermonkey O guarda i video YouTube contrassegnati senza effettuare l'accesso.

L'estensione esegue gli script utente salvati non appena viene caricata la pagina Web specificata, rendendo così permanenti le modifiche previste.

Prima di iniziare a scrivere uno script, dovrai installare Tampermonkey. Quindi, iniziamo con l'installazione dell'estensione:

1. Vai a Pagina ufficiale di Tampermonkey. Rileverà automaticamente il tuo browser web. In caso contrario, fai clic su qualsiasi scheda di Chrome, Microsoft Edge, Firefox, Safari e Opera, a seconda del browser che stai utilizzando.
2. Nel Scaricamento sezione, fare clic su Ottieni dal negozio. Verrai indirizzato al negozio web del tuo browser.
3. Clicca su Installare per aggiungere l'estensione al tuo browser. Seguire le istruzioni visualizzate sullo schermo per completare l'installazione.

Se il tuo browser non è elencato, ma stai utilizzando un browser Chromium, dovresti essere in grado di installare questa estensione da Negozio Chrome.

Una volta installato, puoi iniziare a scrivere script utente personalizzati utilizzando JavaScript per apportare le modifiche desiderate a qualsiasi sito web. Inutile dire che avrai bisogno di una conoscenza di base di HTML, CSS e JavaScript per scrivere lo script utente e apportare modifiche utilizzando Tampermonkey.

Per dimostrare le capacità di Tampermonkey, scriveremo uno script per aggiungere un pulsante di condivisione WhatsApp per condividere i collegamenti agli articoli con i tuoi contatti WhatsApp.

Cosa considerare prima di apportare modifiche agli elementi del sito web

Quando si apportano modifiche a qualsiasi sito Web, è importante rispettare le loro politiche sull'utilizzo di JavaScript di terze parti. Non tentare di eseguire script utente arbitrariamente su qualsiasi sito Web, soprattutto quando si tratta di dati sensibili.

Sebbene Tampermonkey ti aiuti a modificare l'aspetto e ad aggiungere funzionalità a un sito Web, tutte le modifiche sono visibili solo localmente nel tuo browser e non influiscono sulla fonte.

Iniziare con Tampermonkey

Una volta pianificate le modifiche che desideri apportare a una pagina web, puoi iniziare a scrivere il tuo script. È possibile creare nuovi script utente dalla barra degli strumenti o dalla dashboard di Tampermonkey.

Per creare un nuovo script, fare clic su Estensioni icona nella barra degli strumenti del browser e seleziona Manomissione. Quindi, seleziona Crea un nuovo copione. Verrà aperto un editor di script nella dashboard di Tampermonkey.

L'intestazione Tampermonkey o i commenti sui metadati predefiniti hanno il seguente aspetto:

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

Questi commenti sui metadati includono informazioni cruciali sul nome dello script utente, sullo scopo previsto e sulle autorizzazioni e indicano a Tampermonkey quando eseguire lo script.

Per questa guida, ci concentreremo su @incontro direttiva, ovvero i metadati archiviati. Tampermonkey utilizza questa direttiva per garantire che lo script utente venga applicato solo a uno o più siti Web specifici. In questo caso, il seguente script utente verrà eseguito solo su example.com (sostituisci l'URL del sito Web secondo le tue esigenze) e tutte le sue pagine.

Scrivere uno script utente per aggiungere un pulsante di condivisione WhatsApp

Alla fine di ogni articolo di MakeUseOf troverai un widget di condivisione per varie piattaforme di social media, ad eccezione di WhatsApp. Anche se puoi copiare e incollare l'URL, un pulsante di condivisione di WhatsApp è utile se condividi spesso articoli sul tuo gruppo WhatsApp.

Puoi creare uno script utente in Tampermonkey per aggiungere un pulsante di condivisione WhatsApp alla fine dell'articolo. Integreremo il pulsante nel widget di condivisione esistente che ti consentirà di condividere l'URL della pagina web con i tuoi contatti WhatsApp.

Iniziamo con la creazione di un pulsante di condivisione WhatsApp di base.

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

Ora che abbiamo un pulsante di condivisione WhatsApp di base, aggiungiamo un po' di stile. Ciò darà al pulsante lo sfondo, il colore del testo, il bordo, il riempimento e lo stile del cursore. Con un po' di manipolazione, puoi modificare le proprietà del pulsante per ottimizzare l'aspetto.

//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';

Con il pulsante pronto, è il momento di testarlo. Ma dove lo metti? Come pratica comune, spesso il pulsante di condivisione è posizionato alla fine degli articoli.

Tuttavia, in questo caso, abbiamo già un widget di condivisione alla fine di ogni articolo. Quindi, è ideale rendere questo pulsante di condivisione parte del widget.

Per fare ciò, ispezioneremo il widget di condivisione esistente per trovare il contenitore principale che contiene gli elementi di condivisione per individuarlo nello script utente. Nella pagina web, premere Ctrl+Maiusc+C per aprire Ispeziona elemento. Successivamente, seleziona l'elemento del widget di condivisione sulla pagina per ispezionarlo.

Vedrai che è un elemento con il nome della classe “condivisione del fondo”. È possibile selezionare questo elemento utilizzando il querySelector metodo nel tuo script utente.

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

Dopo aver selezionato l'elemento, inseriamo ad esso il pulsante di condivisione figlio:

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

Premere CTRL+S per salvare lo script. Se ricarichi la pagina, vedrai un pulsante di condivisione inserito nel widget di condivisione esistente. Ma cliccandoci sopra non succederà nulla.

Per far funzionare il pulsante, creeremo una funzione per generare un URL di condivisione WhatsApp basato sull'URL della pagina corrente. Puoi utilizzare location.href per restituire l'URL della pagina.

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

Successivamente, aggiungiamo un ascoltatore di eventi al pulsante. Quando si fa clic, il browser aprirà una nuova scheda con un collegamento di condivisione WhatsApp che ti consentirà di comporre un messaggio.

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

Salva ed esegui lo script utente

Una volta pronto lo script utente, premere CTRL+S per salvare le modifiche. Apri il Script utente installati scheda in Tampermonkey per visualizzare tutti gli script utente installati nel tuo browser.

Per vedere lo script utente in azione, aprire la pagina Web di destinazione. Vedrai un verde Condividere pulsante. Facendo clic sul pulsante ti verrà chiesto di aprire il desktop di WhatsApp, a condizione che tu abbia installato l'app. È quindi possibile selezionare il contatto dall'elenco per inviare il collegamento all'articolo.

È possibile modificare ulteriormente lo script per aggiungere ulteriori miglioramenti. Ad esempio, puoi visualizzare l'icona di WhatsApp sul pulsante o modificarne la posizione utilizzando la funzione InsertAfter().

È possibile abilitare, disabilitare o modificare singoli script utente dalla dashboard Tampermonkey. In alternativa, fare clic sull'icona Tampermonkey nella barra degli strumenti per disabilitare tutti gli script utente attivi contemporaneamente.

Rendere permanenti le modifiche agli elementi di ispezione utilizzando Tampermonkey

Tampermonkey è uno dei tanti gestori di script utente disponibili che ti consentono di modificare le pagine Web per migliorare la tua esperienza di navigazione. Piccole modifiche possono aiutare a migliorare l'accessibilità e risolvere piccoli fastidi con il tuo sito web preferito.

Prima di iniziare a scrivere uno script, controlla se esiste già uno script di altri utenti. Tuttavia, fai attenzione a installare script utente di terze parti da fonti sconosciute per evitare codice dannoso.