Hogyan teheti állandóvá az elemek ellenőrzését a böngészőben a Tampermonkey segítségével

A webböngészőjének Elem vizsgálata funkciója egy fejlesztői eszköz, amellyel módosíthatja a webhelyek kezelőfelületi jellemzőit, beleértve a HTML-t, a CSS-t és a JavaScriptet, valamint ideiglenes módosításokat hajthat végre. Az Inspect Element segítségével sokkal többet is megtehet. Frissítés után azonban minden változtatás elvész.

Néha azonban érdemes lehet hosszabb ideig megtartani a változtatásokat, vagy további funkciókat kell hozzáadni a felhasználói élmény javítása érdekében. Az Inspect Element változtatások véglegessé tételének egyik módja a Tampermonkey kiterjesztés használata. Lehetővé teszi egyéni szkriptek hozzáadását a weboldalakhoz, így a változtatások állandóvá válnak a helyi gépen.

Nézzük meg, hogyan használhatjuk a Tampermonkey-t az ellenőrzési elemek változásainak állandóvá tételére a helyi böngészőben.

Mi az a Tampermonkey és hogyan telepíthető?

A Tampermonkey, egy felhasználói szkriptkezelő, egy népszerű böngészőbővítmény, amely minden nagyobb webböngészőhöz elérhető, beleértve a Chrome-ot, az Edge-t, az Opera Next-et és a Firefoxot. Lehetővé teszi egyéni és meglévő felhasználói szkriptek létrehozását és futtatását a weboldalak módosításához azok javítása vagy javítása érdekében.

Tartalmaz egy felhasználói szkript-könyvtárat is, amelyet más Tampermonkey-felhasználók hoztak létre. Használhatja például a Helyi YouTube Downloader felhasználói szkriptet a töltsön le YouTube-videókat a Tampermonkey segítségével vagy megjelölt YouTube-videók megtekintése bejelentkezés nélkül.

A kiterjesztés a megadott weboldal betöltésekor azonnal futtatja a mentett felhasználói szkripteket, így a tervezett változtatások véglegesnek tűnnek.

Mielőtt elkezdené írni a szkriptet, telepítenie kell a Tampermonkey-t. Tehát kezdjük a bővítmény telepítésével:

1. Menj a Tampermonkey hivatalos oldala. Ez automatikusan felismeri a webböngészőt. Ha nem, kattintson a Chrome, a Microsoft Edge, a Firefox, a Safari és az Opera bármelyik lapjára, a használt böngészőtől függően.
2. Ban,-ben Letöltés szakaszban kattintson a gombra Szerezd be a Store-ból. A rendszer átirányítja a böngésző webáruházába.
3. Kattintson Telepítés hogy hozzáadja a bővítményt a böngészőhöz. A telepítés befejezéséhez kövesse a képernyőn megjelenő utasításokat.

Ha böngészője nem szerepel a listában, de Chromium böngészőt használ, akkor képesnek kell lennie arra, hogy telepítse ezt a bővítményt a következőről: Chrome Store.

A telepítés után elkezdhet egyéni felhasználói szkripteket írni JavaScript használatával, hogy bármilyen webhelyen elvégezze a kívánt módosításokat. Mondanom sem kell, hogy a felhasználói szkript megírásához és a Tampermonkey használatával történő módosításokhoz a HTML, a CSS és a JavaScript alapszintű ismeretére lesz szüksége.

A Tampermonkey képességeinek bemutatása érdekében írunk egy szkriptet, amely hozzáad egy WhatsApp-megosztási gombot, amellyel cikklinkeket oszthat meg WhatsApp-kapcsolattartóival.

Mit kell figyelembe venni a webhely elemeinek módosítása előtt

Bármely webhelyen végrehajtott módosítások során fontos, hogy tartsák tiszteletben a harmadik fél JavaScript-kódjainak használatára vonatkozó irányelveiket. Ne próbáljon meg önkényesen futtatni felhasználói szkripteket egyetlen webhelyen sem, különösen akkor, ha érzékeny adatokkal foglalkozik.

Míg a Tampermonkey segít a webhely megjelenésének módosításában és funkciók hozzáadásával, az összes módosítás csak helyileg látható a böngészőben, és nincs hatással a forrásra.

A Tampermonkey használatának megkezdése

Miután megtervezte a weboldalon végrehajtani kívánt módosításokat, elkezdheti írni a szkriptet. Új felhasználói szkriptek hozhatók létre az eszköztárról vagy a Tampermonkey irányítópultjáról.

Új szkript létrehozásához kattintson a gombra Kiterjesztések ikont a böngésző eszköztárában, és válassza ki Tampermajom. Ezután válassza ki Hozzon létre egy új szkriptet. Ezzel megnyílik egy szkriptszerkesztő a Tampermonkey irányítópultján.

Az alapértelmezett Tampermonkey fejléc vagy metaadat-megjegyzések így néznek ki:

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

Ezek a metaadat-megjegyzések fontos információkat tartalmaznak a felhasználói szkript nevéről, szándékolt céljáról és engedélyeiről, és megmondják a Tampermonkey-nak, hogy mikor kell végrehajtania a szkriptet.

Ebben az útmutatóban a következőkre fogunk összpontosítani @mérkőzés direktíva, más néven metaadatok. A Tampermonkey ezt az irányelvet használja annak biztosítására, hogy a felhasználói szkriptet csak egy adott webhelyre vagy weboldalakra alkalmazzák. Ebben az esetben a következő felhasználói szkript csak az example.com webhelyen fut (cserélje ki a webhely URL-címét az Ön igényei szerint) és annak összes oldalán.

Felhasználói parancsfájl írása WhatsApp megosztási gomb hozzáadásához

Minden MakeUseOf cikk végén találsz egy megosztási widgetet különféle közösségi média platformokhoz, kivéve a WhatsApp-ot. Bár az URL-t másolhatja és beillesztheti, a WhatsApp megosztási gombja hasznos lehet, ha gyakran oszt meg cikkeket a WhatsApp csoportjában.

Létrehozhat felhasználói szkriptet a Tampermonkey-ban, és hozzáadhat egy WhatsApp megosztási gombot a cikk végéhez. A gombot integráljuk a meglévő megosztási widgetbe, amely lehetővé teszi a weboldal URL-címének megosztását WhatsApp-névjegyeivel.

Kezdjük egy alapvető WhatsApp megosztási gomb létrehozásával.

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

Most, hogy van egy alapvető WhatsApp megosztási gombunk, adjunk hozzá néhány stílust. Ezzel megadja a gomb háttér- és szövegszínét, szegélyét, kitöltését és kurzorstílusát. Egy kis trükközéssel megváltoztathatja a gomb tulajdonságait a megjelenés finomhangolásához.

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

Ha készen van a gomb, ideje kipróbálni. De hova teszed? Gyakori gyakorlat, hogy a megosztás gomb gyakran a cikkek végére kerül.

Ebben az esetben azonban már minden cikk végén található egy megosztási widget. Ideális tehát ezt a megosztási gombot a widget részévé tenni.

Ehhez megvizsgáljuk a meglévő megosztási widgetet, hogy megtaláljuk a megosztási elemeket tartalmazó szülőtárolót, és megkeressük azt a felhasználói parancsfájlban. A weboldalon nyomja meg a gombot Ctrl + Shift + C az Inspect Element megnyitásához. Ezután válassza ki a megosztási widget elemet az oldalon az ellenőrzéshez.

Látni fogja, hogy ez egy elem az osztálynévvel "megosztás alsó”. Ezt az elemet a gombbal választhatja ki querySelector módszert a felhasználói szkriptben.

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

Az elem kiválasztása után illesszük be hozzá gyermekként a megosztás gombot:

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

nyomja meg Ctrl + S a szkript mentéséhez. Ha újratölti az oldalt, egy megosztási gombot fog látni a meglévő megosztási modulba beillesztve. De ha rákattint, az nem csinál semmit.

A gomb működéséhez létrehozunk egy függvényt, amely az aktuális oldal URL-címe alapján létrehoz egy WhatsApp megosztási URL-t. A location.href használatával visszaadhatja az oldal URL-jét.

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

Ezután adjunk hozzá egy eseményfigyelőt a gombhoz. Ha rákattint, a böngésző egy új lapot nyit meg egy WhatsApp megosztási hivatkozással, amely lehetővé teszi az üzenet írását.

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

Mentse és futtassa a felhasználói parancsfájlt

Ha elkészült a felhasználói szkript, nyomja meg a gombot Ctrl + S a változtatások mentéséhez. Nyissa meg a Telepített felhasználói szkriptek fület a Tampermonkey-ban, hogy megtekinthesse a böngészőjére telepített összes felhasználói szkriptet.

A felhasználói szkript működésének megtekintéséhez nyissa meg a cél weboldalt. zöldet fogsz látni Ossza meg gomb. A gombra kattintva meg kell nyitnia a WhatsApp asztalt, feltéve, hogy az alkalmazás telepítve van. Ezután kiválaszthatja a névjegyet a listából a cikk hivatkozásának elküldéséhez.

A szkriptet tovább módosíthatja további fejlesztések hozzáadásához. Például megjelenítheti a WhatsApp ikont a gombon, vagy megváltoztathatja az elhelyezését az InsertAfter() függvény segítségével.

A Tampermonkey irányítópultján engedélyezheti, letilthatja vagy szerkesztheti az egyes felhasználói szkripteket. Másik megoldásként kattintson a Tampermonkey ikonra az eszköztáron az összes aktív felhasználói szkript egyidejű letiltásához.

Az elem-ellenőrzési módosítások véglegessé tétele Tampermonkey használatával

A Tampermonkey egyike a számos elérhető felhasználói parancsfájl-kezelőnek, amely lehetővé teszi a weboldalak módosítását a böngészési élmény javítása érdekében. A kis módosítások elősegíthetik a jobb hozzáférhetőséget és kijavíthatják kedvenc webhelye kisebb kellemetlenségeit.

Mielőtt elkezdené írni a szkriptet, ellenőrizze, hogy létezik-e már más felhasználóktól származó szkript. A rosszindulatú kódok elkerülése érdekében azonban ügyeljen arra, hogy ismeretlen forrásból származó, harmadik féltől származó felhasználói szkripteket telepítsen.