Kako pomoću Tampermonkey učiniti trajnim promjene elemenata pregleda u vašem pregledniku

Značajka Inspect Element u vašem web-pregledniku alat je za razvojne programere koji vam omogućuje izmjenu front-end aspekata web-mjesta, uključujući HTML, CSS i JavaScript, te unošenje privremenih promjena. Također možete učiniti puno više s Inspect Elementom. Međutim, sve promjene se gube nakon osvježavanja.

Ali ponekad ćete možda htjeti zadržati promjene dulje vrijeme ili dodati dodatne funkcije kako biste poboljšali korisničko iskustvo. Jedan od načina da promjene Inspect Element učinite trajnim je korištenje proširenja Tampermonkey. Omogućuje vam dodavanje prilagođenih skripti na web stranice, čineći promjene trajnim na vašem lokalnom računalu.

Pogledajmo kako upotrijebiti Tampermonkey da bi promjene elementa inspekcije postale trajne u vašem lokalnom pregledniku.

Što je Tampermonkey i kako ga možete instalirati?

Tampermonkey, upravitelj korisničkih skripti, popularno je proširenje preglednika dostupno za sve glavne web preglednike, uključujući Chrome, Edge, Opera Next i Firefox. Omogućuje vam stvaranje i pokretanje prilagođenih i postojećih korisničkih skripti za izmjenu web stranica kako biste ih popravili ili poboljšali.

Također sadrži biblioteku korisničkih skripti koju su izradili drugi korisnici Tampermonkeyja. Na primjer, možete koristiti korisničku skriptu Local YouTube Downloader za preuzmite YouTube videozapise koristeći Tampermonkey ili gledajte označene YouTube videozapise bez prijave.

Proširenje pokreće spremljene korisničke skripte čim se određena web stranica učita, čime se namjeravane promjene čine trajnim.

Prije nego počnemo pisati skriptu, morat ćete instalirati Tampermonkey. Dakle, počnimo s instaliranjem proširenja:

1. Idi na Tampermonkey službena stranica. Automatski će otkriti vaš web preglednik. Ako nije, kliknite bilo koju karticu iz Chromea, Microsoft Edgea, Firefoxa, Safarija i Opere, ovisno o pregledniku koji koristite.
2. u preuzimanje datoteka kliknite na Preuzmi iz trgovine. Bit ćete preusmjereni na web trgovinu vašeg preglednika.
3. Kliknite na Instalirati za dodavanje proširenja u vaš preglednik. Slijedite sve upute na zaslonu za dovršetak instalacije.

Ako vaš preglednik nije naveden, ali koristite preglednik Chromium, trebali biste moći instalirati ovo proširenje iz Chrome trgovina.

Nakon instaliranja, možete početi pisati prilagođene korisničke skripte pomoću JavaScripta kako biste izvršili željene promjene na bilo kojoj web stranici. Nepotrebno je reći da će vam trebati osnovno razumijevanje HTML-a, CSS-a i JavaScripta da biste napisali korisničku skriptu i napravili izmjene pomoću Tampermonkeya.

Kako bismo demonstrirali mogućnosti Tampermonkeya, napisat ćemo skriptu za dodavanje gumba za dijeljenje WhatsAppa za dijeljenje veza članaka s vašim WhatsApp kontaktima.

Što treba uzeti u obzir prije izmjena elemenata web stranice

Dok vršite izmjene na bilo kojoj web stranici, važno je poštivati ​​njihova pravila o korištenju JavaScripta trećih strana. Ne pokušavajte samovoljno pokretati korisničke skripte na bilo kojoj web stranici, osobito kada radite s osjetljivim podacima.

Iako vam Tampermonkey pomaže promijeniti izgled i dodati funkcionalnost web stranici, sve promjene vidljive su samo lokalno u vašem pregledniku i ne utječu na izvor.

Početak rada s Tampermonkeyjem

Nakon što isplanirate izmjene koje želite napraviti na web stranici, možete početi pisati svoju skriptu. Nove korisničke skripte mogu se stvoriti s alatne trake ili nadzorne ploče Tampermonkey.

Za izradu nove skripte kliknite na Ekstenzije ikonu na alatnoj traci preglednika i odaberite Tampermonkey. Zatim odaberite Napravite novu skriptu. Ovo će otvoriti uređivač skripti na nadzornoj ploči Tampermonkey.

Zadano zaglavlje Tampermonkey ili komentari metapodataka izgledaju ovako:

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

Ovi komentari metapodataka uključuju ključne informacije o nazivu korisničke skripte, predviđenoj svrsi i dopuštenjima i govore Tampermonkeyu kada da izvrši skriptu.

Za ovaj ćemo se vodič usredotočiti na @podudaranje direktiva, poznata i kao datoteka metapodataka. Tampermonkey koristi ovu direktivu kako bi osigurao da se korisnički skript primjenjuje samo na određeno web mjesto ili web stranice. U ovom slučaju, sljedeća korisnička skripta pokrenut će se samo na example.com (zamijenite URL web stranice prema vašim zahtjevima) i na svim njezinim stranicama.

Pisanje korisničkog skripta za dodavanje WhatsApp gumba za dijeljenje

Na kraju svakog MakeUseOf članka pronaći ćete widget za dijeljenje za razne platforme društvenih medija, osim WhatsAppa. Iako možete kopirati i zalijepiti URL, WhatsApp gumb za dijeljenje koristan je ako često dijelite članke u svojoj WhatsApp grupi.

Možete izraditi korisničku skriptu u Tampermonkeyu kako biste dodali WhatsApp gumb za dijeljenje na kraju članka. Integrirat ćemo gumb u postojeći widget za dijeljenje koji će vam omogućiti dijeljenje URL-a web stranice s vašim WhatsApp kontaktima.

Počnimo s izradom osnovnog WhatsApp gumba za dijeljenje.

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

Sad kad imamo osnovni WhatsApp gumb za dijeljenje, dodajmo mu malo stila. To će gumbu dati boju pozadine i teksta, okvir, ispunu i stil kursora. Uz malo petljanja, možete promijeniti svojstva gumba kako biste fino prilagodili izgled.

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

Kad je gumb spreman, vrijeme je da ga testirate. Ali gdje ga smjestiti? Kao uobičajena praksa, često se gumb za dijeljenje nalazi na kraju članaka.

Međutim, u ovom slučaju već imamo widget za dijeljenje na kraju svakog članka. Dakle, idealno je da ovaj gumb za dijeljenje bude dio widgeta.

Da bismo to učinili, pregledat ćemo postojeći widget za dijeljenje kako bismo pronašli nadređeni spremnik koji sadrži elemente za dijeljenje kako bismo ga locirali u korisničkom skriptu. Na web stranici pritisnite Ctrl + Shift + C da otvorite Inspect Element. Zatim odaberite element dijeljenog widgeta na stranici da biste ga pregledali.

Vidjet ćete da je to element s nazivom klase “dijeljenje dna”. Ovaj element možete odabrati pomoću querySelector metodu u vašem korisničkom skriptu.

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

Nakon odabira elementa, umetnimo gumb za dijeljenje kao dijete:

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

Pritisnite Ctrl + S da biste spremili skriptu. Ako ponovno učitate stranicu, vidjet ćete gumb za dijeljenje umetnut u postojeći widget za dijeljenje. Ali klik na njega neće učiniti ništa.

Kako bi gumb radio, izradit ćemo funkciju za generiranje URL-a za dijeljenje WhatsApp-a na temelju URL-a trenutne stranice. Možete koristiti location.href da vratite URL stranice.

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

Zatim, dodajmo gumbu slušatelja događaja. Kada se klikne, preglednik će otvoriti novu karticu s vezom za dijeljenje WhatsAppa koja vam omogućuje sastavljanje poruke.

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

Spremite i pokrenite korisnički skript

Kada pripremite korisničku skriptu, pritisnite Ctrl + S za spremanje promjena. Otvori Instalirane korisničke skripte karticu u Tampermonkeyu za pregled svih korisničkih skripti instaliranih na vašem pregledniku.

Da biste vidjeli korisničku skriptu na djelu, otvorite ciljnu web stranicu. Vidjet ćete zeleno Udio dugme. Klikom na gumb od vas će se tražiti da otvorite radnu površinu WhatsAppa, pod uvjetom da imate instaliranu aplikaciju. Zatim možete odabrati kontakt s popisa za slanje poveznice na članak.

Možete dodatno modificirati skriptu kako biste dodali još poboljšanja. Na primjer, možete prikazati ikonu WhatsApp na gumbu ili promijeniti njezin položaj pomoću funkcije InsertAfter().

Možete omogućiti, onemogućiti ili urediti pojedinačne korisničke skripte s nadzorne ploče Tampermonkey. Alternativno, kliknite ikonu Tampermonkey na alatnoj traci da biste onemogućili sve aktivne korisničke skripte odjednom.

Omogućavanje trajnih promjena elementa Inspect koristeći Tampermonkey

Tampermonkey je jedan od mnogih dostupnih upravitelja korisničkih skripti koji vam omogućuju izmjenu web stranica kako biste poboljšali svoje iskustvo pregledavanja. Male izmjene mogu pomoći u boljoj pristupačnosti i popraviti manje smetnje na vašoj omiljenoj web stranici.

Prije nego počnete pisati skriptu, provjerite postoji li skripta drugih korisnika. Međutim, budite oprezni pri instaliranju korisničkih skripti trećih strana iz nepoznatih izvora kako biste izbjegli zlonamjerni kod.