Cum să faci inspectarea modificărilor elementelor permanente în browser-ul tău cu Tampermonkey

Funcția Inspectați elementul din browserul dvs. web este un instrument de dezvoltator care vă permite să modificați aspectele front-end ale unui site web, inclusiv HTML, CSS și JavaScript, și să efectuați modificări temporare. De asemenea, puteți face mult mai multe cu Inspect Element. Cu toate acestea, toate modificările se pierd după o reîmprospătare.

Dar, uneori, este posibil să doriți să păstrați modificările pentru o perioadă lungă de timp sau să adăugați funcționalități suplimentare pentru a îmbunătăți experiența utilizatorului. O modalitate de a face modificările Inspect Element permanente este utilizarea extensiei Tampermonkey. Vă permite să adăugați scripturi personalizate pe paginile web, făcând modificările permanente pe mașina dvs. locală.

Să vedem cum să folosiți Tampermonkey pentru a face modificările elementului de inspectare permanente în browserul dvs. local.

Ce este Tampermonkey și cum îl puteți instala?

Tampermonkey, un manager de userscript, este o extensie populară de browser disponibilă pentru toate browserele web majore, inclusiv Chrome, Edge, Opera Next și Firefox. Vă permite să creați și să rulați scripturi de utilizator personalizate și existente pentru a modifica paginile web pentru a le remedia sau îmbunătăți.

Include, de asemenea, o bibliotecă de scripturi de utilizator creată de alți utilizatori Tampermonkey. De exemplu, puteți utiliza scriptul de utilizator Local YouTube Downloader pentru descărcați videoclipuri YouTube folosind Tampermonkey sau vizionați videoclipuri YouTube marcate fără a vă conecta.

Extensia rulează userscript-urile salvate de îndată ce pagina web specificată se încarcă, făcând astfel ca modificările dorite să pară permanente.

Înainte de a începe să scriem un script, va trebui să instalați Tampermonkey. Deci, să începem cu instalarea extensiei:

1. Du-te la Pagina oficială Tampermonkey. Acesta va detecta automat browserul dvs. web. Dacă nu, faceți clic pe orice filă din Chrome, Microsoft Edge, Firefox, Safari și Opera, în funcție de browserul pe care îl utilizați.
2. În Descarca secțiune, faceți clic pe Ia din magazin. Veți fi direcționat către magazinul web al browserului dvs.
3. Click pe Instalare pentru a adăuga extensia în browser. Urmați orice instrucțiuni de pe ecran pentru a finaliza instalarea.

Dacă browserul dvs. nu este listat, dar utilizați un browser Chromium, ar trebui să puteți instala această extensie din Magazinul Chrome.

Odată instalat, puteți începe să scrieți scripturi de utilizator personalizate folosind JavaScript pentru a face modificările dorite oricărui site web. Inutil să spunem că veți avea nevoie de o înțelegere de bază a HTML, CSS și JavaScript pentru a scrie userscript-ul și a face modificări folosind Tampermonkey.

Pentru a demonstra capacitățile Tampermonkey, vom scrie un script pentru a adăuga un buton de partajare WhatsApp pentru a partaja link-uri articole cu contactele tale WhatsApp.

Ce trebuie să luați în considerare înainte de a face modificări ale elementelor site-ului web

Când faceți modificări oricărui site web, este important să respectați politicile acestora privind utilizarea JavaScript-urilor terțe. Nu încercați să rulați scripturi de utilizator în mod arbitrar pe niciun site web, mai ales când aveți de-a face cu date sensibile.

În timp ce Tampermonkey vă ajută să modificați aspectul și să adăugați funcționalități unui site web, toate modificările sunt vizibile doar local în browser și nu afectează sursa.

Noțiuni introductive cu Tampermonkey

După ce ați planificat modificările pe care doriți să le faceți unei pagini web, puteți începe să scrieți scriptul. Noi scripturi de utilizator pot fi create din bara de instrumente sau din tabloul de bord Tampermonkey.

Pentru a crea un script nou, faceți clic pe Extensii pictograma din bara de instrumente a browserului și selectați Tampermonkey. Apoi, selectați Creați un nou script. Aceasta va deschide un editor de script în tabloul de bord Tampermonkey.

Antetul implicit Tampermonkey sau comentariile metadatelor arată astfel:

// ==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...
})();

Aceste comentarii despre metadate includ informații esențiale despre numele userscript-ului, scopul propus și permisiuni și îi spun lui Tampermonkey când să execute scriptul.

Pentru acest ghid, ne vom concentra pe @Meci directivă, denumită metadatele depuse. Tampermonkey folosește această directivă pentru a se asigura că userscript-ul este aplicat numai unui anumit site web sau pagini web. În acest caz, următorul script de utilizator va rula numai pe example.com (înlocuiește adresa URL a site-ului web conform cerințelor dvs.) și pe toate paginile sale.

Scrierea unui Userscript pentru a adăuga un buton WhatsApp Share

La sfârșitul fiecărui articol MakeUseOf, veți găsi un widget de partajare pentru diverse platforme de social media, cu excepția WhatsApp. Deși puteți copia și lipi adresa URL, un buton de partajare WhatsApp este util dacă partajați frecvent articole în grupul dvs. WhatsApp.

Puteți crea un script de utilizator în Tampermonkey pentru a adăuga un buton de partajare WhatsApp la sfârșitul articolului. Vom integra butonul în widget-ul de partajare existent care vă va permite să partajați adresa URL a paginii web persoanelor de contact WhatsApp.

Să începem cu crearea unui buton de partajare WhatsApp de bază.

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

Acum că avem un buton de partajare WhatsApp de bază, să-i adăugăm ceva stil. Acest lucru va oferi butonului culoarea de fundal și text, chenarul, umplutura și stilul cursorului. Cu puțină reparație, puteți modifica proprietățile butonului pentru a regla fin aspectul.

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

Cu butonul gata, este timpul să-l testați. Dar unde o plasezi? Ca o practică obișnuită, adesea butonul de distribuire este plasat la sfârșitul articolelor.

Cu toate acestea, în acest caz, avem deja un widget de partajare la sfârșitul fiecărui articol. Deci, este ideal să faceți acest buton de partajare parte a widget-ului.

Pentru a face acest lucru, vom inspecta widgetul de partajare existent pentru a găsi containerul părinte care conține elementele de partajare pentru a-l localiza în scriptul de utilizare. Pe pagina web, apăsați Ctrl + Shift + C pentru a deschide Inspect Element. Apoi, selectați elementul widget de partajare de pe pagină pentru a-l inspecta.

Veți vedea că este un element cu numele clasei „partajarea fundului”. Puteți selecta acest element folosind querySelector metoda din scriptul dvs. de utilizator.

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

După selectarea elementului, să introducem butonul de partajare ca copil:

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

presa Ctrl + S pentru a salva scriptul. Dacă reîncărcați pagina, veți vedea un buton de distribuire inserat în widgetul de partajare existent. Dar făcând clic pe el nu va face nimic.

Pentru ca butonul să funcționeze, vom crea o funcție pentru a genera o adresă URL de distribuire WhatsApp pe baza adresei URL a paginii curente. Puteți utiliza location.href pentru a returna adresa URL a paginii.

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

Apoi, să adăugăm un ascultător de evenimente la buton. Când faceți clic, browserul va deschide o filă nouă cu un link de partajare WhatsApp care vă permite să compuneți un mesaj.

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

Salvați și rulați Userscript-ul

După ce aveți scriptul de utilizator gata, apăsați Ctrl + S pentru a salva modificările. Deschide Scripturi de utilizator instalate din Tampermonkey pentru a vedea toate scripturile de utilizator instalate pe browser.

Pentru a vedea userscript-ul în acțiune, deschideți pagina web țintă. Vei vedea un verde Acțiune buton. Făcând clic pe butonul, îți va cere să deschideți desktopul WhatsApp, cu condiția să aveți aplicația instalată. Puteți selecta apoi persoana de contact din listă pentru a trimite linkul articolului.

Puteți modifica în continuare scriptul pentru a adăuga mai multe îmbunătățiri. De exemplu, puteți afișa pictograma WhatsApp pe buton sau puteți modifica plasarea acesteia folosind o funcție InsertAfter().

Puteți activa, dezactiva sau edita scripturi de utilizator individuale din tabloul de bord Tampermonkey. Alternativ, faceți clic pe pictograma Tampermonkey din bara de instrumente pentru a dezactiva simultan toate scripturile de utilizator active.

Efectuarea permanentă a modificărilor elementului Inspect folosind Tampermonkey

Tampermonkey este unul dintre numeroșii manageri de userscript disponibile care vă permit să modificați paginile web pentru a vă îmbunătăți experiența de navigare. Modificările mici pot ajuta la o mai bună accesibilitate și pot rezolva neplăceri minore cu site-ul tău preferat.

Înainte de a începe să scrieți un script, verificați dacă există deja un script de la alți utilizatori. Cu toate acestea, aveți grijă să instalați scripturi de utilizator terță parte din surse necunoscute pentru a evita codul rău intenționat.