Jak trwale sprawdzić zmiany elementów w przeglądarce za pomocą Tampermonkey

Funkcja Inspect Element w przeglądarce internetowej to narzędzie programistyczne, które pozwala modyfikować elementy frontonu witryny internetowej, w tym HTML, CSS i JavaScript, oraz wprowadzać zmiany tymczasowe. Dzięki Inspect Element możesz zrobić znacznie więcej. Jednak po odświeżeniu wszystkie zmiany zostaną utracone.

Czasami jednak możesz chcieć zachować zmiany przez dłuższy czas lub dodać dodatkowe funkcje, aby poprawić wygodę użytkownika. Jednym ze sposobów trwałego wprowadzenia zmian w elementach Inspekcji jest użycie rozszerzenia Tampermonkey. Umożliwia dodawanie niestandardowych skryptów na stronach internetowych, dzięki czemu zmiany są trwałe na komputerze lokalnym.

Przyjrzyjmy się, jak używać Tampermonkey, aby trwale sprawdzić zmiany elementów w lokalnej przeglądarce.

Co to jest Tampermonkey i jak można go zainstalować?

Tampermonkey, menedżer skryptów użytkownika, to popularne rozszerzenie przeglądarki dostępne dla wszystkich głównych przeglądarek internetowych, w tym Chrome, Edge, Opera Next i Firefox. Umożliwia tworzenie i uruchamianie niestandardowych i istniejących skryptów użytkownika w celu modyfikowania stron internetowych w celu ich naprawienia lub ulepszenia.

Zawiera także bibliotekę skryptów użytkownika utworzoną przez innych użytkowników Tampermonkey. Możesz na przykład użyć skryptu użytkownika lokalnego narzędzia do pobierania YouTube pobieraj filmy z YouTube'a za pomocą Tampermonkey Lub oglądaj oznaczone filmy YouTube bez logowania.

Rozszerzenie uruchamia zapisane skrypty użytkownika natychmiast po załadowaniu określonej strony internetowej, dzięki czemu zamierzone zmiany wydają się trwałe.

Zanim zaczniemy pisać skrypt, musisz zainstalować Tampermonkey. Zacznijmy więc od instalacji rozszerzenia:

1. Idź do Oficjalna strona Tampermonkey. Automatycznie wykryje Twoją przeglądarkę internetową. Jeśli nie, kliknij dowolną kartę w przeglądarkach Chrome, Microsoft Edge, Firefox, Safari i Opera, w zależności od używanej przeglądarki.
2. w Pobierać sekcję, kliknij Pobierz ze sklepu. Zostaniesz przekierowany do sklepu internetowego swojej przeglądarki.
3. Kliknij zainstalować aby dodać rozszerzenie do swojej przeglądarki. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby ukończyć instalację.

Jeśli Twojej przeglądarki nie ma na liście, ale używasz przeglądarki Chromium, zainstalowanie tego rozszerzenia powinno być możliwe z poziomu Sklep Chrome.

Po zainstalowaniu możesz rozpocząć pisanie niestandardowych skryptów użytkownika za pomocą JavaScript, aby wprowadzić zamierzone zmiany w dowolnej witrynie internetowej. Nie trzeba dodawać, że będziesz potrzebować podstawowej wiedzy na temat HTML, CSS i JavaScript, aby napisać skrypt użytkownika i wprowadzić modyfikacje za pomocą Tampermonkey.

Aby zademonstrować możliwości Tampermonkey, napiszemy skrypt, który doda przycisk udostępniania WhatsApp, umożliwiający udostępnianie linków do artykułów Twoim kontaktom w WhatsApp.

Co należy wziąć pod uwagę przed wprowadzeniem modyfikacji elementów witryny internetowej

Dokonując modyfikacji dowolnej witryny internetowej, ważne jest przestrzeganie jej zasad dotyczących korzystania ze skryptów JavaScript innych firm. Nie próbuj samowolnie uruchamiać skryptów użytkownika na żadnej stronie internetowej, zwłaszcza gdy masz do czynienia z wrażliwymi danymi.

Chociaż Tampermonkey pomaga modyfikować wygląd i dodawać funkcje do witryny internetowej, wszystkie zmiany są widoczne tylko lokalnie w przeglądarce i nie mają wpływu na źródło.

Pierwsze kroki z Tampermonkey

Po zaplanowaniu modyfikacji, które chcesz wprowadzić na stronie internetowej, możesz rozpocząć pisanie skryptu. Nowe skrypty użytkownika można tworzyć z paska narzędzi lub panelu Tampermonkey.

Aby utworzyć nowy skrypt, kliknij przycisk Rozszerzenia ikonę na pasku narzędzi przeglądarki i wybierz Tampermonkey. Następnie wybierz Utwórz nowy skrypt. Spowoduje to otwarcie edytora skryptów na pulpicie nawigacyjnym Tampermonkey.

Domyślny nagłówek lub komentarze do metadanych Tampermonkey wyglądają następująco:

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

Te komentarze do metadanych zawierają kluczowe informacje na temat nazwy skryptu użytkownika, jego przeznaczenia i uprawnień, a także informują Tampermonkey, kiedy ma wykonać skrypt.

W tym przewodniku skupimy się na @mecz dyrektywa, czyli złożone metadane. Tampermonkey korzysta z tej dyrektywy, aby mieć pewność, że skrypt użytkownika zostanie zastosowany tylko do określonej witryny lub stron internetowych. W tym przypadku następujący skrypt użytkownika będzie działał tylko w witrynie example.com (zamień adres URL witryny zgodnie z wymaganiami) i na wszystkich jej stronach.

Pisanie skryptu użytkownika w celu dodania przycisku udostępniania WhatsApp

Na końcu każdego artykułu MakeUseOf znajdziesz widżet udostępniania dla różnych platform mediów społecznościowych, z wyjątkiem WhatsApp. Chociaż możesz skopiować i wkleić adres URL, przycisk udostępniania WhatsApp jest przydatny, jeśli często udostępniasz artykuły w swojej grupie WhatsApp.

Możesz utworzyć skrypt użytkownika w Tampermonkey, aby dodać przycisk udostępniania WhatsApp na końcu artykułu. Zintegrujemy przycisk z istniejącym widżetem udostępniania, który umożliwi Ci udostępnienie adresu URL strony internetowej kontaktom WhatsApp.

Zacznijmy od stworzenia podstawowego przycisku udostępniania w WhatsApp.

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

Teraz, gdy mamy podstawowy przycisk udostępniania WhatsApp, dodajmy do niego trochę stylizacji. Dzięki temu przycisk będzie miał kolor tła i tekstu, obramowanie, wypełnienie i styl kursora. Przy odrobinie majsterkowania możesz zmienić właściwości przycisku, aby dostosować jego wygląd.

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

Gdy przycisk jest gotowy, czas go przetestować. Ale gdzie to umieścić? Powszechną praktyką jest często umieszczanie przycisku udostępniania na końcu artykułów.

Jednak w tym przypadku na końcu każdego artykułu mamy już widżet udostępniania. Idealnym rozwiązaniem jest zatem uczynienie tego przycisku udostępniania częścią widżetu.

Aby to zrobić, sprawdzimy istniejący widżet udostępniania, aby znaleźć kontener nadrzędny zawierający elementy udostępniania i zlokalizować go w skrypcie użytkownika. Na stronie internetowej naciśnij Ctrl + Shift + C aby otworzyć Sprawdź element. Następnie wybierz element widżetu udostępniania na stronie, aby go sprawdzić.

Zobaczysz, że to jest element o nazwie klasy „dzielenie się dnem”. Możesz wybrać ten element za pomocą selektor zapytań metodę w skrypcie użytkownika.

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

Po wybraniu elementu wstawmy do niego przycisk udostępniania jako element podrzędny:

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

Naciskać Ctrl + S aby zapisać skrypt. Jeśli ponownie załadujesz stronę, zobaczysz przycisk udostępniania wstawiony do istniejącego widżetu udostępniania. Ale kliknięcie na to nic nie da.

Aby przycisk działał, utworzymy funkcję generującą adres URL udostępniania WhatsApp na podstawie adresu URL bieżącej strony. Możesz użyć pliku Location.href, aby zwrócić adres URL strony.

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

Następnie dodajmy do przycisku detektor zdarzeń. Po kliknięciu przeglądarka otworzy nową kartę z linkiem do udostępniania WhatsApp, który umożliwia utworzenie wiadomości.

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

Zapisz i uruchom skrypt użytkownika

Kiedy już będziesz mieć gotowy skrypt użytkownika, naciśnij Ctrl + S aby zapisać zmiany. Otworzyć Zainstalowane skrypty użytkownika zakładka w Tampermonkey, aby wyświetlić wszystkie skrypty użytkownika zainstalowane w przeglądarce.

Aby zobaczyć skrypt użytkownika w akcji, otwórz docelową stronę internetową. Zobaczysz zielony Udział przycisk. Kliknięcie przycisku spowoduje wyświetlenie pulpitu WhatsApp, jeśli masz zainstalowaną aplikację. Następnie możesz wybrać kontakt z listy, aby wysłać link do artykułu.

Możesz dalej modyfikować skrypt, aby dodać więcej ulepszeń. Na przykład możesz wyświetlić ikonę WhatsApp na przycisku lub zmienić jej położenie za pomocą funkcji InsertAfter().

Możesz włączać, wyłączać lub edytować indywidualne skrypty użytkownika z poziomu pulpitu nawigacyjnego Tampermonkey. Alternatywnie możesz kliknąć ikonę Tampermonkey na pasku narzędzi, aby wyłączyć jednocześnie wszystkie aktywne skrypty użytkownika.

Trwałe wprowadzanie zmian w elementach inspekcji za pomocą Tampermonkey

Tampermonkey to jeden z wielu dostępnych menedżerów skryptów użytkownika, który umożliwia modyfikowanie stron internetowych w celu poprawy komfortu przeglądania. Drobne modyfikacje mogą pomóc w poprawie dostępności i naprawieniu drobnych niedogodności w Twojej ulubionej witrynie.

Zanim zaczniesz pisać skrypt, sprawdź, czy istnieje już skrypt od innych użytkowników. Należy jednak zachować ostrożność podczas instalowania skryptów użytkownika innych firm z nieznanych źródeł, aby uniknąć złośliwego kodu.