Hur man gör inspektera elementändringar permanenta i din webbläsare med Tampermonkey

Funktionen Inspektera element i din webbläsare är ett utvecklarverktyg som låter dig ändra front-end-aspekterna på en webbplats, inklusive HTML, CSS och JavaScript, och göra tillfälliga ändringar. Du kan också göra mycket mer med Inspect Element. Men alla ändringar går förlorade efter en uppdatering.

Men ibland kanske du vill behålla ändringarna under en längre period eller lägga till ytterligare funktioner för att förbättra användarupplevelsen. Ett sätt att göra Inspect Element-ändringar permanenta är att använda Tampermonkey-tillägget. Det låter dig lägga till anpassade skript på webbsidor, vilket gör ändringarna permanenta på din lokala dator.

Låt oss titta på hur du använder Tampermonkey för att göra inspekteringselementändringarna permanenta i din lokala webbläsare.

Vad är Tampermonkey och hur kan du installera det?

Tampermonkey, en användarskripthanterare, är ett populärt webbläsartillägg som är tillgängligt för alla större webbläsare, inklusive Chrome, Edge, Opera Next och Firefox. Det låter dig skapa och köra anpassade och befintliga användarskript för att ändra webbsidor för att fixa eller förbättra dem.

Den har också ett användarskriptbibliotek skapat av andra Tampermonkey-användare. Du kan till exempel använda användarskriptet Local YouTube Downloader för att ladda ner YouTube-videor med Tampermonkey eller titta på flaggade YouTube-videor utan att logga in.

Tillägget kör de sparade användarskripten så snart den angivna webbsidan laddas, vilket gör att de avsedda ändringarna ser permanenta ut.

Innan vi börjar skriva ett skript måste du installera Tampermonkey. Så låt oss börja med att installera tillägget:

1. Gå till Tampermonkey officiella sida. Den kommer automatiskt att upptäcka din webbläsare. Om inte, klicka på valfri flik från Chrome, Microsoft Edge, Firefox, Safari och Opera, beroende på vilken webbläsare du använder.
2. I den Ladda ner avsnitt, klicka på Få från butik. Du kommer att dirigeras till din webbläsares webbbutik.
3. Klicka på Installera för att lägga till tillägget i din webbläsare. Följ alla instruktioner på skärmen för att slutföra installationen.

Om din webbläsare inte finns med i listan, men du använder en Chromium-webbläsare, bör du kunna installera det här tillägget från Chrome Store.

När det är installerat kan du börja skriva anpassade användarskript med JavaScript för att göra de avsedda ändringarna på vilken webbplats som helst. Det behöver inte sägas att du behöver en grundläggande förståelse för HTML, CSS och JavaScript för att skriva användarskriptet och göra ändringar med Tampermonkey.

För att demonstrera Tampermonkeys kapacitet kommer vi att skriva ett skript för att lägga till en WhatsApp-delningsknapp för att dela artikellänkar med dina WhatsApp-kontakter.

Vad du bör tänka på innan du gör ändringar på webbplatselement

När du gör ändringar på en webbplats är det viktigt att respektera deras policyer för att använda JavaScript från tredje part. Försök inte att köra användarskript godtyckligt på någon webbplats, särskilt när du har att göra med känslig data.

Medan Tampermonkey hjälper dig att ändra utseendet och lägga till funktionalitet på en webbplats, är alla ändringar endast synliga lokalt i din webbläsare och påverkar inte källan.

Komma igång med Tampermonkey

När du har planerat de ändringar du vill göra på en webbsida kan du börja skriva ditt manus. Nya användarskript kan skapas från verktygsfältet eller Tampermonkeys instrumentpanel.

För att skapa ett nytt skript, klicka på Tillägg ikonen i webbläsarens verktygsfält och välj Tampermonkey. Välj sedan Skapa ett nytt skript. Detta öppnar en skriptredigerare i Tampermonkey-instrumentpanelen.

Tampermonkeys standardrubriker eller metadatakommentarer ser ut så här:

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

Dessa metadatakommentarer inkluderar viktig information om användarskriptets namn, avsedda syfte och behörigheter och talar om för Tampermonkey när skriptet ska köras.

För den här guiden kommer vi att fokusera på @match direktiv, aka metadata arkiverat. Tampermonkey använder detta direktiv för att säkerställa att användarskriptet endast tillämpas på en specifik webbplats eller webbsidor. I det här fallet kommer följande användarskript endast att köras på example.com (ersätt webbadressen enligt ditt krav) och alla dess sidor.

Att skriva ett användarskript för att lägga till en WhatsApp Share-knapp

I slutet av varje MakeUseOf-artikel hittar du en delningswidget för olika sociala medieplattformar, förutom WhatsApp. Även om du kan kopiera och klistra in webbadressen, är en WhatsApp-delningsknapp användbar om du ofta delar artiklar i din WhatsApp-grupp.

Du kan skapa ett användarskript i Tampermonkey för att lägga till en WhatsApp-delningsknapp i slutet av artikeln. Vi kommer att integrera knappen i den befintliga delningswidgeten som gör att du kan dela webbsidans URL med dina WhatsApp-kontakter.

Låt oss börja med att skapa en grundläggande WhatsApp-delningsknapp.

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

Nu när vi har en grundläggande WhatsApp-delningsknapp, låt oss lägga till lite styling till den. Detta ger knappen dess bakgrunds- och textfärg, ram, stoppning och markörstil. Med lite mixtrande kan du ändra knappegenskaperna för att finjustera utseendet.

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

Med knappen redo är det dags att testa den. Men var placerar du den? Som en vanlig praxis är dela-knappen ofta placerad i slutet av artiklar.

Men i det här fallet har vi redan en delningswidget i slutet av varje artikel. Så det är idealiskt att göra denna delningsknapp till en del av widgeten.

För att göra detta kommer vi att inspektera den befintliga delningswidgeten för att hitta den överordnade behållaren som innehåller delningselementen för att hitta den i användarskriptet. På webbsidan, tryck Ctrl + Shift + C för att öppna Inspektera element. Välj sedan delningswidgetelementet på sidan för att inspektera det.

Du kommer att se att det är en element med klassnamnet "delar botten”. Du kan välja detta element med hjälp av querySelector metod i ditt användarskript.

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

Efter att ha valt elementet, låt oss infoga delningsknappen som ett barn till det:

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

Tryck Ctrl + S för att spara skriptet. Om du laddar om sidan kommer du att se en delningsknapp infogas i den befintliga delningswidgeten. Men att klicka på den gör ingenting.

För att få knappen att fungera skapar vi en funktion för att generera en WhatsApp-del-URL baserat på den aktuella sidans URL. Du kan använda location.href för att returnera sidans URL.

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

Låt oss sedan lägga till en händelseavlyssnare till knappen. När du klickar på den öppnar webbläsaren en ny flik med en WhatsApp-dellänk som låter dig skriva ett meddelande.

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

Spara och kör Userscript

När du har användarskriptet klart, tryck Ctrl + S för att spara ändringarna. Öppna Installerade användarskript fliken i Tampermonkey för att se alla användarskript installerade i din webbläsare.

Öppna målwebbsidan för att se användarskriptet i aktion. Du kommer att se en grön Dela med sig knapp. Om du klickar på knappen kommer du att uppmana dig att öppna WhatsApp-skrivbordet, förutsatt att du har appen installerad. Du kan sedan välja kontakten från listan för att skicka artikellänken.

Du kan modifiera skriptet ytterligare för att lägga till fler förbättringar. Du kan till exempel visa WhatsApp-ikonen på knappen eller ändra dess placering med hjälp av en InsertAfter()-funktion.

Du kan aktivera, inaktivera eller redigera individuella användarskript från Tampermonkeys instrumentpanel. Alternativt, klicka på Tampermonkey-ikonen i verktygsfältet för att inaktivera alla aktiva användarskript på en gång.

Göra inspektera elementändringar permanenta med Tampermonkey

Tampermonkey är en av många tillgängliga användarskripthanterare som låter dig ändra webbsidor för att förbättra din surfupplevelse. Små modifieringar kan hjälpa till med bättre tillgänglighet och åtgärda mindre störningar med din favoritwebbplats.

Innan du börjar skriva ett skript, kontrollera om det redan finns ett skript från andra användare. Var dock försiktig med att installera tredjeparts användarskript från okända källor för att undvika skadlig kod.