Kā padarīt elementu pārbaudes pastāvīgas izmaiņas jūsu pārlūkprogrammā, izmantojot Tampermonkey

Funkcija Pārbaudīt elementu jūsu tīmekļa pārlūkprogrammā ir izstrādātāja rīks, kas ļauj mainīt vietnes priekšgala aspektus, tostarp HTML, CSS un JavaScript, un veikt pagaidu izmaiņas. Varat arī paveikt daudz vairāk, izmantojot Inspect Element. Tomēr visas izmaiņas tiek zaudētas pēc atsvaidzināšanas.

Taču dažkārt, iespējams, vēlēsities saglabāt izmaiņas ilgāku laiku vai pievienot papildu funkcijas, lai uzlabotu lietotāja pieredzi. Viens no veidiem, kā padarīt Inspect Element izmaiņas pastāvīgas, ir Tampermonkey paplašinājuma izmantošana. Tas ļauj tīmekļa lapām pievienot pielāgotus skriptus, padarot izmaiņas vietējā datorā pastāvīgas.

Apskatīsim, kā izmantot Tampermonkey, lai veiktu pārbaudes elementa izmaiņas jūsu vietējā pārlūkprogrammā.

Kas ir Tampermonkey un kā to instalēt?

Tampermonkey, lietotāja skriptu pārvaldnieks, ir populārs pārlūkprogrammas paplašinājums, kas pieejams visām lielākajām tīmekļa pārlūkprogrammām, tostarp Chrome, Edge, Opera Next un Firefox. Tas ļauj izveidot un palaist pielāgotus un esošus lietotāja skriptus, lai modificētu tīmekļa lapas, lai tās labotu vai uzlabotu.

Tajā ir arī lietotāju skriptu bibliotēka, ko izveidojuši citi Tampermonkey lietotāji. Piemēram, varat izmantot vietējā YouTube lejupielādētāja lietotāja skriptu, lai lejupielādējiet YouTube videoklipus, izmantojot Tampermonkey vai skatieties atzīmētos YouTube videoklipus, nepiesakoties.

Paplašinājums palaiž saglabātos lietotāja skriptus, tiklīdz tiek ielādēta norādītā tīmekļa lapa, tādējādi paredzot, ka paredzētās izmaiņas šķiet pastāvīgas.

Pirms sākam rakstīt skriptu, jums būs jāinstalē Tampermonkey. Tātad, sāksim ar paplašinājuma instalēšanu:

1. Dodieties uz Tampermonkey oficiālā lapa. Tas automātiski noteiks jūsu tīmekļa pārlūkprogrammu. Ja nē, noklikšķiniet uz jebkuras cilnes pārlūkprogrammās Chrome, Microsoft Edge, Firefox, Safari un Opera atkarībā no izmantotās pārlūkprogrammas.
2. Iekš Lejupielādēt sadaļā noklikšķiniet uz Saņemiet no veikala. Jūs tiksit novirzīts uz pārlūkprogrammas interneta veikalu.
3. Klikšķiniet uz Uzstādīt lai pārlūkprogrammai pievienotu paplašinājumu. Izpildiet visus ekrānā redzamos norādījumus, lai pabeigtu instalēšanu.

Ja jūsu pārlūkprogramma nav sarakstā, bet jūs izmantojat Chromium pārlūkprogrammu, jums vajadzētu būt iespējai instalēt šo paplašinājumu no Chrome veikals.

Pēc instalēšanas varat sākt rakstīt pielāgotus lietotāja skriptus, izmantojot JavaScript, lai veiktu paredzētās izmaiņas jebkurā vietnē. Lieki piebilst, ka jums būs nepieciešamas pamatzināšanas par HTML, CSS un JavaScript, lai rakstītu lietotāja skriptu un veiktu izmaiņas, izmantojot Tampermonkey.

Lai demonstrētu Tampermonkey iespējas, mēs uzrakstīsim skriptu, lai pievienotu WhatsApp kopīgošanas pogu, lai kopīgotu rakstu saites ar jūsu WhatsApp kontaktpersonām.

Kas jāņem vērā pirms vietnes elementu izmaiņu veikšanas

Veicot izmaiņas jebkurā vietnē, ir svarīgi ievērot tās politikas par trešo pušu JavaScript izmantošanu. Nemēģiniet patvaļīgi palaist lietotāja skriptus nevienā vietnē, it īpaši, ja strādājat ar sensitīviem datiem.

Lai gan Tampermonkey palīdz mainīt vietnes izskatu un pievienot funkcionalitāti, visas izmaiņas ir redzamas tikai lokāli jūsu pārlūkprogrammā un neietekmē avotu.

Darba sākšana ar Tampermonkey

Kad esat izplānojis izmaiņas, kuras vēlaties veikt tīmekļa lapā, varat sākt rakstīt skriptu. Jaunus lietotāja skriptus var izveidot no rīkjoslas vai Tampermonkey informācijas paneļa.

Lai izveidotu jaunu skriptu, noklikšķiniet uz Paplašinājumi ikonu pārlūkprogrammas rīkjoslā un atlasiet Tamperpērtiķis. Tālāk atlasiet Izveidojiet jaunu skriptu. Tas atvērs skriptu redaktoru Tampermonkey informācijas panelī.

Noklusējuma Tampermonkey galvene vai metadatu komentāri izskatās šādi:

// ==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 metadatu komentāri ietver būtisku informāciju par lietotāja skripta nosaukumu, paredzēto mērķi un atļaujām, kā arī norāda Tampermonkey, kad izpildīt skriptu.

Šajā rokasgrāmatā mēs koncentrēsimies uz @match direktīva jeb metadati iesniegti. Tampermonkey izmanto šo direktīvu, lai nodrošinātu, ka lietotāja skripts tiek lietots tikai konkrētai vietnei vai tīmekļa lapām. Šajā gadījumā tālāk norādītais lietotāja skripts darbosies tikai vietnē example.com (aizstāt vietnes URL atbilstoši jūsu prasībām) un visās tā lapās.

Lietotāja skripta rakstīšana, lai pievienotu WhatsApp kopīgošanas pogu

Katra MakeUseOf raksta beigās jūs atradīsiet koplietošanas logrīku dažādām sociālo mediju platformām, izņemot WhatsApp. Lai gan varat kopēt un ielīmēt URL, WhatsApp kopīgošanas poga ir noderīga, ja bieži kopīgojat rakstus savā WhatsApp grupā.

Tampermonkey varat izveidot lietotāja skriptu, lai raksta beigās pievienotu WhatsApp kopīgošanas pogu. Mēs integrēsim pogu esošajā koplietošanas logrīkā, kas ļaus jums koplietot tīmekļa lapas URL ar jūsu WhatsApp kontaktpersonām.

Sāksim ar pamata WhatsApp kopīgošanas pogas izveidi.

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

Tagad, kad mums ir pamata WhatsApp kopīgošanas poga, pievienosim tai stilu. Tas piešķirs pogai fona un teksta krāsu, apmali, polsterējumu un kursora stilu. Nedaudz piestrādājot, varat mainīt pogu rekvizītus, lai precīzi noregulētu izskatu.

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

Kad poga ir gatava, ir pienācis laiks to pārbaudīt. Bet kur jūs to ievietojat? Kā ierasts, bieži kopīgošanas poga tiek ievietota rakstu beigās.

Tomēr šajā gadījumā mums jau ir koplietošanas logrīks katra raksta beigās. Tāpēc ir ideāli šo kopīgošanas pogu padarīt par logrīka daļu.

Lai to izdarītu, mēs pārbaudīsim esošo koplietošanas logrīku, lai atrastu vecākkonteineru, kurā ir koplietošanas elementi, lai to atrastu lietotāja skriptā. Tīmekļa lapā nospiediet Ctrl + Shift + C lai atvērtu Pārbaudīt elementu. Pēc tam lapā atlasiet koplietošanas logrīka elementu, lai to pārbaudītu.

Jūs redzēsiet, ka tas ir elements ar klases nosaukumu "koplietošanas apakšā”. Šo elementu var atlasīt, izmantojot querySelector metodi savā lietotāja skriptā.

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

Pēc elementa atlasīšanas ievietosim tajā kopīgošanas pogu kā bērnu:

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

Nospiediet Ctrl+S lai saglabātu skriptu. Ja atkārtoti ielādējat lapu, esošajā kopīgošanas logrīkā tiks ievietota kopīgošanas poga. Bet noklikšķinot uz tā, tas neko nedos.

Lai poga darbotos, mēs izveidosim funkciju WhatsApp koplietošanas URL ģenerēšanai, pamatojoties uz pašreizējās lapas URL. Varat izmantot location.href, lai atgrieztu lapas URL.

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

Pēc tam pievienosim pogai notikumu uztvērēju. Noklikšķinot, pārlūkprogramma atvērs jaunu cilni ar WhatsApp kopīgošanas saiti, kas ļauj rakstīt ziņojumu.

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

Saglabājiet un palaidiet lietotāja skriptu

Kad lietotāja skripts ir gatavs, nospiediet Ctrl+S lai saglabātu izmaiņas. Atveriet Instalēti lietotāja skripti cilnē Tampermonkey, lai skatītu visus jūsu pārlūkprogrammā instalētos lietotāja skriptus.

Lai redzētu lietotāja skriptu darbībā, atveriet mērķa tīmekļa lapu. Jūs redzēsit zaļu Dalīties pogu. Noklikšķinot uz pogas, tiks piedāvāts atvērt WhatsApp darbvirsmu, ja lietotne ir instalēta. Pēc tam varat atlasīt kontaktpersonu no saraksta, lai nosūtītu raksta saiti.

Varat vēl vairāk modificēt skriptu, lai pievienotu papildu uzlabojumus. Piemēram, uz pogas varat parādīt WhatsApp ikonu vai mainīt tās izvietojumu, izmantojot funkciju InsertAfter().

Tampermonkey informācijas panelī varat iespējot, atspējot vai rediģēt atsevišķus lietotāja skriptus. Vai arī noklikšķiniet uz Tampermonkey ikonas rīkjoslā, lai vienlaikus atspējotu visus aktīvos lietotāja skriptus.

Pārbaudes elementu izmaiņu pastāvīga padarīšana, izmantojot Tampermonkey

Tampermonkey ir viens no daudzajiem pieejamajiem lietotāja skriptu pārvaldniekiem, kas ļauj modificēt tīmekļa lapas, lai uzlabotu pārlūkošanas pieredzi. Nelielas modifikācijas var palīdzēt uzlabot pieejamību un novērst nelielas nepatikšanas ar iecienītāko vietni.

Pirms sākat rakstīt skriptu, pārbaudiet, vai citu lietotāju skripts jau nepastāv. Tomēr esiet piesardzīgs, instalējot trešo pušu lietotāja skriptus no nezināmiem avotiem, lai izvairītos no ļaunprātīga koda.