Sådan gør du inspicér elementændringer permanent i din browser med Tampermonkey

Funktionen Inspect Element på din webbrowser er et udviklerværktøj, der lader dig ændre frontend-aspekterne af et websted, herunder HTML, CSS og JavaScript, og foretage midlertidige ændringer. Du kan også gøre meget mere med Inspect Element. Alle ændringer går dog tabt efter en opdatering.

Men nogle gange vil du måske beholde ændringerne i en længere periode eller tilføje yderligere funktioner for at forbedre brugeroplevelsen. En måde at gøre Inspect Element-ændringer permanente er ved at bruge Tampermonkey-udvidelsen. Det lader dig tilføje brugerdefinerede scripts på websider, hvilket gør ændringerne permanente på din lokale maskine.

Lad os se på, hvordan du bruger Tampermonkey til at gøre inspektionselementændringerne permanente i din lokale browser.

Hvad er Tampermonkey, og hvordan kan du installere det?

Tampermonkey, en userscript manager, er en populær browserudvidelse, der er tilgængelig for alle større webbrowsere, inklusive Chrome, Edge, Opera Next og Firefox. Det lader dig oprette og køre brugerdefinerede og eksisterende brugerscripts for at ændre websider for at rette eller forbedre dem.

Det har også et brugerscripts-bibliotek, der er oprettet af andre Tampermonkey-brugere. For eksempel kan du bruge Local YouTube Downloader-brugerscriptet til download YouTube-videoer ved hjælp af Tampermonkey eller se markerede YouTube-videoer uden at logge ind.

Udvidelsen kører de gemte brugerscripts, så snart den angivne webside indlæses, hvilket får de tilsigtede ændringer til at se permanente ud.

Før vi begynder at skrive et script, skal du installere Tampermonkey. Så lad os starte med at installere udvidelsen:

1. Gå til Tampermonkeys officielle side. Det vil automatisk registrere din webbrowser. Hvis ikke, skal du klikke på en hvilken som helst fane fra Chrome, Microsoft Edge, Firefox, Safari og Opera, afhængigt af den browser, du bruger.
2. I Hent sektion, klik på Få fra butik. Du vil blive dirigeret til din browsers webbutik.
3. Klik på Installere for at tilføje udvidelsen til din browser. Følg eventuelle instruktioner på skærmen for at fuldføre installationen.

Hvis din browser ikke er på listen, men du bruger en Chromium-browser, bør du være i stand til at installere denne udvidelse fra Chrome Store.

Når det er installeret, kan du begynde at skrive brugerdefinerede brugerscripts ved hjælp af JavaScript til at foretage de tilsigtede ændringer på ethvert websted. Det er overflødigt at sige, at du har brug for en grundlæggende forståelse af HTML, CSS og JavaScript for at skrive brugerscriptet og foretage ændringer ved hjælp af Tampermonkey.

For at demonstrere Tampermonkeys muligheder skriver vi et script for at tilføje en WhatsApp-deleknap for at dele artikellinks med dine WhatsApp-kontakter.

Hvad du skal overveje, før du foretager ændringer af webstedselementer

Når du foretager ændringer på ethvert websted, er det vigtigt at respektere deres politikker for brug af tredjeparts JavaScript. Forsøg ikke at køre brugerscripts vilkårligt på nogen hjemmeside, især når du har at gøre med følsomme data.

Mens Tampermonkey hjælper dig med at ændre udseendet og tilføje funktionalitet til et websted, er alle ændringerne kun synlige lokalt i din browser og påvirker ikke kilden.

Kom godt i gang med Tampermonkey

Når du har planlagt de ændringer, du vil foretage på en webside, kan du begynde at skrive dit script. Nye brugerscripts kan oprettes fra værktøjslinjen eller Tampermonkey-dashboardet.

For at oprette et nyt script skal du klikke på Udvidelser ikonet på browserens værktøjslinje, og vælg Tampermonkey. Vælg derefter Opret et nyt script. Dette åbner en script-editor i Tampermonkey-dashboardet.

Standard Tampermonkey-headeren eller metadatakommentarerne ser sådan ud:

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

Disse metadatakommentarer inkluderer afgørende oplysninger om brugerscriptets navn, påtænkte formål og tilladelser og fortæller Tampermonkey, hvornår scriptet skal udføres.

Til denne guide vil vi fokusere på @match direktiv, også kaldet metadata indgivet. Tampermonkey bruger dette direktiv til at sikre, at brugerscriptet kun anvendes på en specifik hjemmeside eller websider. I dette tilfælde vil følgende brugerscript kun køre på example.com (erstat webstedets URL efter dit krav) og alle dets sider.

At skrive et brugerscript for at tilføje en WhatsApp-deleknap

I slutningen af ​​hver MakeUseOf-artikel finder du en dele-widget til forskellige sociale medieplatforme, undtagen WhatsApp. Mens du kan kopiere og indsætte URL'en, er en WhatsApp-deleknap nyttig, hvis du ofte deler artikler på din WhatsApp-gruppe.

Du kan oprette et brugerscript i Tampermonkey for at tilføje en WhatsApp-deleknap i slutningen af ​​artiklen. Vi vil integrere knappen i den eksisterende dele-widget, der giver dig mulighed for at dele websidens URL med dine WhatsApp-kontakter.

Lad os starte med at oprette en grundlæggende WhatsApp-deleknap.

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

Nu hvor vi har en grundlæggende WhatsApp-deleknap, lad os tilføje lidt styling til den. Dette vil give knappen dens baggrund og tekstfarve, kant, polstring og markørstil. Med lidt fifleri kan du ændre knapegenskaberne for at finjustere udseendet.

//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 klar, er det tid til at teste den. Men hvor placerer du den? Som en almindelig praksis er deleknappen ofte placeret i slutningen af ​​artikler.

Men i dette tilfælde har vi allerede en delingswidget i slutningen af ​​hver artikel. Så det er ideelt at gøre denne deleknap til en del af widgetten.

For at gøre dette vil vi inspicere den eksisterende dele-widget for at finde den overordnede container, der indeholder delingselementerne for at finde den i brugerscriptet. Tryk på på websiden Ctrl + Shift + C for at åbne Inspect Element. Vælg derefter dele-widget-elementet på siden for at inspicere det.

Du vil se, at det er en element med klassenavnet "deler bund”. Du kan vælge dette element ved hjælp af querySelector metode i dit brugerscript.

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

Efter at have valgt elementet, lad os indsætte deleknappen som et barn til det:

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

Trykke Ctrl + S for at gemme scriptet. Hvis du genindlæser siden, vil du se en deleknap indsat i den eksisterende delewidget. Men at klikke på det gør ikke noget.

For at få knappen til at fungere, opretter vi en funktion til at generere en WhatsApp-dele URL baseret på den aktuelle sides URL. Du kan bruge location.href til at returnere sidens URL.

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

Lad os derefter tilføje en begivenhedslytter til knappen. Når du klikker på den, åbner browseren en ny fane med et WhatsApp-delelink, der lader dig skrive en besked.

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

Gem og kør brugerscriptet

Når du har brugerscriptet klar, skal du trykke på Ctrl + S for at gemme ændringerne. Åbn Installerede brugerscripts fanen i Tampermonkey for at se alle brugerscripts installeret på din browser.

For at se brugerscriptet i aktion skal du åbne målwebsiden. Du vil se en grøn Del knap. Hvis du klikker på knappen, bliver du bedt om at åbne WhatsApp-skrivebordet, forudsat at du har appen installeret. Du kan derefter vælge kontakten fra listen for at sende artikellinket.

Du kan ændre scriptet yderligere for at tilføje flere forbedringer. For eksempel kan du vise WhatsApp-ikonet på knappen eller ændre dets placering ved hjælp af en InsertAfter()-funktion.

Du kan aktivere, deaktivere eller redigere individuelle brugerscripts fra Tampermonkey-dashboardet. Alternativt kan du klikke på Tampermonkey-ikonet på værktøjslinjen for at deaktivere alle aktive brugerscripts på én gang.

Gør inspicér elementændringer permanent ved hjælp af Tampermonkey

Tampermonkey er en af ​​de mange tilgængelige brugerscript-managere, som giver dig mulighed for at ændre websider for at forbedre din browsingoplevelse. Små ændringer kan hjælpe med bedre tilgængelighed og løse mindre irritationsmomenter med dit yndlingswebsted.

Før du begynder at skrive et script, skal du kontrollere, om der allerede findes et script fra andre brugere. Vær dog forsigtig med at installere tredjeparts brugerscripts fra ukendte kilder for at undgå skadelig kode.