Jak zajistit trvalou kontrolu změn prvků ve vašem prohlížeči pomocí Tampermonkey

Funkce Inspect Element ve vašem webovém prohlížeči je vývojářský nástroj, který vám umožňuje upravovat front-endové aspekty webu, včetně HTML, CSS a JavaScript, a provádět dočasné změny. S Inspect Element můžete také dělat mnohem více. Po obnovení se však všechny změny ztratí.

Někdy však možná budete chtít ponechat změny po delší dobu nebo přidat další funkce pro vylepšení uživatelské zkušenosti. Jedním ze způsobů, jak provést změny Inspect Element trvale, je použití rozšíření Tampermonkey. Umožňuje vám přidávat vlastní skripty na webové stránky, takže změny jsou trvalé na vašem místním počítači.

Pojďme se podívat na to, jak použít Tampermonkey, aby změny prvku inspect byly trvalé ve vašem místním prohlížeči.

Co je Tampermonkey a jak jej můžete nainstalovat?

Tampermonkey, správce uživatelských skriptů, je oblíbené rozšíření prohlížeče dostupné pro všechny hlavní webové prohlížeče, včetně Chrome, Edge, Opera Next a Firefox. Umožňuje vám vytvářet a spouštět vlastní a stávající uživatelské skripty pro úpravu webových stránek a jejich opravu nebo vylepšení.

Obsahuje také knihovnu uživatelských skriptů vytvořenou jinými uživateli Tampermonkey. Můžete například použít uživatelský skript Local YouTube Downloader stahujte videa z YouTube pomocí Tampermonkey nebo sledovat nahlášená videa YouTube bez přihlášení.

Rozšíření spouští uložené uživatelské skripty, jakmile se zadaná webová stránka načte, takže zamýšlené změny vypadají trvale.

Než začneme psát skript, budete si muset nainstalovat Tampermonkey. Začněme tedy instalací rozšíření:

1. Přejít na Oficiální stránka Tampermonkey. Automaticky detekuje váš webový prohlížeč. Pokud ne, klikněte na libovolnou kartu v prohlížečích Chrome, Microsoft Edge, Firefox, Safari a Opera v závislosti na prohlížeči, který používáte.
2. V Stažení sekce, klikněte na Získejte z obchodu. Budete přesměrováni do webového obchodu vašeho prohlížeče.
3. Klikněte na Nainstalujte pro přidání rozšíření do vašeho prohlížeče. Dokončete instalaci podle pokynů na obrazovce.

Pokud váš prohlížeč není uveden, ale používáte prohlížeč Chromium, měli byste mít možnost nainstalovat toto rozšíření z Chrome Store.

Po instalaci můžete začít psát vlastní uživatelské skripty pomocí JavaScriptu a provést zamýšlené změny na libovolné webové stránce. Netřeba dodávat, že budete potřebovat základní znalosti HTML, CSS a JavaScript, abyste mohli napsat uživatelský skript a provádět úpravy pomocí Tampermonkey.

Abychom demonstrovali schopnosti Tampermonkey, napíšeme skript pro přidání tlačítka sdílení WhatsApp pro sdílení odkazů na články s vašimi kontakty WhatsApp.

Co je třeba zvážit před provedením úprav prvků webu

Při provádění úprav na jakékoli webové stránce je důležité respektovat jejich zásady týkající se používání JavaScriptů třetích stran. Nepokoušejte se svévolně spouštět uživatelské skripty na jakékoli webové stránce, zejména pokud pracujete s citlivými daty.

Zatímco Tampermonkey vám pomůže upravit vzhled a přidat funkce na webovou stránku, všechny změny jsou viditelné pouze lokálně ve vašem prohlížeči a nemají vliv na zdroj.

Začínáme s Tampermonkey

Jakmile naplánujete úpravy, které chcete na webové stránce provést, můžete začít psát skript. Nové uživatelské skripty lze vytvářet z panelu nástrojů nebo z řídicího panelu Tampermonkey.

Chcete-li vytvořit nový skript, klepněte na Rozšíření ikonu na liště prohlížeče a vyberte Tampermonkey. Dále vyberte Vytvořte nový skript. Tím se otevře editor skriptů na řídicím panelu Tampermonkey.

Výchozí záhlaví Tampermonkey nebo komentáře metadat vypadají 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...
})();

Tyto komentáře k metadatům obsahují zásadní informace o názvu uživatelského skriptu, zamýšleném účelu a oprávněních a informují Tampermonkey, kdy má skript spustit.

V tomto návodu se zaměříme na @zápas směrnice, neboli uložená metadata. Tampermonkey používá tuto direktivu k zajištění toho, že uživatelský skript bude aplikován pouze na konkrétní web nebo webové stránky. V tomto případě se následující uživatelský skript spustí pouze na example.com (nahraďte URL webu podle svého požadavku) a na všech jeho stránkách.

Psaní uživatelského skriptu pro přidání tlačítka sdílení WhatsApp

Na konci každého článku MakeUseOf najdete widget pro sdílení pro různé platformy sociálních médií, kromě WhatsApp. I když můžete zkopírovat a vložit adresu URL, tlačítko sdílení WhatsApp je užitečné, pokud často sdílíte články ve své skupině WhatsApp.

Můžete vytvořit uživatelský skript v Tampermonkey a přidat tlačítko sdílení WhatsApp na konec článku. Tlačítko začleníme do stávajícího widgetu pro sdílení, který vám umožní sdílet adresu URL webové stránky s vašimi kontakty WhatsApp.

Začněme vytvořením základního tlačítka sdílení WhatsApp.

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

Nyní, když máme základní tlačítko sdílení WhatsApp, přidáme k němu nějaký styl. To dá tlačítku jeho pozadí a barvu textu, ohraničení, odsazení a styl kurzoru. S trochou šťourání můžete změnit vlastnosti tlačítka a doladit vzhled.

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

S připraveným tlačítkem je čas jej otestovat. Ale kam to umístíte? Jako běžná praxe je často tlačítko pro sdílení umístěno na konci článků.

V tomto případě však již na konci každého článku máme widget pro sdílení. Ideální je tedy vytvořit toto tlačítko sdílení součástí widgetu.

Za tímto účelem zkontrolujeme existující widget pro sdílení, abychom našli nadřazený kontejner, který obsahuje prvky sdílení, a nalezneme jej v uživatelském skriptu. Na webové stránce stiskněte Ctrl + Shift + C otevřete Inspect Element. Dále vyberte prvek widgetu sdílení na stránce a prohlédněte si jej.

Uvidíte, že to je prvek s názvem třídy "sdílení dna”. Tento prvek můžete vybrat pomocí querySelector metoda ve vašem uživatelském skriptu.

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

Po výběru prvku do něj vložíme tlačítko sdílení jako dítě:

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

lis Ctrl + S pro uložení skriptu. Pokud stránku znovu načtete, uvidíte tlačítko pro sdílení vložené do existujícího widgetu pro sdílení. Ale kliknutím na to nic neuděláte.

Aby tlačítko fungovalo, vytvoříme funkci pro generování adresy URL sdílení WhatsApp na základě adresy URL aktuální stránky. URL stránky můžete vrátit pomocí location.href.

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

Dále k tlačítku přidáme posluchač události. Po kliknutí prohlížeč otevře novou kartu s odkazem pro sdílení WhatsApp, který vám umožní napsat zprávu.

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

Uložte a spusťte uživatelský skript

Jakmile budete mít uživatelský skript připravený, stiskněte Ctrl + S pro uložení změn. Otevři Nainstalované uživatelské skripty v Tampermonkey zobrazíte všechny uživatelské skripty nainstalované ve vašem prohlížeči.

Chcete-li vidět uživatelský skript v akci, otevřete cílovou webovou stránku. Uvidíte zelenou Podíl knoflík. Kliknutím na tlačítko se zobrazí výzva k otevření plochy WhatsApp za předpokladu, že máte nainstalovanou aplikaci. Poté můžete vybrat kontakt ze seznamu, kterému chcete poslat odkaz na článek.

Skript můžete dále upravit a přidat další vylepšení. Můžete například zobrazit ikonu WhatsApp na tlačítku nebo změnit její umístění pomocí funkce InsertAfter().

Jednotlivé uživatelské skripty můžete povolit, zakázat nebo upravit z řídicího panelu Tampermonkey. Případně klikněte na ikonu Tampermonkey na panelu nástrojů a deaktivujte všechny aktivní uživatelské skripty najednou.

Trvalé změny prvků pomocí Tampermonkey

Tampermonkey je jedním z mnoha dostupných správců uživatelských skriptů, které vám umožňují upravovat webové stránky a zlepšit tak váš zážitek z prohlížení. Malé úpravy mohou pomoci k lepší dostupnosti a opravit drobné nepříjemnosti s vaším oblíbeným webem.

Než začnete psát skript, zkontrolujte, zda již neexistuje skript od jiných uživatelů. Buďte však opatrní při instalaci uživatelských skriptů třetích stran z neznámých zdrojů, abyste se vyhnuli škodlivému kódu.