Slik gjør du inspiser elementendringer permanent i nettleseren din med Tampermonkey

Inspiser element-funksjonen i nettleseren din er et utviklerverktøy som lar deg endre front-end-aspektene til et nettsted, inkludert HTML, CSS og JavaScript, og gjøre midlertidige endringer. Du kan også gjøre mye mer med Inspect Element. Alle endringene går imidlertid tapt etter en oppdatering.

Men noen ganger vil du kanskje beholde endringene i en lengre periode eller legge til tilleggsfunksjoner for å forbedre brukeropplevelsen. En måte å gjøre Inspect Element-endringer permanente er å bruke Tampermonkey-utvidelsen. Den lar deg legge til egendefinerte skript på nettsider, noe som gjør endringene permanente på din lokale maskin.

La oss se på hvordan du bruker Tampermonkey for å gjøre inspeksjonselementendringene permanente i din lokale nettleser.

Hva er Tampermonkey og hvordan kan du installere det?

Tampermonkey, en userscript manager, er en populær nettleserutvidelse tilgjengelig for alle store nettlesere, inkludert Chrome, Edge, Opera Next og Firefox. Den lar deg lage og kjøre egendefinerte og eksisterende brukerskript for å endre nettsider for å fikse eller forbedre dem.

Den har også et brukerskriptbibliotek laget av andre Tampermonkey-brukere. Du kan for eksempel bruke Local YouTube Downloader-brukerskriptet til Last ned YouTube-videoer med Tampermonkey eller se flaggede YouTube-videoer uten å logge på.

Utvidelsen kjører de lagrede brukerskriptene så snart den angitte nettsiden lastes inn, og får dermed de tiltenkte endringene til å vises permanente.

Før vi begynner å skrive et skript, må du installere Tampermonkey. Så la oss begynne med å installere utvidelsen:

1. Gå til Tampermonkey offisielle side. Den vil automatisk oppdage nettleseren din. Hvis ikke, klikk på hvilken som helst fane fra Chrome, Microsoft Edge, Firefox, Safari og Opera, avhengig av nettleseren du bruker.
2. I nedlasting seksjon, klikk på Få fra Store. Du blir sendt til nettleserens nettbutikk.
3. Klikk på Installere for å legge til utvidelsen i nettleseren din. Følg eventuelle instruksjoner på skjermen for å fullføre installasjonen.

Hvis nettleseren din ikke er oppført, men du bruker en Chromium-nettleser, bør du kunne installere denne utvidelsen fra Chrome Store.

Når den er installert, kan du begynne å skrive tilpassede brukerskripter ved å bruke JavaScript for å gjøre de tiltenkte endringene på et hvilket som helst nettsted. Unødvendig å si at du trenger en grunnleggende forståelse av HTML, CSS og JavaScript for å skrive brukerskriptet og gjøre endringer ved hjelp av Tampermonkey.

For å demonstrere Tampermonkeys evner, skriver vi et skript for å legge til en WhatsApp-deleknapp for å dele artikkellenker med WhatsApp-kontaktene dine.

Hva du bør vurdere før du gjør endringer på nettstedelementer

Når du gjør endringer på et nettsted, er det viktig å respektere retningslinjene deres for bruk av tredjeparts JavaScript. Ikke forsøk å kjøre brukerskript vilkårlig på noen nettsider, spesielt når du har å gjøre med sensitive data.

Mens Tampermonkey hjelper deg med å endre utseendet og legge til funksjonalitet til et nettsted, er alle endringene kun synlige lokalt i nettleseren din og påvirker ikke kilden.

Komme i gang med Tampermonkey

Når du har planlagt endringene du vil gjøre på en nettside, kan du begynne å skrive skriptet ditt. Nye brukerskripter kan opprettes fra verktøylinjen eller Tampermonkey-dashbordet.

For å lage et nytt skript, klikk på Utvidelser ikonet i nettleserens verktøylinje og velg Tampermonkey. Velg deretter Lag et nytt skript. Dette vil åpne et skriptredigeringsprogram i Tampermonkey-dashbordet.

Standard Tampermonkey-header eller metadatakommentarer ser slik ut:

// ==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 metadatakommentarene inkluderer viktig informasjon om brukerskriptets navn, tiltenkte formål og tillatelser og forteller Tampermonkey når skriptet skal kjøres.

For denne veiledningen vil vi fokusere på @kamp direktiv, aka metadata arkivert. Tampermonkey bruker dette direktivet for å sikre at brukerskriptet bare brukes på en bestemt nettside eller nettsider. I dette tilfellet vil følgende brukerskript bare kjøre på example.com (erstatt nettadressen i henhold til ditt krav) og alle sidene.

Skrive et brukerskript for å legge til en WhatsApp Share-knapp

På slutten av hver MakeUseOf-artikkel finner du en delingswidget for ulike sosiale medieplattformer, bortsett fra WhatsApp. Mens du kan kopiere og lime inn URL-en, er en WhatsApp-deleknapp nyttig hvis du ofte deler artikler på WhatsApp-gruppen din.

Du kan opprette et brukerskript i Tampermonkey for å legge til en WhatsApp-deleknapp på slutten av artikkelen. Vi vil integrere knappen i den eksisterende delewidgeten som lar deg dele nettsidens URL med WhatsApp-kontaktene dine.

La oss begynne med å lage en grunnleggende WhatsApp-deleknapp.

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

Nå som vi har en grunnleggende WhatsApp-deleknapp, la oss legge til litt styling til den. Dette vil gi knappen bakgrunns- og tekstfarge, kantlinje, utfylling og markørstil. Med litt fiksing kan du endre knappegenskapene for å finjustere 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 klar er det på tide å teste den. Men hvor plasserer du den? Som en vanlig praksis er ofte deleknappen plassert på slutten av artikler.

Men i dette tilfellet har vi allerede en delingswidget på slutten av hver artikkel. Så det er ideelt å gjøre denne deleknappen til en del av widgeten.

For å gjøre dette, vil vi inspisere den eksisterende delingswidgeten for å finne den overordnede beholderen som inneholder delingselementene for å finne den i brukerskriptet. Trykk på på nettsiden Ctrl + Shift + C for å åpne Inspiser element. Deretter velger du dele-widget-elementet på siden for å inspisere det.

Du vil se at det er en element med klassenavnet "deler bunn”. Du kan velge dette elementet ved å bruke querySelector metoden i brukerskriptet ditt.

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

Etter å ha valgt elementet, la oss sette inn deleknappen som et barn til det:

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

trykk Ctrl + S for å lagre skriptet. Hvis du laster inn siden på nytt, vil du se en deleknapp satt inn i den eksisterende delingswidgeten. Men å klikke på det vil ikke gjøre noe.

For å få knappen til å fungere, lager vi en funksjon for å generere en WhatsApp-dele URL basert på gjeldende sides URL. Du kan bruke location.href for å returnere sidens URL.

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

La oss deretter legge til en hendelseslytter til knappen. Når du klikker på den, åpner nettleseren en ny fane med en WhatsApp-delingskobling som lar deg skrive en melding.

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

Lagre og kjør brukerskriptet

Når du har brukerskriptet klart, trykk Ctrl + S for å lagre endringene. Åpne Installerte brukerskripter fanen i Tampermonkey for å se alle brukerskriptene som er installert i nettleseren din.

For å se brukerskriptet i aksjon, åpne målnettsiden. Du vil se en grønn Dele knapp. Hvis du klikker på knappen, blir du bedt om å åpne WhatsApp-skrivebordet, forutsatt at du har appen installert. Du kan deretter velge kontakten fra listen for å sende artikkellenken.

Du kan endre skriptet ytterligere for å legge til flere forbedringer. Du kan for eksempel vise WhatsApp-ikonet på knappen eller endre plasseringen ved hjelp av en InsertAfter()-funksjon.

Du kan aktivere, deaktivere eller redigere individuelle brukerskript fra Tampermonkey-dashbordet. Alternativt kan du klikke på Tampermonkey-ikonet i verktøylinjen for å deaktivere alle aktive brukerskript samtidig.

Gjøre inspiser elementendringer permanent ved å bruke Tampermonkey

Tampermonkey er en av mange tilgjengelige brukerskriptbehandlere som lar deg endre nettsider for å forbedre nettleseropplevelsen. Små modifikasjoner kan hjelpe til med bedre tilgjengelighet og fikse mindre irritasjoner med favorittnettstedet ditt.

Før du begynner å skrive et skript, sjekk om det allerede finnes et skript fra andre brukere. Vær imidlertid forsiktig med å installere tredjeparts brukerskript fra ukjente kilder for å unngå skadelig kode.