Home-theater-designers
Teie veebibrauseri funktsioon Inspect Element on arendaja tööriist, mis võimaldab teil muuta veebisaidi esiosa aspekte, sealhulgas HTML-i, CSS-i ja JavaScripti, ning teha ajutisi muudatusi. Samuti saate Inspect Elementiga teha palju rohkem. Kõik muudatused lähevad aga pärast värskendamist kaotsi.
MUO päeva video SISUGA JÄTKAMISEKS KERIMISE
Kuid mõnikord võite soovida jätta muudatused pikemaks ajaks alles või lisada kasutajakogemuse parandamiseks lisafunktsioone. Üks võimalus Inspect Elementi muudatuste püsivaks muutmiseks on Tampermonkey laienduse kasutamine. See võimaldab teil lisada veebilehtedele kohandatud skripte, muutes muudatused teie kohalikus masinas püsivaks.
Vaatame, kuidas kasutada Tampermonkeyt, et muuta kontrollielemendi muudatused teie kohalikus brauseris püsivaks.
Mis on Tampermonkey ja kuidas seda installida?
Tampermonkey, kasutajaskriptide haldur, on populaarne brauserilaiendus, mis on saadaval kõigi suuremate veebibrauserite jaoks, sealhulgas Chrome, Edge, Opera Next ja Firefox. See võimaldab teil luua ja käitada kohandatud ja olemasolevaid kasutajaskripte, et muuta veebilehti nende parandamiseks või täiustamiseks.
Sellel on ka teiste Tampermonkey kasutajate loodud kasutajaskriptide teek. Näiteks saate kohaliku YouTube'i allalaadija kasutajaskripti kasutada YouTube'i videote allalaadimine Tampermonkey abil või vaadake märgistatud YouTube'i videoid sisse logimata .
minu iPhone'i kodunupp ei tööta
Laiendus käivitab salvestatud kasutajaskriptid kohe, kui määratud veebileht laadib, muutes kavandatud muudatused püsivaks.
Enne skripti kirjutamise alustamist peate installima Tampermonkey. Niisiis, alustame laienduse installimisega:
- Mine lehele Tampermonkey ametlik leht . See tuvastab teie veebibrauseri automaatselt. Kui ei, klõpsake mis tahes vahekaardil Chrome'i, Microsoft Edge'i, Firefoxi, Safari ja Opera, olenevalt kasutatavast brauserist.
- Aastal Lae alla jaotises klõpsake nuppu Hangi poest . Teid suunatakse teie brauseri veebipoodi.
- Kliki Installige laienduse brauserisse lisamiseks. Installimise lõpuleviimiseks järgige ekraanil kuvatavaid juhiseid.
Kui teie brauserit pole loendis, kuid kasutate Chromiumi brauserit, peaksite saama selle laienduse installida saidilt Chrome'i pood .
Pärast installimist saate alustada kohandatud kasutajaskriptide kirjutamist JavaScripti abil, et teha mis tahes veebisaidil kavandatud muudatusi. Ütlematagi selge, et kasutajaskripti kirjutamiseks ja Tampermonkey abil muudatuste tegemiseks vajate HTML-i, CSS-i ja JavaScripti põhiteadmisi.
Tampermonkey võimaluste demonstreerimiseks kirjutame skripti WhatsAppi jagamisnupu lisamiseks, et jagada artiklite linke teie WhatsAppi kontaktidega.
Mida kaaluda enne veebisaidi elementide muutmist?
Mis tahes veebisaidil muudatuste tegemisel on oluline järgida nende eeskirju kolmandate osapoolte JavaScriptide kasutamise kohta. Ärge püüdke ühelgi veebisaidil suvaliselt kasutajaskripte käivitada, eriti kui tegemist on tundlike andmetega.
Kuigi Tampermonkey aitab teil veebisaidi välimust muuta ja funktsioone lisada, on kõik muudatused nähtavad ainult teie brauseris lokaalselt ega mõjuta allikat.
kuidas teisaldada fotosid iPhone'ist Macbooki
Tampermonkeyga alustamine
Kui olete kavandanud muudatused, mida soovite veebilehel teha, võite alustada skripti kirjutamist. Uusi kasutajaskripte saab luua tööriistaribal või Tampermonkey armatuurlaual.
Uue skripti loomiseks klõpsake nuppu Laiendused ikooni brauseri tööriistaribal ja valige Tampermonkey . Järgmisena valige Looge uus skript . See avab Tampermonkey armatuurlaual skriptiredaktori.
Tampermonkey vaikepäis või metaandmete kommentaarid näevad välja järgmised:
// ==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...
})();Need metaandmete kommentaarid sisaldavad olulist teavet kasutajaskripti nime, kavandatud eesmärgi ja lubade kohta ning ütlevad Tampermonkeyle, millal skripti käivitada.
Selle juhendi puhul keskendume sellele @match direktiiv ehk metaandmed on esitatud. Tampermonkey kasutab seda direktiivi, et tagada kasutajaskripti rakendamine ainult konkreetsele veebisaidile või veebilehtedele. Sel juhul töötab järgmine kasutajaskript ainult saidil example.com (asendage veebisaidi URL vastavalt teie nõudele) ja kõigil selle lehtedel.
Kasutajaskripti kirjutamine WhatsAppi jagamisnupu lisamiseks
Iga MakeUseOfi artikli lõpust leiate jagamisvidina erinevate sotsiaalmeediaplatvormide jaoks, välja arvatud WhatsApp. Kuigi saate URL-i kopeerida ja kleepida, on WhatsAppi jagamisnupp kasulik, kui jagate oma WhatsAppi rühmas sageli artikleid.
Saate Tampermonkeys luua kasutajaskripti, et lisada artikli lõppu WhatsAppi jagamisnupp. Integreerime nupu olemasolevasse jagamisvidinasse, mis võimaldab teil jagada veebilehe URL-i oma WhatsAppi kontaktidega.
Alustame põhilise WhatsAppi jagamisnupu loomisega.
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Nüüd, kui meil on WhatsAppi põhijagamisnupp, lisame sellele veidi stiili. See annab nupule tausta ja teksti värvi, äärise, polsterduse ja kursori stiili. Veidi nokitsedes saate välimuse peenhäälestamiseks nupu omadusi muuta.
//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';
Kui nupp on valmis, on aeg seda testida. Aga kuhu sa selle asetad? Tavapäraselt paigutatakse jagamisnupp sageli artiklite lõppu.
Kuid antud juhul on meil juba iga artikli lõpus jagamisvidin. Seega on ideaalne muuta see jagamisnupp vidina osaks.
Selleks kontrollime olemasolevat jagamisvidinat, et leida jagamiselemente sisaldav emakonteiner, et leida see kasutajaskriptis. Vajutage veebilehel Ctrl + tõstuklahv + C et avada Inspect Element. Järgmisena valige lehel jagamise vidina element selle kontrollimiseks.
Näete, et see on Pärast elemendi valimist sisestame sellele lapsena jagamisnupu: Vajutage Ctrl + S skripti salvestamiseks. Kui laadite lehe uuesti, näete olemasolevasse jagamisvidinasse sisestatud jagamisnuppu. Kuid sellel klõpsamine ei tee midagi. Nupu toimimiseks loome funktsiooni, mis loob praeguse lehe URL-i põhjal WhatsAppi jagamise URL-i. Lehe URL-i tagastamiseks saate kasutada faili location.href. Järgmisena lisame nupule sündmuste kuulaja. Kui klõpsate, avab brauser uue vahekaardi WhatsAppi jagamislingiga, mis võimaldab teil sõnumit koostada. Kui kasutajaskript on valmis, vajutage Ctrl + S muudatuste salvestamiseks. Ava Installitud kasutajaskriptid vahekaart Tampermonkey, et vaadata kõiki teie brauserisse installitud kasutajaskripte. Kasutajaskripti töös nägemiseks avage sihtveebileht. Näete rohelist Jaga nuppu. Nupul klõpsates palutakse teil avada WhatsAppi töölaud, eeldusel, et rakendus on installitud. Seejärel saate artikli lingi saatmiseks valida loendist kontakti. Täienduste lisamiseks saate skripti veelgi muuta. Näiteks saate kuvada nupul WhatsAppi ikooni või muuta selle paigutust funktsiooni InsertAfter() abil. Saate lubada, keelata või muuta üksikuid kasutajaskripte Tampermonkey armatuurlaual. Teise võimalusena klõpsake tööriistaribal Tampermonkey ikooni, et keelata kõik aktiivsed kasutajaskriptid korraga. Tampermonkey on üks paljudest saadaolevatest kasutajaskriptide halduritest, mis võimaldavad teil sirvimiskogemuse parandamiseks veebilehti muuta. Väikesed muudatused võivad aidata teie lemmikveebisaidil paremat ligipääsetavust ja parandada väiksemaid tüütusi. Enne skripti kirjutamise alustamist kontrollige, kas teiste kasutajate skript on juba olemas. Pahatahtliku koodi vältimiseks olge siiski ettevaatlik tundmatutest allikatest pärit kolmandate osapoolte kasutajaskriptide installimisel.const sharingDiv = document.querySelector ('div.sharing.bottom');if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}mis on nutikas teler?
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');
}); Salvestage ja käivitage kasutajaskript
Kontrolli elementide muudatuste muutmine Tampermonkey abil püsivaks