Како учинити да провере промена елемената буду трајне у вашем претраживачу помоћу Тампермонкеи-а

Функција Инспецт Елемент на вашем веб претраживачу је алатка за програмере која вам омогућава да измените фронт-енд аспекте веб локације, укључујући ХТМЛ, ЦСС и ЈаваСцрипт, и да направите привремене промене. Такође можете учинити много више са Инспецт Елемент. Међутим, све промене се губе након освежавања.

Али понекад ћете можда желети да задржите промене на дужи период или да додате додатне функције да бисте побољшали корисничко искуство. Један од начина да учините промене Инспецт Елемент трајним је коришћење Тампермонкеи екстензије. Омогућава вам да додате прилагођене скрипте на веб странице, чинећи промене трајним на вашој локалној машини.

Хајде да погледамо како да користимо Тампермонкеи да би промене елемента прегледа биле трајне у вашем локалном претраживачу.

Шта је Тампермонкеи и како га можете инсталирати?

Тампермонкеи, менаџер корисничких скрипти, је популарно проширење претраживача доступно за све главне веб претраживаче, укључујући Цхроме, Едге, Опера Нект и Фирефок. Омогућава вам да креирате и покренете прилагођене и постојеће корисничке скрипте да бисте модификовали веб странице да бисте их поправили или побољшали.

Такође садржи библиотеку корисничких скрипти коју су креирали други Тампермонкеи корисници. На пример, можете да користите кориснички скрипт Локални ИоуТубе Довнлоадер за преузмите ИоуТубе видео записе користећи Тампермонкеи или гледајте означене ИоуТубе видео снимке без пријављивања.

Екстензија покреће сачуване корисничке скрипте чим се наведена веб страница учита, чиме се намећене промене чине трајним.

Пре него што почнемо да пишемо скрипту, мораћете да инсталирате Тампермонкеи. Дакле, почнимо са инсталирањем екстензије:

1. Иди на Тампермонкеи званична страница. Аутоматски ће открити ваш веб претраживач. Ако не, кликните на било коју картицу из Цхроме-а, Мицрософт Едге-а, Фирефок-а, Сафарија и Опера, у зависности од претраживача који користите.
2. У Преузимање одељак, кликните на Узмите из продавнице. Бићете преусмерени на веб продавницу вашег претраживача.
3. Кликните на Инсталирај да додате екстензију свом претраживачу. Пратите упутства на екрану да бисте довршили инсталацију.

Ако ваш прегледач није наведен, али користите Цхромиум прегледач, требало би да можете да инсталирате ово проширење са Цхроме продавница.

Једном инсталиран, можете почети да пишете прилагођене корисничке скрипте користећи ЈаваСцрипт да бисте направили жељене промене на било којој веб локацији. Непотребно је рећи да ће вам требати основно разумевање ХТМЛ-а, ЦСС-а и ЈаваСцрипт-а да бисте написали кориснички скрипт и извршили измене користећи Тампермонкеи.

Да бисмо демонстрирали могућности Тампермонкеи-а, написаћемо скрипту за додавање дугмета за дељење ВхатсАпп-а да бисте делили везе до чланака са вашим ВхатсАпп контактима.

Шта треба узети у обзир пре него што извршите измене елемената веб локације

Приликом модификације било које веб странице, важно је поштовати њихове смернице о коришћењу ЈаваСцрипт-а трећих страна. Не покушавајте да произвољно покрећете корисничке скрипте на било којој веб локацији, посебно када имате посла са осетљивим подацима.

Док вам Тампермонкеи помаже да измените изглед и додате функционалност веб локацији, све промене су видљиве само локално у вашем претраживачу и не утичу на извор.

Почетак рада са Тампермонкеи-ом

Када планирате измене које желите да направите на веб страници, можете почети да пишете своју скрипту. Нове корисничке скрипте се могу креирати са траке са алаткама или Тампермонкеи контролне табле.

Да бисте креирали нову скрипту, кликните на Екстензије икону на траци са алаткама претраживача и изаберите Тампермонкеи. Затим изаберите Креирајте нову скрипту. Ово ће отворити уређивач скрипте на Тампермонкеи контролној табли.

Подразумевано Тампермонкеи заглавље или коментари метаподатака изгледају овако:

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

Ови коментари метаподатака укључују кључне информације о имену корисничког скрипта, намераваној сврси и дозволама и говоре Тампермонкеи-у када да изврши скрипту.

За овај водич, фокусираћемо се на @меч директива, ака метаподаци. Тампермонкеи користи ову директиву да осигура да се кориснички скрипт примењује само на одређену веб локацију или веб странице. У овом случају, следећа корисничка скрипта ће се покренути само на екампле.цом (замените УРЛ веб-сајта према вашим захтевима) и свим његовим страницама.

Писање корисничког скрипта за додавање дугмета за дељење ВхатсАпп-а

На крају сваког МакеУсеОф чланка, наћи ћете виџет за дељење за различите платформе друштвених медија, осим ВхатсАпп-а. Иако можете да копирате и налепите УРЛ, дугме за дељење ВхатсАпп-а је корисно ако често делите чланке у својој ВхатсАпп групи.

Можете да креирате кориснички скрипт у Тампермонкеи-у да додате дугме за дељење ВхатсАпп-а на крају чланка. Интегрисаћемо дугме у постојећи виџет за дељење који ће вам омогућити да делите УРЛ веб странице са вашим ВхатсАпп контактима.

Почнимо са креирањем основног дугмета за дељење ВхатсАпп-а.

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

Сада када имамо основно дугме за дељење ВхатсАпп-а, додајмо му мало стила. Ово ће дугмету дати позадину и боју текста, ивицу, паддинг и стил курсора. Уз мало петљања, можете променити својства дугмади да бисте фино подесили изглед.

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

Када је дугме спремно, време је да га тестирате. Али где га постављате? Као уобичајена пракса, често се дугме за дељење налази на крају чланака.

Међутим, у овом случају већ имамо виџет за дељење на крају сваког чланка. Дакле, идеално је да ово дугме за дељење буде део виџета.

Да бисмо то урадили, прегледаћемо постојећи виџет за дељење да бисмо пронашли родитељски контејнер који садржи елементе за дељење да бисмо га лоцирали у корисничком скрипту. На веб страници притисните Цтрл + Схифт + Ц да бисте отворили Инспецт Елемент. Затим изаберите елемент виџета за дељење на страници да бисте га прегледали.

Видећете да је то елемент са именом класе “дељење дна”. Овај елемент можете изабрати помоћу куериСелецтор метод у вашем корисничком скрипту.

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

Након што изаберете елемент, убацимо дугме за дељење као дете у њега:

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

Притисните Цтрл + С да сачувате скрипту. Ако поново учитате страницу, видећете дугме за дељење уметнуто у постојећи виџет за дељење. Али клик на њега неће учинити ништа.

Да би дугме функционисало, направићемо функцију за генерисање ВхатсАпп дељене УРЛ адресе на основу УРЛ-а тренутне странице. Можете користити лоцатион.хреф да вратите УРЛ странице.

functiongenerateWALink() {
 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');
});

Сачувајте и покрените кориснички скрипт

Када будете спремни за кориснички скрипт, притисните Цтрл + С да сачувате промене. Отвори Инсталиране корисничке скрипте картицу у Тампермонкеи-у да видите све корисничке скрипте инсталиране на вашем претраживачу.

Да бисте видели кориснички скрипт у акцији, отворите циљну веб страницу. Видећете зелено Објави дугме. Кликом на дугме од вас ће се тражити да отворите радну површину ВхатсАпп, под условом да имате инсталирану апликацију. Затим можете да изаберете контакт са листе да бисте послали везу за чланак.

Можете додатно модификовати скрипту да бисте додали још побољшања. На пример, можете приказати икону ВхатсАпп на дугмету или променити њен положај помоћу функције ИнсертАфтер().

Можете омогућити, онемогућити или уредити појединачне корисничке скрипте са Тампермонкеи контролне табле. Алтернативно, кликните на икону Тампермонкеи на траци са алаткама да бисте онемогућили све активне корисничке скрипте одједном.

Омогућавање трајним променама Инспецт Елемент користећи Тампермонкеи

Тампермонкеи је један од многих доступних менаџера корисничких скриптова који вам омогућавају да мењате веб странице како бисте побољшали своје искуство прегледања. Мале модификације могу помоћи у бољој приступачности и поправити мање сметње на вашој омиљеној веб локацији.

Пре него што почнете да пишете скрипту, проверите да ли скрипта од других корисника већ постоји. Међутим, будите опрезни при инсталирању корисничких скриптова трећих страна из непознатих извора да бисте избегли злонамерни код.