Heeft u wijzigingen aangebracht aan een website met behulp van de tool Inspect Element? Hier leest u hoe u de Tampermonkey-extensie kunt gebruiken om deze wijzigingen permanent te maken.
De functie Inspect Element in uw webbrowser is een ontwikkelaarstool waarmee u de front-end-aspecten van een website, inclusief HTML, CSS en JavaScript, kunt wijzigen en tijdelijke wijzigingen kunt aanbrengen. Met Inspect Element kunt u nog veel meer doen. Alle wijzigingen gaan echter verloren na een vernieuwing.
Maar soms wilt u de wijzigingen misschien voor een langere periode behouden of extra functionaliteiten toevoegen om de gebruikerservaring te verbeteren. Eén manier om de wijzigingen aan Inspect Element permanent te maken, is door de Tampermonkey-extensie te gebruiken. Hiermee kunt u aangepaste scripts toevoegen aan webpagina's, waardoor de wijzigingen permanent worden op uw lokale computer.
Laten we eens kijken hoe u Tampermonkey kunt gebruiken om de wijzigingen in het inspectie-element permanent te maken in uw lokale browser.
Wat is Tampermonkey en hoe kun je het installeren?
Tampermonkey, een gebruikersscriptbeheerder, is een populaire browserextensie die beschikbaar is voor alle grote webbrowsers, waaronder Chrome, Edge, Opera Next en Firefox. Hiermee kunt u aangepaste en bestaande gebruikersscripts maken en uitvoeren om webpagina's aan te passen, te repareren of te verbeteren.
Het beschikt ook over een bibliotheek met gebruikersscripts die is gemaakt door andere Tampermonkey-gebruikers. U kunt bijvoorbeeld het gebruikersscript Local YouTube Downloader gebruiken download YouTube-video's met Tampermonkey of bekijk gemarkeerde YouTube-video's zonder in te loggen.
De extensie voert de opgeslagen gebruikersscripts uit zodra de opgegeven webpagina wordt geladen, waardoor de beoogde wijzigingen permanent lijken.
Voordat we beginnen met het schrijven van een script, moet je Tampermonkey installeren. Laten we beginnen met het installeren van de extensie:
- Ga naar de Officiële pagina van Tampermonkey. Het zal uw webbrowser automatisch detecteren. Als dit niet het geval is, klikt u op een willekeurig tabblad in Chrome, Microsoft Edge, Firefox, Safari en Opera, afhankelijk van de browser die u gebruikt.
- In de Downloaden sectie, klik op Haal het uit de winkel. U wordt doorgestuurd naar de webwinkel van uw browser.
- Klik op Installeren om de extensie aan uw browser toe te voegen. Volg eventuele instructies op het scherm om de installatie te voltooien.
Als uw browser niet in de lijst staat, maar u gebruikt een Chromium-browser, zou u deze extensie moeten kunnen installeren vanaf de Chrome-winkel.
Eenmaal geïnstalleerd, kunt u beginnen met het schrijven van aangepaste gebruikersscripts met JavaScript om de beoogde wijzigingen aan elke website aan te brengen. Vanzelfsprekend heb je een basiskennis van HTML, CSS en JavaScript nodig om het gebruikersscript te schrijven en wijzigingen aan te brengen met Tampermonkey.
Om de mogelijkheden van Tampermonkey te demonstreren, zullen we een script schrijven om een WhatsApp-deelknop toe te voegen om artikellinks te delen met je WhatsApp-contacten.
Waar u op moet letten voordat u wijzigingen aan website-elementen aanbrengt
Bij het aanbrengen van wijzigingen aan een website is het belangrijk om hun beleid inzake het gebruik van JavaScripts van derden te respecteren. Probeer niet willekeurig gebruikersscripts op welke website dan ook uit te voeren, vooral niet als u met gevoelige gegevens te maken heeft.
Hoewel Tampermonkey u helpt het uiterlijk te wijzigen en functionaliteit aan een website toe te voegen, zijn alle wijzigingen alleen lokaal zichtbaar in uw browser en hebben ze geen invloed op de bron.
Aan de slag met Tampermonkey
Nadat u de wijzigingen die u aan een webpagina wilt aanbrengen, heeft gepland, kunt u beginnen met het schrijven van uw script. Nieuwe gebruikersscripts kunnen worden gemaakt via de werkbalk of het Tampermonkey-dashboard.
Om een nieuw script te maken, klikt u op de Extensies pictogram in de browserwerkbalk en selecteer Tamperaap. Selecteer vervolgens Maak een nieuw script. Hierdoor wordt een scripteditor geopend in het Tampermonkey-dashboard.
De standaard Tampermonkey-header of metagegevensopmerkingen zien er als volgt uit:
// ==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...
})();
Deze metagegevensopmerkingen bevatten cruciale informatie over de naam van het gebruikersscript, het beoogde doel en de machtigingen en vertellen Tampermonkey wanneer het script moet worden uitgevoerd.
Voor deze gids concentreren we ons op de @overeenkomst richtlijn, oftewel metadata opgeslagen. Tampermonkey gebruikt deze richtlijn om ervoor te zorgen dat het gebruikersscript alleen op een specifieke website of webpagina's wordt toegepast. In dit geval wordt het volgende gebruikersscript alleen uitgevoerd op example.com (vervang de website-URL volgens uw vereisten) en al zijn pagina's.
Een gebruikersscript schrijven om een WhatsApp Share-knop toe te voegen
Aan het einde van elk MakeUseOf-artikel vindt u een deelwidget voor verschillende sociale mediaplatforms, behalve WhatsApp. Hoewel je de URL kunt kopiëren en plakken, is een WhatsApp-deelknop handig als je regelmatig artikelen deelt in je WhatsApp-groep.
Je kunt in Tampermonkey een gebruikersscript maken om aan het einde van het artikel een WhatsApp-deelknop toe te voegen. We zullen de knop integreren in de bestaande deelwidget waarmee u de URL van de webpagina kunt delen met uw WhatsApp-contacten.
Laten we beginnen met het maken van een eenvoudige WhatsApp-deelknop.
//create a WhatsApp button
const Whatsapp_btn = document.createElement('button');
Whatsapp_btn.textContent = 'Share';Nu we een eenvoudige WhatsApp-deelknop hebben, gaan we er wat stijl aan toevoegen. Hierdoor krijgt de knop zijn achtergrond- en tekstkleur, rand, opvulling en cursorstijl. Met een beetje sleutelen kunt u de knopeigenschappen wijzigen om het uiterlijk te verfijnen.
//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';
Nu de knop klaar is, is het tijd om hem te testen. Maar waar plaats je hem? Het is gebruikelijk dat de deelknop vaak aan het einde van artikelen wordt geplaatst.
In dit geval hebben we echter al een deelwidget aan het einde van elk artikel. Het is dus ideaal om deze deelknop onderdeel te maken van de widget.
Om dit te doen, inspecteren we de bestaande deelwidget om de bovenliggende container te vinden die de deelelementen bevat, om deze in het gebruikersscript te lokaliseren. Druk op de webpagina op Ctrl+Shift+C om Element inspecteren te openen. Selecteer vervolgens het deelwidgetelement op de pagina om het te inspecteren.
Je zult zien dat het een element met de klassenaam “onderkant delen”. U kunt dit element selecteren met behulp van de querySelector methode in uw gebruikersscript.
const sharingDiv = document.querySelector ('div.sharing.bottom');Nadat we het element hebben geselecteerd, voegen we de deelknop als onderliggend element eraan toe:
if (sharingDiv) {
sharingDiv.appendChild(Whatsapp_btn);
}druk op Ctrl + S om het script op te slaan. Als u de pagina opnieuw laadt, ziet u een deelknop ingevoegd in de bestaande deelwidget. Maar erop klikken doet niets.
Om de knop te laten werken, maken we een functie om een WhatsApp-deel-URL te genereren op basis van de URL van de huidige pagina. U kunt location.href gebruiken om de pagina-URL te retourneren.
functiongenerateWALink() {
const pageURL = encodeURIComponent(window.location.href);
return`https://api.whatsapp.com/send? text=${pageURL}`;
}Laten we vervolgens een gebeurtenislistener aan de knop toevoegen. Wanneer erop wordt geklikt, opent de browser een nieuw tabblad met een WhatsApp-deellink waarmee u een bericht kunt opstellen.
Whatsapp_btn.addEventListener('click', () => {
const whatsappURL = generateWALink();
window.open(whatsappURL, '_blank');
});Bewaar het gebruikersscript en voer het uit
Zodra u het gebruikersscript gereed heeft, drukt u op Ctrl + S om de wijzigingen op te slaan. Open de Geïnstalleerde gebruikersscripts tabblad in Tampermonkey om alle gebruikersscripts te bekijken die in uw browser zijn geïnstalleerd.
Om het gebruikersscript in actie te zien, opent u de doelwebpagina. Je ziet een groene Deel knop. Als u op de knop klikt, wordt u gevraagd het WhatsApp-bureaublad te openen, op voorwaarde dat u de app hebt geïnstalleerd. Vervolgens kunt u de contactpersoon uit de lijst selecteren om de artikellink te verzenden.
U kunt het script verder aanpassen om meer verbeteringen toe te voegen. U kunt bijvoorbeeld het WhatsApp-pictogram op de knop weergeven of de plaatsing ervan wijzigen met behulp van een InsertAfter()-functie.
U kunt individuele gebruikersscripts inschakelen, uitschakelen of bewerken via het Tampermonkey-dashboard. U kunt ook op het Tampermonkey-pictogram in de werkbalk klikken om alle actieve gebruikersscripts in één keer uit te schakelen.
Wijzigingen in inspectie-elementen permanent maken met Tampermonkey
Tampermonkey is een van de vele beschikbare gebruikersscriptbeheerders waarmee u webpagina's kunt aanpassen om uw browse-ervaring te verbeteren. Kleine aanpassingen kunnen bijdragen aan een betere toegankelijkheid en kleine ergernissen aan uw favoriete website verhelpen.
Voordat u een script gaat schrijven, controleert u of er al een script van andere gebruikers bestaat. Wees echter voorzichtig met het installeren van gebruikersscripts van derden van onbekende bronnen om kwaadaardige code te vermijden.
