Ako natrvalo kontrolovať zmeny prvkov vo vašom prehliadači pomocou Tampermonkey

Funkcia Inspect Element vo vašom webovom prehliadači je nástroj pre vývojárov, ktorý vám umožňuje upravovať front-endové aspekty webovej lokality vrátane HTML, CSS a JavaScript a vykonávať dočasné zmeny. S Inspect Element môžete tiež urobiť oveľa viac. Všetky zmeny sa však po obnovení stratia.

Niekedy však možno budete chcieť ponechať zmeny na dlhšiu dobu alebo pridať ďalšie funkcie na zlepšenie používateľského zážitku. Jedným zo spôsobov, ako urobiť zmeny Inspect Element trvalými, je použitie rozšírenia Tampermonkey. Umožňuje vám pridávať vlastné skripty na webové stránky, vďaka čomu sú zmeny trvalé na vašom lokálnom počítači.

Pozrime sa, ako použiť Tampermonkey, aby boli zmeny prvku kontroly trvalé vo vašom lokálnom prehliadači.

Čo je Tampermonkey a ako ho môžete nainštalovať?

Tampermonkey, správca používateľských skriptov, je obľúbené rozšírenie prehliadača dostupné pre všetky hlavné webové prehliadače vrátane Chrome, Edge, Opera Next a Firefox. Umožňuje vám vytvárať a spúšťať vlastné a existujúce používateľské skripty na úpravu webových stránok, aby ste ich opravili alebo vylepšili.

Obsahuje tiež knižnicu používateľských skriptov vytvorenú inými používateľmi Tampermonkey. Môžete napríklad použiť používateľský skript Local YouTube Downloader stiahnite si videá z YouTube pomocou Tampermonkey alebo pozerať nahlásené videá YouTube bez prihlásenia.

Rozšírenie spustí uložené používateľské skripty hneď po načítaní zadanej webovej stránky, čím sa zamýšľané zmeny zdajú byť trvalé.

Skôr ako začneme písať skript, budete musieť nainštalovať Tampermonkey. Začnime teda inštaláciou rozšírenia:

1. Choďte na Oficiálna stránka Tampermonkey. Automaticky rozpozná váš webový prehliadač. Ak nie, kliknite na ľubovoľnú kartu v prehliadačoch Chrome, Microsoft Edge, Firefox, Safari a Opera v závislosti od prehliadača, ktorý používate.
2. V Stiahnuť ▼ sekciu, kliknite na Získajte z obchodu. Budete presmerovaní do internetového obchodu prehliadača.
3. Kliknite na Inštalácia pridať rozšírenie do svojho prehliadača. Dokončite inštaláciu podľa pokynov na obrazovke.

Ak váš prehliadač nie je uvedený, ale používate prehliadač Chromium, mali by ste byť schopní nainštalovať toto rozšírenie z Chrome Store.

Po inštalácii môžete začať písať vlastné užívateľské skripty pomocou JavaScriptu, aby ste mohli vykonať zamýšľané zmeny na ľubovoľnej webovej lokalite. Netreba dodávať, že na napísanie používateľského skriptu a vykonanie úprav pomocou Tampermonkey budete potrebovať základné znalosti HTML, CSS a JavaScript.

Aby sme demonštrovali schopnosti Tampermonkey, napíšeme skript na pridanie tlačidla zdieľania WhatsApp na zdieľanie odkazov na články s vašimi kontaktmi WhatsApp.

Čo je potrebné zvážiť pred vykonaním úprav prvkov webovej stránky

Pri vykonávaní úprav na akejkoľvek webovej lokalite je dôležité rešpektovať ich zásady používania JavaScriptov tretích strán. Nepokúšajte sa svojvoľne spúšťať používateľské skripty na žiadnej webovej lokalite, najmä ak pracujete s citlivými údajmi.

Aj keď vám Tampermonkey pomáha upraviť vzhľad a pridať funkcie na webovú stránku, všetky zmeny sú viditeľné iba lokálne vo vašom prehliadači a neovplyvňujú zdroj.

Začíname s Tampermonkey

Po naplánovaní úprav, ktoré chcete vykonať na webovej stránke, môžete začať písať skript. Nové užívateľské skripty je možné vytvárať z panela nástrojov alebo ovládacieho panela Tampermonkey.

Ak chcete vytvoriť nový skript, kliknite na Rozšírenia ikonu na paneli s nástrojmi prehliadača a vyberte Tampermonkey. Ďalej vyberte Vytvorte nový skript. Tým sa otvorí editor skriptov na ovládacom paneli Tampermonkey.

Predvolená hlavička Tampermonkey alebo komentáre metadát vyzerajú takto:

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

Tieto komentáre k metadátam obsahujú kľúčové informácie o názve používateľského skriptu, zamýšľanom účele a povoleniach a informujú Tampermonkey, kedy má skript spustiť.

V tejto príručke sa zameriame na @zápas direktíva, známa ako metadáta uložené. Tampermonkey používa túto direktívu na zabezpečenie toho, aby sa používateľský skript použil iba na konkrétnu webovú stránku alebo webové stránky. V tomto prípade sa nasledujúci používateľský skript spustí iba na stránke example.com (nahraďte adresu URL webovej lokality podľa svojich požiadaviek) a na všetkých jej stránkach.

Napísanie používateľského skriptu na pridanie tlačidla zdieľania WhatsApp

Na konci každého článku MakeUseOf nájdete miniaplikáciu na zdieľanie pre rôzne platformy sociálnych médií okrem WhatsApp. Aj keď môžete skopírovať a prilepiť adresu URL, tlačidlo zdieľania WhatsApp je užitočné, ak často zdieľate články vo svojej skupine WhatsApp.

Môžete vytvoriť užívateľský skript v Tampermonkey a pridať tlačidlo zdieľania WhatsApp na konci článku. Tlačidlo začleníme do existujúceho zdieľacieho widgetu, ktorý vám umožní zdieľať adresu URL webovej stránky s vašimi kontaktmi WhatsApp.

Začnime vytvorením základného tlačidla zdieľania WhatsApp.

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

Teraz, keď máme základné tlačidlo zdieľania WhatsApp, pridajte k nemu nejaký štýl. To dá tlačidlu farbu pozadia a textu, orámovanie, výplň a štýl kurzora. S trochou majstrovania môžete zmeniť vlastnosti tlačidla, aby ste doladili vzhľad.

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

Keď je tlačidlo pripravené, je čas ho otestovať. Ale kam ho umiestnite? Ako bežná prax je často tlačidlo zdieľania umiestnené na konci článkov.

V tomto prípade však už na konci každého článku máme widget na zdieľanie. Preto je ideálne, aby sa toto tlačidlo zdieľania stalo súčasťou widgetu.

Za týmto účelom skontrolujeme existujúci widget zdieľania, aby sme našli nadradený kontajner, ktorý obsahuje prvky zdieľania, aby sme ho našli v používateľskom skripte. Na webovej stránke stlačte Ctrl + Shift + C otvorte Inspect Element. Potom vyberte prvok widgetu zdieľania na stránke a skontrolujte ho.

Uvidíte, že to je prvok s názvom triedy “zdieľanie dna”. Tento prvok môžete vybrať pomocou querySelector vo vašom užívateľskom skripte.

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

Po výbere prvku doň vložíme tlačidlo zdieľania ako dieťa:

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

Stlačte tlačidlo Ctrl + S na uloženie skriptu. Ak stránku znova načítate, uvidíte tlačidlo zdieľania vložené do existujúcej miniaplikácie zdieľania. Ale kliknutím na to nič neurobíte.

Aby tlačidlo fungovalo, vytvoríme funkciu na generovanie adresy URL zdieľania WhatsApp na základe adresy URL aktuálnej stránky. Ak chcete vrátiť adresu URL stránky, môžete použiť adresu location.href.

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

Ďalej pridajme k tlačidlu prijímač udalostí. Po kliknutí prehliadač otvorí novú kartu s odkazom na zdieľanie WhatsApp, ktorý vám umožní napísať správu.

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

Uložte a spustite Userscript

Keď máte pripravený užívateľský skript, stlačte Ctrl + S aby sa zmeny uložili. Otvor Nainštalované používateľské skripty v Tampermonkey zobrazíte všetky používateľské skripty nainštalované vo vašom prehliadači.

Ak chcete vidieť užívateľský skript v akcii, otvorte cieľovú webovú stránku. Uvidíte zelenú zdieľam tlačidlo. Kliknutím na tlačidlo sa zobrazí výzva na otvorenie pracovnej plochy WhatsApp za predpokladu, že máte nainštalovanú aplikáciu. Potom môžete vybrať kontakt zo zoznamu, ktorému chcete poslať odkaz na článok.

Skript môžete ďalej upravovať a pridať ďalšie vylepšenia. Môžete napríklad zobraziť ikonu WhatsApp na tlačidle alebo zmeniť jej umiestnenie pomocou funkcie InsertAfter().

Jednotlivé používateľské skripty môžete povoliť, zakázať alebo upraviť z ovládacieho panela Tampermonkey. Prípadne kliknite na ikonu Tampermonkey na paneli s nástrojmi a zakážte všetky aktívne používateľské skripty naraz.

Trvalá kontrola zmien prvkov pomocou Tampermonkey

Tampermonkey je jedným z mnohých dostupných manažérov používateľských skriptov, ktorí vám umožňujú upravovať webové stránky, aby ste zlepšili zážitok z prehliadania. Malé úpravy môžu pomôcť k lepšej dostupnosti a opraviť drobné nepríjemnosti s vašou obľúbenou webovou stránkou.

Skôr ako začnete písať skript, skontrolujte, či už neexistuje skript od iných používateľov. Buďte však opatrní pri inštalácii používateľských skriptov tretích strán z neznámych zdrojov, aby ste sa vyhli škodlivému kódu.