Taikoma „JavaScript“: Vartotojo scenarijai

Vartotojo scenarijaus rašymas yra įdomus būdas naudoti „JavaScript“ įgūdžius. Naudodamiesi realaus laiko atsiliepimais ir patvirtinimu, iš redaktoriaus pateksite į naršyklę.

Kas yra vartotojo scenarijus?

„Usercripts“ (dar žinomi kaip „User Scripts“, „User scripts“ arba .user.js) yra atviro kodo licencijuoti priedai, skirti žiniatinklio naršyklėms, kurios keičia tinklalapius juos įkeldamos . Jie suteikia vartotojams galią priversti svetaines daryti tai, ko jie nori, o ne tai, kas iš pradžių buvo numatyta.

Vartotojo scenarijai yra parašyti „JavaScript“ ir leidžia jums patobulinti savo naršyklės tinklalapio išvaizdą. Scenarijai veikia tik jūsų naršyklę, o ne tikrąjį tinklalapį.

Greitas įspėjimas

Naudodamiesi „usercripts“ turėtumėte žinoti apie privatumo problemas ir jų diegti iš nepatikimų šaltinių. „Usercripts“ gali atlikti veiksmus jūsų vardu ir gali pasiekti bet kokią informaciją svetainėje, prie kurios turite prieigą arba kurią įvedate į svetainę. Jiems dažnai leidžiama atlikti funkcijas, kurių scenarijai įprastose svetainėse negali, pavyzdžiui, saugoti informaciją jūsų kompiuteryje ir dalytis ja tarp svetainių. Blogai parašytus naudotojo kodus taip pat gali panaudoti kenkėjiškos svetainės.

paaiškinimai paimti iš //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Kodėl vartotojo scenarijai?

„Free Code Camp“ turi daugybę puikių realaus pasaulio projektų, kurie praturtins jūsų įgūdžių rinkinį ir portfolio. Man asmeniškai patinka naudoti „JavaScript“, „jQuery“ ir CSS išmoktus įgūdžius, kad galėčiau modifikuoti savo kasdienį naršymą.

Kai kurie vartotojo scenarijai buvo itin populiarūs ir iš jų buvo sukurti naršyklės plėtiniai. Vieno pavyzdys galėtų būti „Reddit Enhancement Suite“, kurį rasite adresu //redditenhancementsuite.com/.

Jūs taip pat galėtumėte naudoti savo vartotojo scenarijų kaip naršyklės plėtinio pagrindą!

Darbo pradžia

Vartotojo scenarijai paleidžiami iš pačių naršyklės plėtinių. „Grease Monkey“ („Firefox“) buvo pradininkas, leidžiantis žmonėms pritaikyti naršymo patirtį. Įdiekite atitinkamą naršyklės papildinį.

„Firefox“: tepkite beždžionę

Greasemonkey

„Development Channel“ leidžia išbandyti naują eksperimentinę šio priedo versiją prieš ją išleidžiant į bendrą ... addons.mozilla.org

„Chrome“: „ Tamper Monkey“

Tampermonkey

Populiariausias „Blink“ pagrįstų naršyklių „usercript“ tvarkyklė chrome.google.com

Šioje pamokoje naudosiu „Chrome“ su „Tamper Monkey“.

Įdiegus „Grease Monkey“ arba „Tamper Monkey“, neturėtų būti jokių reikšmingų skirtumų.

Tik tuo atveju, čia yra greita nuoroda į „Grease Monkey“ įdiegimą (taip pat keletą dalykų su juo.)

„Greasemonkey“ pamoka pradedantiesiems

„Greasemonkey“ pamokoje aprašiau, kaip rašyti „Greasemonkey“ vartotojo scenarijus. Po šios pamokos galėsite ... hayageek.com

projektas

Mes šiek tiek pakeisime pagrindinį puslapį „Hacker News“ //news.ycombinator.com.

Mes naudosime „jQuery“, kad pakaitinių nuorodų fono spalvos būtų šiek tiek kitokios, kad būtų lengviau skaityti.

pradėti naują scenarijų

Viršuje dešinėje spustelėkite piktogramą „Tamper Monkey ir dialogo lange pasirinkite „ Pridėti naują scenarijų“ .

Turėtumėte patekti į naują skirtuką, kuris atrodo taip

Užpildykite informaciją

Pradėję naują scenarijų, pirmiausia norime užpildyti scenarijaus informaciją viršuje. Pirmyn užpildykite šiuos atributus, kaip norite

  • vardas
  • apibūdinimas
  • autorius

Aš jums parodysiu, kaip atrodo ir mano.

Pridėti „jQuery“

prieš pat eilutę

// ==/UserScript==

pridėti eilutę su tekstu

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

Pagalvokite apie tai kaip apie „jQuery“ importavimą / reikalavimą JS projektui.

čia mano

Sveiki, script.js!

Pažiūrėkime, ar mūsų scenarijus įkeliamas į //news.ycombinator.com, o „jQuery“ yra gera eiti.

Po // jūsų kodas čia eilute pridėkite šį kodą

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

ir įveskite „ Ctrl + s“ arba spustelėkite kairėje esantį mygtuką „Išsaugoti“

Jus gali patekti į šį puslapį. Jei ne, spustelėkite skirtuką Įdiegti vartotojai.

Nuostabu! Out scenarijus įkeliamas į Tamper Monkey. Žalias taškas kairėje reiškia, kad scenarijus įjungtas. Ekrano kopijoje galite pamatyti net „Hacker News“ logotipą.

vykdyti scenarijų

Apsilankykite „Hacker News“ savo naršyklėje ir, jei sekėte iš paskos ir viskas pavyko gerai, turėtumėte pamatyti

Sušaudykite derintoją

Atėjo laikas rasti įrašo elementus, kuriuos norime modifikuoti. Įveskite „ Ctrl“ + „Shift“ + i , kad atidarytumėte naršyklės derintuvą.

Dabar norime pasirinkti elementą, kad galėtume atidžiau pažvelgti. Spustelėjus mėlyną kvadratą su pele, esančiu derintuvo viršuje, kairėje, atsidarys elementų parinkiklis. Taip pat galite naudoti klavišų komandą „ Ctrl“ + „Shift“ + c .

Kaip matote, radau elementą, vadinamą td.title . Spustelėjus ant jo, derintuvo elementų skirtuke (taip pat parodyta aukščiau) elementas paryškinamas.

Paryškinant elementą virš mūsų pavadinimo vadinamas

tai pasirenka naršyklėje

Bingo. Panašu, kad radome norimą elementą. „Hacker News“ turi švarų HTML išdėstymą, todėl nebuvo labai sunku rasti tikslinį elementą.

Jei prisimenate „jQuery“, viskas, ką turite padaryti, kad rastumėte visus įrašo elementus, yra naudoti selektorių

$('.athing')

padaryti ką nors mūsų posto elementui

Dabar, kai turime būdą pasirinkti elementą naudodami „jQuery“, galime pakeisti elementą. Pakeiskime įrašų fono spalvą naudodami šį kodą. Pakeiskite kodą $ (document) .ready () į šį

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

pastaba: #DDD yra #DDDDDD trumpinys;

pažvelkime į gautą puslapį. Nepamirškite išsaugoti savo „usercript“, tada atnaujinkite „HackerNews“ puslapį. Jei norite peržiūrėti visą puslapį, gali tekti uždaryti derintuvą.

Ar mes jau baigėme? Ne visai. Mes pakeitėme visus savo pranešimo elementus, užuot pakaitomis. Tai gali atrodyti kaip norimas zebro efektas, bet taip yra tik todėl, kad rezultatas / subinfo elementas neveikia. Jei jaučiatės linkę pakeisti ir šį elementą, prašome tai padaryti ir nedvejodami paskelbkite savo metodą komentaruose. Tai nepatenka į šio vadovo taikymo sritį.

O ne ?! Ką mes darome ... Aš nenoriu rašyti jokių ciklų!

jQuery į pagalbą

Nebijokite, kolegos stovyklautojai. „jQuery“ vėl atėjo į pagalbą.

„jQuery“ teikia specialius selektorius būtent tokiai progai.

Dabar pristatome : nelyginis

: nelyginis parinkiklis

Aprašymas: pasirenkami nelyginiai elementai, indeksuojami nuliniu būdu. Taip pat žiūrėkite net. Visų pirma atkreipkite dėmesį, kad indeksavimas 0 pagrįstas reiškia „ api.jquery.com“

viskas, ką turime padaryti, yra pridėti : keista iki mūsų pasirinkiklio galo, kad eilutė atrodytų taip. pastaba: aš taip pat pakeičiau spalvą į #EEE; kad geriau įsilietų.

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

Išsaugokite scenarijų ir atnaujinkite „HackerNews“, ir turėtumėte pamatyti šį galutinį produktą

Apvyniojimas

Štai ką tu turi. Dabar turite dar vieną kūrybinę išeitį, kad galėtumėte išlaisvinti savo pradedantį kodavimo vedlį! Vartotojo scenarijai gali būti naudojami patobulinant svetainės funkcionalumą ar išvaizdą, norint pridėti funkciją, kurios visada norėjote, ir dar daug daugiau.

Namų darbai

Parašykite savo vartotojo scenarijų, kad ką nors pridėtumėte prie dažnai naudojamo tinklalapio. Nesvarbu, ar tai būtų stilius, ar mygtukas, galintis pakeisti tam tikrų elementų matomumą, viskas priklauso nuo jūsų. Pateikite savo produktą komentaruose čia!

Eik ir užkariauk kemperius!

Daugiau skaitymo

Tampermonkey

„Tampermonkey“ yra nemokamas naršyklės plėtinys ir populiariausias „Blink“ pagrindu veikiančių naršyklių, pvz., „Chrome“, vartotojų scenarijų valdytojas ... tampermonkey.net „ GreaseSpot Wiki“

„GreaseSpot“ yra bendruomenės dokumentai, skirti vartotojo scenarijams su „Greasemonkey“. wiki.greasespot.net Greasy Fork - saugūs ir naudingi vartotojo scenarijai

Naudodami scenarijus galite valdyti savo naršymo patirtį. Įdiegę jie automatiškai sukuria jūsų svetaines… greasyfork.org Pradžia: „Chrome“ plėtinio kūrimas

Plėtiniai leidžia jums pridėti „Chrome“ funkcijų, giliai neriant į gimtąjį kodą. Galite sukurti naują… developer.chrome.com Kaip sukurti „Firefox“ plėtinį

Šis tinklaraščio įrašas yra labai pasenęs. Jei norite gauti naujesnį plėtinių kūrimo vadovą, perskaitykite naują „How to… blog.mozilla.org“