Kaip užtikrinti, kad elementų tikrinimo pakeitimai būtų nuolatiniai jūsų naršyklėje naudojant Tampermonkey

Jūsų žiniatinklio naršyklės funkcija Apžiūrėti elementą yra kūrėjo įrankis, leidžiantis keisti pagrindinius svetainės aspektus, įskaitant HTML, CSS ir JavaScript, ir atlikti laikinus pakeitimus. Taip pat galite padaryti daug daugiau naudodami „Inspect Element“. Tačiau po atnaujinimo visi pakeitimai prarandami.

Tačiau kartais galbūt norėsite palikti pakeitimus ilgesnį laiką arba pridėti papildomų funkcijų, kad pagerintumėte vartotojo patirtį. Vienas iš būdų, kaip patikrinti elemento pakeitimus nuolatiniais, yra naudoti Tampermonkey plėtinį. Tai leidžia į tinklalapius įtraukti pasirinktinius scenarijus, todėl vietiniame kompiuteryje pakeitimai tampa nuolatiniai.

Pažiūrėkime, kaip naudoti Tampermonkey, kad tikrinimo elemento pakeitimai vietinėje naršyklėje būtų nuolatiniai.

Kas yra Tampermonkey ir kaip jį įdiegti?

Tampermonkey, vartotojo scenarijų tvarkyklė, yra populiarus naršyklės plėtinys, prieinamas visoms pagrindinėms žiniatinklio naršyklėms, įskaitant Chrome, Edge, Opera Next ir Firefox. Tai leidžia kurti ir paleisti pasirinktinius ir esamus vartotojo scenarijus, kad galėtumėte keisti tinklalapius ir juos pataisyti ar patobulinti.

Jame taip pat yra vartotojo scenarijų biblioteka, kurią sukūrė kiti Tampermonkey vartotojai. Pavyzdžiui, galite naudoti vietinį „YouTube Downloader“ vartotojo scenarijų Atsisiųskite „YouTube“ vaizdo įrašus naudodami „Tampermonkey“. arba žiūrėti pažymėtus „YouTube“ vaizdo įrašus neprisijungę.

Plėtinys paleidžia išsaugotus vartotojo scenarijus, kai tik įkeliamas nurodytas tinklalapis, todėl numatyti pakeitimai atrodo nuolatiniai.

Prieš pradėdami rašyti scenarijų, turėsite įdiegti Tampermonkey. Taigi, pradėkime nuo plėtinio diegimo:

1. Eikite į Tampermonkey oficialus puslapis. Jis automatiškai aptiks jūsų žiniatinklio naršyklę. Jei ne, spustelėkite bet kurį „Chrome“, „Microsoft Edge“, „Firefox“, „Safari“ ir „Opera“ skirtuką, atsižvelgdami į naudojamą naršyklę.
2. Viduje parsisiųsti skyrių, spustelėkite Gaukite iš parduotuvės. Būsite nukreipti į naršyklės internetinę parduotuvę.
3. Spustelėkite Diegti Norėdami pridėti plėtinį prie savo naršyklės. Vykdykite visas ekrane pateikiamas instrukcijas, kad užbaigtumėte diegimą.

Jei jūsų naršyklės sąraše nėra, bet naudojate „Chromium“ naršyklę, turėtumėte turėti galimybę įdiegti šį plėtinį iš „Chrome“ parduotuvė.

Įdiegę galite pradėti rašyti pasirinktinius vartotojo scenarijus naudodami „JavaScript“, kad atliktumėte numatytus bet kurios svetainės pakeitimus. Nereikia nė sakyti, kad norint parašyti vartotojo scenarijų ir atlikti pakeitimus naudojant Tampermonkey, jums reikės pagrindinių HTML, CSS ir JavaScript supratimo.

Norėdami parodyti Tampermonkey galimybes, parašysime scenarijų, kad pridėtume WhatsApp bendrinimo mygtuką, kad bendrintume straipsnių nuorodas su jūsų WhatsApp kontaktais.

Į ką reikia atsižvelgti prieš keičiant svetainės elementus

Atliekant bet kurios svetainės pakeitimus, svarbu laikytis trečiųjų šalių JavaScript naudojimo taisyklių. Nemėginkite savavališkai paleisti vartotojo scenarijų jokioje svetainėje, ypač kai dirbate su neskelbtinais duomenimis.

Nors Tampermonkey padeda keisti svetainės išvaizdą ir pridėti funkcionalumo, visi pakeitimai matomi tik lokaliai jūsų naršyklėje ir neturi įtakos šaltiniui.

Darbo su Tampermonkey pradžia

Suplanavę pakeitimus, kuriuos norite atlikti tinklalapyje, galite pradėti rašyti scenarijų. Naujus vartotojo scenarijus galima sukurti įrankių juostoje arba Tampermonkey prietaisų skydelyje.

Norėdami sukurti naują scenarijų, spustelėkite Plėtiniai piktogramą naršyklės įrankių juostoje ir pasirinkite Tampermonkey. Toliau pasirinkite Sukurkite naują scenarijų. Tai atidarys scenarijaus rengyklę Tampermonkey prietaisų skydelyje.

Numatytoji Tampermonkey antraštė arba metaduomenų komentarai atrodo taip:

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

Šie metaduomenų komentarai apima svarbią informaciją apie vartotojo scenarijaus pavadinimą, numatytą paskirtį ir leidimus ir nurodo Tampermonkey, kada vykdyti scenarijų.

Šiame vadove daugiausia dėmesio skirsime @match direktyva, dar žinoma kaip metaduomenys. Tampermonkey naudoja šią direktyvą siekdama užtikrinti, kad vartotojo scenarijus būtų taikomas tik konkrečiai svetainei ar tinklalapiams. Šiuo atveju šis vartotojo scenarijus veiks tik example.com (pakeiskite svetainės URL pagal jūsų reikalavimą) ir visuose jos puslapiuose.

Vartotojo scenarijaus rašymas, norint pridėti „WhatsApp“ bendrinimo mygtuką

Kiekvieno MakeUseOf straipsnio pabaigoje rasite bendrinimo valdiklį įvairioms socialinės žiniasklaidos platformoms, išskyrus WhatsApp. Nors galite nukopijuoti ir įklijuoti URL, WhatsApp bendrinimo mygtukas yra naudingas, jei dažnai bendrinate straipsnius savo WhatsApp grupėje.

Tampermonkey galite sukurti vartotojo scenarijų, kad straipsnio pabaigoje pridėtumėte WhatsApp bendrinimo mygtuką. Integruosime mygtuką į esamą bendrinimo valdiklį, kuris leis bendrinti tinklalapio URL su savo WhatsApp kontaktais.

Pradėkime nuo pagrindinio „WhatsApp“ bendrinimo mygtuko sukūrimo.

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

Dabar, kai turime pagrindinį „WhatsApp“ bendrinimo mygtuką, pridėkime prie jo stiliaus. Taip mygtukui bus suteikta fono ir teksto spalva, kraštinė, užpildymas ir žymeklio stilius. Šiek tiek padirbėję galite pakeisti mygtukų ypatybes, kad sureguliuotumėte išvaizdą.

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

Kai mygtukas paruoštas, laikas jį išbandyti. Bet kur jį dėti? Kaip įprasta, bendrinimo mygtukas dažnai dedamas straipsnių pabaigoje.

Tačiau šiuo atveju kiekvieno straipsnio pabaigoje jau turime bendrinimo valdiklį. Taigi idealu šį bendrinimo mygtuką padaryti valdiklio dalimi.

Norėdami tai padaryti, patikrinsime esamą bendrinimo valdiklį, kad surastume pagrindinį sudėtinį rodinį, kuriame yra bendrinimo elementai, kad surastume jį vartotojo scenarijuje. Tinklalapyje paspauskite Ctrl + Shift + C norėdami atidaryti Inspect Element. Tada puslapyje pasirinkite bendrinimo valdiklio elementą, kad jį patikrintumėte.

Pamatysite, kad tai yra elementas su klasės pavadinimu “dalijimasis apačioje”. Šį elementą galite pasirinkti naudodami querySelector metodą savo vartotojo scenarijuje.

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

Pasirinkę elementą, įterpkime į jį bendrinimo mygtuką kaip vaikas:

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

Paspauskite Ctrl + S kad išsaugotumėte scenarijų. Jei iš naujo įkelsite puslapį, pamatysite bendrinimo mygtuką, įdėtą į esamą bendrinimo valdiklį. Bet spustelėjus jį nieko nepadarysi.

Kad mygtukas veiktų, sukursime funkciją, kuri sugeneruos WhatsApp bendrinimo URL pagal dabartinio puslapio URL. Norėdami grąžinti puslapio URL, galite naudoti location.href.

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

Tada prie mygtuko pridėkime įvykių klausytoją. Spustelėjus naršyklė atidarys naują skirtuką su „WhatsApp“ bendrinimo nuoroda, leidžiančia sukurti pranešimą.

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

Išsaugokite ir paleiskite vartotojo scenarijų

Kai būsite paruošę vartotojo scenarijų, paspauskite Ctrl + S norėdami išsaugoti pakeitimus. Atidaryk Įdiegti vartotojo scenarijai Tampermonkey skirtuką, kad peržiūrėtumėte visus jūsų naršyklėje įdiegtus vartotojo scenarijus.

Norėdami pamatyti, kaip veikia vartotojo scenarijus, atidarykite tikslinį tinklalapį. Pamatysite žalią Dalintis mygtuką. Spustelėję mygtuką būsite paraginti atidaryti „WhatsApp“ darbalaukį, jei turite įdiegtą programą. Tada galite pasirinkti kontaktą iš sąrašo ir išsiųsti straipsnio nuorodą.

Galite toliau keisti scenarijų, kad pridėtumėte daugiau patobulinimų. Pavyzdžiui, ant mygtuko galite rodyti WhatsApp piktogramą arba pakeisti jos vietą naudodami funkciją InsertAfter().

Tampermonkey prietaisų skydelyje galite įjungti, išjungti arba redaguoti atskirus vartotojo scenarijus. Arba spustelėkite Tampermonkey piktogramą įrankių juostoje, kad iš karto išjungtumėte visus aktyvius vartotojo scenarijus.

Nuolatiniai tikrinimo elementų pakeitimai naudojant Tampermonkey

Tampermonkey yra viena iš daugelio galimų vartotojo scenarijų tvarkyklių, leidžiančių keisti tinklalapius, kad pagerintumėte naršymo patirtį. Nedideli pakeitimai gali padėti pagerinti pasiekiamumą ir pašalinti nedidelius jūsų mėgstamos svetainės trikdžius.

Prieš pradėdami rašyti scenarijų, patikrinkite, ar jau yra kitų vartotojų scenarijus. Tačiau būkite atsargūs diegdami trečiųjų šalių vartotojo scenarijus iš nežinomų šaltinių, kad išvengtumėte kenkėjiško kodo.