Anvendelse af JavaScript: User Scripts

Skrivning af et Brugerskript er en sjov måde at bruge dine JavaScript-færdigheder på. Det tager dig ud af redaktøren ind i browseren med feedback og validering i realtid.

Hvad er et bruger script?

Userscripts (aka User Scripts, User scripts eller .user.js) er open source-licenserede tilføjelser til webbrowsere, der ændrer websider, når de indlæses. De giver brugerne beføjelse til at få websteder til at gøre, hvad de vil have dem, snarere end hvad der oprindeligt var beregnet til.

Brugerscript er skrevet i JavaScript og giver dig mulighed for at tilpasse udseendet og følelsen af ​​en webside i din browser. Scriptene påvirker kun din browser, ikke den aktuelle webside.

En hurtig advarsel

Du skal være opmærksom på fortrolighedsproblemer, når du bruger usercripts, og bør ikke installere dem fra kilder, du ikke stoler på. Brugerskripter kan udføre handlinger på dine vegne og kan potentielt få adgang til alle oplysninger på et websted, du har adgang til, eller som du går ind på et websted. De har ofte tilladelse til at udføre funktioner, som scripts på normale websteder ikke kan, såsom at gemme oplysninger på din computer og dele dem mellem websteder. Dårligt skrevne usercripts kan potentielt også udnyttes af ondsindede websteder.

forklaringer taget fra //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Hvorfor brugerskripts?

Free Code Camp har mange fantastiske projekter i den virkelige verden, der vil berige dit færdighedssæt og din portefølje. Jeg kan personligt lide at bruge de færdigheder, jeg har lært i JavaScript, jQuery og CSS til at ændre min daglige browsing.

Nogle brugerskripter har været ekstremt populære og blev gjort til browserudvidelser. Et eksempel på en ville være Reddit Enhancement Suite, der findes på //redditenhancementsuite.com/.

Du kan også bruge dit brugerscript som base i en browserudvidelse!

Kom godt i gang

Brugerskripter køres fra selve browserudvidelser. Grease Monkey (FireFox) var pionerens tilføjelse for at give folk mulighed for at tilpasse deres browseroplevelse. Installer det relevante stik til din browser.

Til FireFox: Fedtaber

Mekaniker

Udviklingskanalen lader dig teste en eksperimentel ny version af denne tilføjelse, før den frigives til den generelle ... addons.mozilla.org

Til Chrome: Tamper Monkey

Tampermonkey

Den mest populære usercript manager til Blink-baserede browsere chrome.google.com

Til denne vejledning bruger jeg Chrome med Tamper Monkey.

Der skal ikke være nogen væsentlige forskelle med processen efter installation af enten Grease Monkey eller Tamper Monkey.

Bare i tilfælde, her er et hurtigt link til installation af Grease Monkey (samt lave et par ting med det.)

Greasemonkey Tutorial for begyndere

I Greasemonkey-tutorial har jeg dækket, hvordan man skriver Greasemonkey-brugerskripter. Efter denne tutorial vil du være i stand til ... hayageek.com

projektet

Vi vil foretage en lille ændring af hjemmesiden på Hacker News //news.ycombinator.com.

Vi bruger jQuery til at gøre alternerende links baggrundsfarver lidt forskellige for at forbedre læsbarheden.

start et nyt script

Klik på Tamper Monkey-ikonet øverst til højre, og vælg ' Tilføj et nyt script' i dialogboksen.

Du skal bringes til en ny fane, der ser sådan ud

Udfyld oplysningerne

Efter start af et nyt script er det første, vi vil gøre, at udfylde scriptoplysningerne øverst. Fortsæt og udfyld følgende attributter, hvor du vil

  • navn
  • beskrivelse
  • forfatter

Jeg vil også vise dig, hvordan min ligner.

Tilføj jQuery

lige før linjen

// ==/UserScript==

tilføj en linje med teksten til

// @require //code.jquery.com/jquery-latest.js

Tænk på dette som at importere / kræve jQuery til et JS-projekt.

her er min

Hej script.js!

Lad os se, om det vores script indlæses på //news.ycombinator.com, og jQuery er god at gå.

Efter // din kode her linje tilføj følgende kode

$(document).ready(function() { alert('WINNING');});

og indtast Ctrl + s eller klik på knappen Gem til venstre

Du kan blive bragt til den næste side. Hvis ikke, skal du klikke på fanen Installeret brugerbeskrivelse.

Fantastisk! Out script er indlæst i Tamper Monkey. Den grønne prik til venstre betyder, at scriptet er tændt. Du kan endda se Hacker News-logoet på skærmbilledet.

udfør scriptet

Besøg Hacker News i din browser, og hvis du har fulgt med, og alt gik godt, skulle du se

Tænd for fejlfindingsprogrammet

Det er tid til at finde de postelementer, vi vil ændre. Indtast Ctrl + Shift + i for at hente browserdebugger.

Nu vil vi vælge et element for at se nærmere på det. Ved at klikke på den blå firkant med musen øverst til venstre i fejlfindingsprogrammet åbnes elementvælgeren. Du kan også bruge nøglekommandoen Ctrl + Shift + c .

Som du kan se, fandt jeg et element kaldet td.title . Efter at have klikket på det, fremhæves elementet i elementfanen i fejlfindingsprogrammet (også vist ovenfor.)

Fremhæver elementet over vores titel kaldet

vælger dette i browseren

Bingo. Det ser ud til, at vi har fundet det element, vi ønsker. Hacker News har et rent HTML-layout, så det var ikke for svært at finde vores målelement.

Hvis du husker din jQuery, skal du bare bruge vælgeren til at finde alle postelementerne

$('.athing')

gør noget ved vores postelement

Nu hvor vi har en måde at vælge vores element med jQuery, kan vi ændre vores element. Lad os ændre baggrundsfarven på indlægene ved hjælp af følgende kode. Skift $ (dokument) .ready () -koden til dette

$(document).ready(function() { $('.athing').css('background-color', '#DDD');});

Bemærk: #DDD er stenografi for #DDDDDD;

lad os se på den resulterende side. Husk at gemme dit usercript, og opdater derefter HackerNews-siden. Det kan være nødvendigt at lukke din debugger for at se hele siden.

Er vi færdige endnu? Ikke helt. Vi har ændret alle vores postelementer i stedet for at skifte. Det kan se ud som den zebraeffekt, vi ønskede, men det er kun fordi score / subinfo-elementet ikke påvirkes. Hvis du også er tilbøjelig til at ændre dette element, er du velkommen til at skrive din metode i kommentarerne. Det er uden for denne vejlednings anvendelsesområde.

Åh nej?! Hvad gør vi ... Jeg vil ikke skrive nogen sløjfer!

jQuery til undsætning

Vær ikke bange, kolleger. jQuery er endnu en gang kommet til undsætning.

jQuery tilbyder specielle vælgere bare til en lejlighed som denne.

Nu introducerer vi : ulige

: ulige Selector

Beskrivelse: Vælger ulige elementer, nulindekseret. Se også selv. Bemærk især, at den 0-baserede indeksering betyder ... api.jquery.com

alt hvad vi skal gøre er at tilføje : ulige til slutningen af ​​vores vælger, så linjen ser sådan ud. Bemærk: Jeg har også ændret farven til #EEE; at blande sig bedre ind.

 $(‘.athing:odd’).css(‘background-color’, ‘#EEE’);

Gem dit script og opdater HackerNews, og du skal se dette endelige produkt

Indpakning

Der har du det. Nu har du endnu et kreativt afsætningsmulighed til at frigøre din spirende kodningsassistent! User Scripts kan bruges til at finjustere funktionaliteten eller udseendet på et websted for at tilføje en funktion, som du altid har ønsket, plus meget mere.

Lektier

Skriv dit eget brugerskript for at tilføje noget til et websted, du bruger ofte. Uanset om det er styling eller en knap, der kan skifte synlighed af visse elementer, det er alt op til dig. Giv dit produkt i kommentarerne her!

Gå ud og erobre campister!

Mere læsning

Tampermonkey

Tampermonkey er en gratis browserudvidelse og den mest populære usercript manager til Blink-baserede browsere som Chrome ... tampermonkey.net GreaseSpot Wiki

GreaseSpot er fællesskabsdokumentation til brugerscripting med Greasemonkey. wiki.greasespot.net Greasy Fork - sikre og nyttige brugerskripter

Brugerscript giver dig kontrol over din browseroplevelse. Når de er installeret, opretter de automatisk de websteder, du ... greasyfork.org Kom godt i gang: Opbygning af en Chrome-udvidelse

Udvidelser giver dig mulighed for at tilføje funktionalitet til Chrome uden at dykke dybt ned i den oprindelige kode. Du kan oprette nye ... developer.chrome.com Sådan udvikler du en Firefox-udvidelse

Dette blogindlæg er meget forældet. Hvis du vil have en nyere guide til udvikling af udvidelser, skal du læse den nye Hvordan ... blog.mozilla.org