Home-theater-designers
A webböngészőjének Elemvizsgá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.
A nap MUO videója GÖRGESS A TARTALOM FOLYTATÁSHOZ
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:
- 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.
- 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.
- 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 alapszintű HTML-, CSS- és JavaScript-ismeretekre 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/*
// @grant none
// ==/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ékáról és engedélyeiről, és közlik a Tampermonkey-vel, 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 Az elem kiválasztása után illesszük be hozzá gyermekként a megosztás gombot: 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. 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. 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. 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.hogyan lehet letölteni az összes facebook fotót
const sharingDiv = document.querySelector ('div.sharing.bottom');if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}
function generateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return `https://api.whatsapp.com/send?text=${pageURL}`;
}Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
}); Mentse és futtassa a felhasználói parancsfájlt
Az elem-ellenőrzési módosítások véglegessé tétele Tampermonkey használatával