Как да направите инспектиране на промените в елемента постоянни във вашия браузър с Tampermonkey

Функцията Inspect Element на вашия уеб браузър е инструмент за разработчици, който ви позволява да променяте предните аспекти на уебсайт, включително HTML, CSS и JavaScript, и да правите временни промени. Можете също така да направите много повече с Inspect Element. Всички промени обаче се губят след опресняване.

Но понякога може да искате да запазите промените за продължителен период от време или да добавите допълнителни функции, за да подобрите потребителското изживяване. Един от начините да направите промените в Inspect Element постоянни е като използвате разширението Tampermonkey. Позволява ви да добавяте персонализирани скриптове на уеб страници, правейки промените постоянни на вашата локална машина.

Нека да разгледаме как да използваме Tampermonkey, за да направим промените на инспектирания елемент постоянни в локалния ви браузър.

Какво е Tampermonkey и как можете да го инсталирате?

Tampermonkey, мениджър на потребителски скриптове, е популярно разширение за браузър, достъпно за всички основни уеб браузъри, включително Chrome, Edge, Opera Next и Firefox. Позволява ви да създавате и изпълнявате персонализирани и съществуващи потребителски скриптове, за да модифицирате уеб страници, за да ги коригирате или подобрите.

Той също така включва библиотека с потребителски скриптове, създадена от други потребители на Tampermonkey. Например, можете да използвате потребителския скрипт Local YouTube Downloader, за да изтегляне на видеоклипове от YouTube с помощта на Tampermonkey или гледайте маркирани видеоклипове в YouTube, без да влизате.

Разширението изпълнява запазените потребителски скриптове веднага щом посочената уеб страница се зареди, като по този начин прави предвидените промени да изглеждат постоянни.

Преди да започнем да пишем скрипт, ще трябва да инсталирате Tampermonkey. И така, нека започнем с инсталирането на разширението:

1. Отидете на Официална страница на Tampermonkey. Той автоматично ще открие вашия уеб браузър. Ако не, щракнете върху произволен раздел от Chrome, Microsoft Edge, Firefox, Safari и Opera в зависимост от браузъра, който използвате.
2. В Изтегли раздел, щракнете върху Вземете от магазина. Ще бъдете насочени към уеб магазина на вашия браузър.
3. Кликнете върху Инсталирай за да добавите разширението към вашия браузър. Следвайте инструкциите на екрана, за да завършите инсталацията.

Ако вашият браузър не е в списъка, но използвате браузър Chromium, трябва да можете да инсталирате това разширение от Магазин на Chrome.

Веднъж инсталиран, можете да започнете да пишете персонализирани потребителски скриптове с помощта на JavaScript, за да направите планираните промени във всеки уебсайт. Излишно е да казвам, че ще ви трябва основно разбиране на HTML, CSS и JavaScript, за да напишете потребителския скрипт и да направите модификации с помощта на Tampermonkey.

За да демонстрираме възможностите на Tampermonkey, ще напишем скрипт за добавяне на бутон за споделяне на WhatsApp, за да споделяте връзки към статии с вашите контакти в WhatsApp.

Какво да вземете предвид, преди да направите модификации на елемент на уебсайт

Докато правите модификации на който и да е уебсайт, е важно да спазвате техните правила за използване на JavaScript на трети страни. Не се опитвайте произволно да стартирате потребителски скриптове на който и да е уебсайт, особено когато работите с чувствителни данни.

Докато Tampermonkey ви помага да промените външния вид и да добавите функционалност към уебсайт, всички промени се виждат само локално във вашия браузър и не засягат източника.

Първи стъпки с Tampermonkey

След като сте планирали модификациите, които искате да направите на уеб страница, можете да започнете да пишете своя скрипт. Нови потребителски скриптове могат да бъдат създадени от лентата с инструменти или таблото за управление на Tampermonkey.

За да създадете нов скрипт, щракнете върху Разширения икона в лентата с инструменти на браузъра и изберете Tampermonkey. След това изберете Създайте нов скрипт. Това ще отвори редактор на скриптове в таблото за управление на Tampermonkey.

Заглавието на Tampermonkey или коментарите с метаданни по подразбиране изглеждат така:

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

Тези коментари за метаданни включват важна информация за името на потребителския скрипт, предназначението и разрешенията и казват на Tampermonkey кога да изпълни скрипта.

За това ръководство ще се съсредоточим върху @съвпада директива, известна още като файл с метаданни. Tampermonkey използва тази директива, за да гарантира, че потребителският скрипт се прилага само към определен уебсайт или уеб страници. В този случай следният потребителски скрипт ще се изпълнява само на example.com (заменете URL адреса на уебсайта според вашите изисквания) и всички негови страници.

Писане на потребителски скрипт за добавяне на бутон за споделяне в WhatsApp

В края на всяка статия на MakeUseOf ще намерите джаджа за споделяне за различни социални медийни платформи, с изключение на WhatsApp. Докато можете да копирате и поставите URL адреса, бутонът за споделяне на WhatsApp е полезен, ако често споделяте статии във вашата група WhatsApp.

Можете да създадете потребителски скрипт в Tampermonkey, за да добавите бутон за споделяне на WhatsApp в края на статията. Ние ще интегрираме бутона в съществуващата джаджа за споделяне, която ще ви позволи да споделяте URL адреса на уеб страницата с вашите контакти в WhatsApp.

Нека започнем със създаването на основен бутон за споделяне на WhatsApp.

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

Сега, след като имаме основен бутон за споделяне в WhatsApp, нека добавим малко стил към него. Това ще даде на бутона цвета на фона и текста, рамката, подложката и стила на курсора. С малко бърникане можете да промените свойствата на бутоните, за да настроите фино външния вид.

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

Когато бутонът е готов, е време да го тествате. Но къде го поставяте? Като обичайна практика, често бутонът за споделяне се поставя в края на статиите.

В този случай обаче вече имаме джаджа за споделяне в края на всяка статия. Затова е идеално да направите този бутон за споделяне част от джаджата.

За да направим това, ще инспектираме съществуващия приспособление за споделяне, за да намерим родителския контейнер, който съдържа елементите за споделяне, за да го намерим в потребителския скрипт. На уеб страницата натиснете Ctrl + Shift + C за да отворите Inspect Element. След това изберете елемента за споделяне на джаджа на страницата, за да го проверите.

Ще видите, че това е елемент с име на клас „споделяне на дъното”. Можете да изберете този елемент с помощта на querySelector метод във вашия потребителски скрипт.

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

След като изберете елемента, нека вмъкнем бутона за споделяне като дете към него:

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

Натиснете Ctrl + S за да запазите скрипта. Ако презаредите страницата, ще видите бутон за споделяне, вмъкнат в съществуващата джаджа за споделяне. Но щракването върху него няма да направи нищо.

За да работи бутонът, ще създадем функция за генериране на URL адрес за споделяне в WhatsApp въз основа на URL адреса на текущата страница. Можете да използвате location.href, за да върнете URL адреса на страницата.

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

След това нека добавим слушател на събития към бутона. При щракване браузърът ще отвори нов раздел с връзка за споделяне на WhatsApp, която ви позволява да съставите съобщение.

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

Запазете и стартирайте потребителския скрипт

След като сте подготвили потребителския скрипт, натиснете Ctrl + S за да запазите промените. Отвори Инсталирани потребителски скриптове раздел в Tampermonkey, за да видите всички потребителски скриптове, инсталирани на вашия браузър.

За да видите потребителския скрипт в действие, отворете целевата уеб страница. Ще видите зелено Дял бутон. Щракването върху бутона ще ви подкани да отворите работния плот на WhatsApp, при условие че имате инсталирано приложението. След това можете да изберете контакта от списъка, за да изпратите връзката към статията.

Можете допълнително да модифицирате скрипта, за да добавите още подобрения. Например, можете да покажете иконата на WhatsApp върху бутона или да промените разположението й с помощта на функция InsertAfter().

Можете да активирате, деактивирате или редактирате отделни потребителски скриптове от таблото за управление на Tampermonkey. Друга възможност е да щракнете върху иконата Tampermonkey в лентата с инструменти, за да деактивирате всички активни потребителски скриптове наведнъж.

Осъществяване на постоянни промени в елементите на Inspect с помощта на Tampermonkey

Tampermonkey е един от многото налични мениджъри на потребителски скриптове, които ви позволяват да променяте уеб страниците, за да подобрите изживяването си при сърфиране. Малките модификации могат да помогнат за по-добра достъпност и да коригират незначителни проблеми с любимия ви уебсайт.

Преди да започнете да пишете скрипт, проверете дали вече съществува скрипт от други потребители. Внимавайте обаче да инсталирате потребителски скриптове на трети страни от неизвестни източници, за да избегнете злонамерен код.