Kako s Tampermonkey narediti spremembe elementov pregleda trajnih v vašem brskalniku

Funkcija Inspect Element v vašem spletnem brskalniku je orodje za razvijalce, ki vam omogoča spreminjanje sprednjih vidikov spletnega mesta, vključno s HTML, CSS in JavaScript, ter izvajanje začasnih sprememb. Z Inspect Element lahko storite tudi veliko več. Vendar se po osvežitvi vse spremembe izgubijo.

Toda včasih boste morda želeli obdržati spremembe dlje časa ali dodati dodatne funkcije za izboljšanje uporabniške izkušnje. Eden od načinov za trajne spremembe Inspect Element je uporaba razširitve Tampermonkey. Omogoča dodajanje skriptov po meri na spletne strani, zaradi česar so spremembe trajne na vašem lokalnem računalniku.

Oglejmo si, kako uporabiti Tampermonkey, da spremembe elementov pregledovanja postanejo trajne v vašem lokalnem brskalniku.

Kaj je Tampermonkey in kako ga lahko namestite?

Tampermonkey, upravitelj uporabniških skriptov, je priljubljena razširitev brskalnika, ki je na voljo za vse glavne spletne brskalnike, vključno s Chrome, Edge, Opera Next in Firefox. Omogoča ustvarjanje in zagon uporabniških skriptov po meri in obstoječih za spreminjanje spletnih strani, da jih popravite ali izboljšate.

Vsebuje tudi knjižnico uporabniških skriptov, ki so jo ustvarili drugi uporabniki Tampermonkey. Uporabite lahko na primer uporabniški skript Local YouTube Downloader prenesite videoposnetke YouTube s programom Tampermonkey oz gledajte označene YouTube videoposnetke brez prijave.

Razširitev zažene shranjene uporabniške skripte takoj, ko se navedena spletna stran naloži, zaradi česar so predvidene spremembe videti trajne.

Preden začnemo pisati skript, boste morali namestiti Tampermonkey. Torej, začnimo z namestitvijo razširitve:

1. Pojdi na Uradna stran Tampermonkey. Samodejno bo zaznal vaš spletni brskalnik. Če ne, kliknite kateri koli zavihek v brskalnikih Chrome, Microsoft Edge, Firefox, Safari in Opera, odvisno od brskalnika, ki ga uporabljate.
2. V Prenesi kliknite na Pridobite iz trgovine. Preusmerjeni boste v spletno trgovino vašega brskalnika.
3. Kliknite na Namestite da dodate razširitev v brskalnik. Za dokončanje namestitve sledite navodilom na zaslonu.

Če vašega brskalnika ni na seznamu, vendar uporabljate brskalnik Chromium, bi morali imeti možnost namestiti to razširitev iz Trgovina Chrome.

Ko je nameščen, lahko začnete pisati uporabniške skripte po meri z uporabo JavaScripta, da naredite želene spremembe na katerem koli spletnem mestu. Ni treba posebej poudarjati, da boste potrebovali osnovno razumevanje HTML, CSS in JavaScript za pisanje uporabniškega skripta in spreminjanje s Tampermonkey.

Da bi prikazali zmogljivosti Tampermonkey, bomo napisali skript za dodajanje gumba za skupno rabo WhatsApp za skupno rabo povezav do člankov z vašimi stiki WhatsApp.

Kaj morate upoštevati, preden spremenite elemente spletnega mesta

Pri spreminjanju katere koli spletne strani je pomembno, da spoštujete njihove pravilnike o uporabi JavaScriptov tretjih oseb. Ne poskušajte poljubno zagnati uporabniških skriptov na katerem koli spletnem mestu, še posebej, če imate opravka z občutljivimi podatki.

Čeprav vam Tampermonkey pomaga spremeniti videz in dodati funkcionalnost spletnemu mestu, so vse spremembe vidne samo lokalno v vašem brskalniku in ne vplivajo na vir.

Kako začeti uporabljati Tampermonkey

Ko načrtujete spremembe, ki jih želite narediti na spletni strani, lahko začnete pisati svoj skript. Nove uporabniške skripte je mogoče ustvariti v orodni vrstici ali na nadzorni plošči Tampermonkey.

Če želite ustvariti nov skript, kliknite Razširitve ikono v orodni vrstici brskalnika in izberite Tampermonkey. Nato izberite Ustvarite nov skript. To bo odprlo urejevalnik skriptov na nadzorni plošči Tampermonkey.

Privzeta glava Tampermonkey ali komentarji metapodatkov izgledajo takole:

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

Ti komentarji metapodatkov vključujejo ključne informacije o imenu uporabniškega skripta, predvidenem namenu in dovoljenjih ter sporočajo Tampermonkeyju, kdaj naj izvede skript.

V tem vodniku se bomo osredotočili na @tekma direktiva, imenovana metapodatki. Tampermonkey uporablja to direktivo, da zagotovi, da se uporabniški skript uporablja samo za določeno spletno mesto ali spletne strani. V tem primeru se bo naslednji uporabniški skript izvajal samo na example.com (zamenjajte URL spletnega mesta glede na vaše zahteve) in na vseh njegovih straneh.

Pisanje uporabniškega skripta za dodajanje gumba za skupno rabo WhatsApp

Na koncu vsakega članka MakeUseOf boste našli pripomoček za skupno rabo za različne platforme družbenih medijev, razen za WhatsApp. Medtem ko lahko URL kopirate in prilepite, je gumb za skupno rabo WhatsApp uporaben, če članke pogosto delite v svoji skupini WhatsApp.

V Tampermonkey lahko ustvarite uporabniški skript, da dodate gumb za skupno rabo WhatsApp na koncu članka. Gumb bomo integrirali v obstoječi pripomoček za skupno rabo, ki vam bo omogočil skupno rabo URL-ja spletne strani z vašimi stiki WhatsApp.

Začnimo z ustvarjanjem osnovnega gumba za skupno rabo WhatsApp.

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

Zdaj, ko imamo osnovni gumb za skupno rabo WhatsApp, mu dodajmo nekaj sloga. S tem bo gumb dobil barvo ozadja in besedila, obrobo, oblazinjenje in slog kazalca. Z malo poigravanja lahko spremenite lastnosti gumbov, da natančno prilagodite videz.

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

Ko je gumb pripravljen, je čas, da ga preizkusite. Toda kam ga postavite? Kot običajna praksa je gumb za skupno rabo pogosto postavljen na konec člankov.

Vendar pa v tem primeru že imamo pripomoček za skupno rabo na koncu vsakega članka. Zato je idealno, da ta gumb za skupno rabo postane del pripomočka.

Da bi to naredili, bomo pregledali obstoječi gradnik za skupno rabo, da bi našli nadrejeni vsebnik, ki vsebuje elemente za skupno rabo in ga poiskali v uporabniškem skriptu. Na spletni strani pritisnite Ctrl + Shift + C da odprete Pregled elementa. Nato izberite element pripomočka za skupno rabo na strani, da ga pregledate.

Videli boste, da je element z imenom razreda "delitev dna”. Ta element lahko izberete z uporabo querySelector metodo v vašem uporabniškem skriptu.

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

Ko izberemo element, vstavimo gumb za skupno rabo kot podrejenega elementa:

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

Pritisnite Ctrl + S da shranite skript. Če znova naložite stran, boste videli gumb za skupno rabo, vstavljen v obstoječi pripomoček za skupno rabo. Toda klik nanj ne bo naredil ničesar.

Da bo gumb deloval, bomo ustvarili funkcijo za ustvarjanje URL-ja za skupno rabo WhatsApp na podlagi URL-ja trenutne strani. Za vrnitev URL-ja strani lahko uporabite location.href.

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

Nato gumbu dodamo poslušalca dogodkov. Ko kliknete, bo brskalnik odprl nov zavihek s povezavo za skupno rabo WhatsApp, ki vam omogoča sestavljanje sporočila.

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

Shranite in zaženite uporabniški skript

Ko je uporabniški skript pripravljen, pritisnite Ctrl + S da shranite spremembe. Odprite Nameščeni uporabniški skripti v Tampermonkey za ogled vseh uporabniških skriptov, nameščenih v vašem brskalniku.

Če želite videti uporabniški skript v akciji, odprite ciljno spletno stran. Videli boste zeleno Deliti gumb. S klikom na gumb boste pozvani, da odprete namizje WhatsApp, če imate nameščeno aplikacijo. Nato lahko s seznama izberete stik, da pošljete povezavo do članka.

Skript lahko dodatno spremenite, da dodate več izboljšav. Na primer, lahko prikažete ikono WhatsApp na gumbu ali spremenite njeno postavitev s funkcijo InsertAfter().

Na nadzorni plošči Tampermonkey lahko omogočite, onemogočite ali uredite posamezne uporabniške skripte. Lahko pa kliknete ikono Tampermonkey v orodni vrstici, da onemogočite vse aktivne uporabniške skripte hkrati.

Trajne spremembe elementov Inspect z uporabo Tampermonkey

Tampermonkey je eden od mnogih razpoložljivih upraviteljev uporabniških skriptov, ki vam omogočajo spreminjanje spletnih strani za izboljšanje vaše izkušnje brskanja. Majhne spremembe lahko pripomorejo k boljši dostopnosti in odpravijo manjše motnje na vašem priljubljenem spletnem mestu.

Preden začnete pisati skript, preverite, ali že obstaja skript drugih uporabnikov. Vendar bodite previdni pri nameščanju uporabniških skriptov tretjih oseb iz neznanih virov, da se izognete zlonamerni kodi.