Primjena JavaScript: Korisničke skripte

Pisanje korisničkog skripta zabavan je način korištenja JavaScript vještina. Vodi vas iz uređivača u preglednik s povratnim informacijama i provjerom valjanosti u stvarnom vremenu.

Što je korisnička skripta?

Userscripts (aka korisničke skripte, korisnički skripte ili .user.js) su open-source licencirani dodaci za web preglednike da je promjena web stranice kao što su se učitava. Daju korisnicima moć da natjeraju web stranice da rade ono što žele, a ne ono što je prvotno zamišljeno.

Korisničke skripte napisane su na JavaScript-u i omogućuju vam prilagođavanje izgleda i izgleda web stranice u vašem pregledniku. Skripte utječu samo na vaš preglednik, a ne na stvarnu web stranicu.

Brzo upozorenje

Trebali biste biti svjesni problema s privatnošću kada koristite korisničke skripte i ne biste ih trebali instalirati iz izvora u koje nemate povjerenja. Korisnički skripti mogu izvršavati radnje u vaše ime i potencijalno mogu pristupiti bilo kojim informacijama na web mjestu kojem imate pristup ili koje unesete na web mjesto. Često im je dopušteno izvršavati funkcije koje skripte na uobičajenim web mjestima ne mogu, poput pohrane podataka na vaše računalo i dijeljenja između web stranica. Loše napisane korisničke skripte potencijalno bi također mogle biti iskorištene od zlonamjernih web stranica.

objašnjenja preuzeta sa //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Zašto korisničke skripte?

Free Code Camp ima puno sjajnih projekata iz stvarnog svijeta koji će obogatiti vaš set vještina i portfolio. Osobno volim koristiti vještine koje sam naučio u JavaScript-u, jQuery-ju i CSS-u kako bih izmijenio svoje svakodnevno pregledavanje.

Neke su korisničke skripte izuzetno popularne i pretvorene su u proširenja preglednika. Primjer za to mogao bi biti Reddit Enhancement Suite koji se nalazi na //redditenhancementsuite.com/.

I vi biste mogli koristiti svoju korisničku skriptu kao osnovu proširenja preglednika!

Početak rada

Korisničke se skripte pokreću iz samih proširenja preglednika. Grease Monkey (FireFox) bio je pionirski dodatak koji je ljudima omogućio da prilagode svoje iskustvo pregledavanja. Instalirajte odgovarajući dodatak za svoj preglednik.

Za FireFox: Mast majmun

Greasemonkey

Razvojni kanal omogućuje vam testiranje eksperimentalne nove verzije ovog dodatka prije nego što je pušten u opću ... addons.mozilla.org

Za Chrome: Tamper Monkey

Tampermonkey

Najpopularniji upravitelj korisničkih skripti za preglednike temeljene na Blink chrome.google.com

Za ovaj tutorial koristit ću Chrome s Tamper Monkeyom.

Ne bi trebalo biti značajnih razlika u postupku nakon instalacije ili Grease Monkey ili Tamper Monkey.

Za svaki slučaj, evo kratke poveznice za instaliranje Grease Monkey (kao i nekoliko stvari s njim).

Vodič za početnike za Greasemonkey

U vodiču za Greasemonkey opisao sam kako pisati korisničke skripte za Greasemonkey. Nakon ovog vodiča moći ćete… hayageek.com

projekt

Učinit ćemo malu promjenu na početnoj stranici na Hacker News //news.ycombinator.com.

Koristit ćemo jQuery za stvaranje pozadinskih boja naizmjeničnih veza da bismo poboljšali čitljivost.

pokrenite novu skriptu

Kliknite ikonu Tamper Monkey u gornjem desnom kutu i odaberite " Dodaj novu skriptu" iz dijaloškog okvira.

Trebali biste biti odvedeni na novu karticu koja izgleda ovako

Ispunite podatke

Nakon pokretanja nove skripte prvo što želimo učiniti je ispuniti podatke o skripti na vrhu. Samo naprijed i ispunite sljedeće atribute koliko god želite

  • Ime
  • opis
  • Autor

Pokazat ću vam kako izgleda i moja.

Dodajte jQuery

neposredno prije crte

// ==/UserScript==

dodaj redak s tekstom

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

Shvatite to kao uvoz / zahtijevanje jQuery-a za JS projekt.

evo mog

Pozdrav script.js!

Da vidimo hoće li se naša skripta učitati na //news.ycombinator.com i jQuery je dobar za pokretanje.

Nakon retka // vaš kod ovdje dodajte sljedeći kod

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

i unesite Ctrl + s ili kliknite gumb za spremanje s lijeve strane

Možda ćete biti preusmjereni na sljedeću stranicu. Ako nije, kliknite karticu Instalirani skripti korisnika.

Super! Out skripta učitava se u Tamper Monkey. Zelena točka s lijeve strane znači da je skripta uključena. Na snimku zaslona možete čak vidjeti i logotip Hacker News.

izvršiti skriptu

Posjetite Hacker News u svom pregledniku i ako pratite i sve je prošlo u redu, trebali biste vidjeti

Upali program za ispravljanje pogrešaka

Vrijeme je da pronađemo elemente posta koje želimo izmijeniti. Unesite Ctrl + Shift + i da biste otvorili program za otklanjanje pogrešaka u pregledniku.

Sada želimo odabrati element kako bismo ga pobliže pogledali. Klikom na plavi kvadrat s mišem u gornjem lijevom kutu programa za otklanjanje pogrešaka otvorit će se birač elemenata. Također možete koristiti naredbu tipke Ctrl + Shift + c .

Kao što vidite, pronašao sam element nazvan td.title . Nakon klika na njega element je istaknut na kartici elemenata programa za ispravljanje pogrešaka (također prikazan gore.)

Isticanje elementa iznad našeg naslova tzv

odabire ovo u pregledniku

Bingo. Izgleda da smo pronašli element koji želimo. Hacker News ima čisti HTML izgled pa nije bilo previše teško pronaći naš ciljni element.

Ako se sjećate svog jQueryja, sve što trebate učiniti da biste pronašli sve elemente posta je korištenje selektora

$('.athing')

učiniti nešto s našim post elementom

Sada kada imamo način da odaberemo naš element pomoću jQuery, možemo promijeniti naš element. Promijenimo pozadinsku boju postova pomoću sljedećeg koda. Promijenite kod $ (document) .ready () u ovaj

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

napomena: #DDD je skraćenica za #DDDDDD;

pogledajmo rezultirajuću stranicu. Ne zaboravite spremiti svoj korisnički skript, a zatim osvježiti stranicu HackerNews. Možda ćete morati zatvoriti program za ispravljanje pogrešaka da biste pogledali cijelu stranicu.

Jesmo li već gotovi? Ne baš. Promijenili smo sve elemente posta umjesto da ih izmjenjujemo. Možda će izgledati kao zebra efekt koji smo željeli, ali to je samo zato što se ne postiže rezultat / podinformacija. Ako se osjećate skloni izmijeniti i taj element, slobodno objavite svoju metodu u komentarima. To je izvan dosega ovog vodiča.

O ne?! Što mi radimo ... Ne želim pisati nikakve petlje!

jQuery u pomoć

Ne bojte se, kolege kamperi. jQuery je još jednom priskočio u pomoć.

jQuery nudi posebne selektore samo za ovakvu priliku.

Sada uvodimo : ak

: neparan birač

Opis: Odabire neparne elemente, indeksirane nula. Vidi također čak. Konkretno, imajte na umu da indeksiranje na temelju 0 znači ... api.jquery.com

sve što moramo učiniti je dodati : odd na kraj našeg selektora tako da linija izgleda ovako. napomena: Također sam promijenio boju u #EEE; da se bolje stopi.

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

Spremite skriptu i osvježite HackerNews i trebali biste vidjeti ovaj konačni proizvod

Omotavanje

Izvolite. Sada imate još jednu kreativnu utičnicu u kojoj ćete razotkriti svoje čarobnjaštvo za kodiranje! Korisničke skripte mogu se koristiti za dotjerivanje funkcionalnosti ili izgleda web stranice, dodavanje značajke koju ste oduvijek željeli, plus mnogo više.

Domaća zadaća

Napišite vlastitu korisničku skriptu da biste nešto dodali web mjestu koje često koristite. Hoće li to biti styling ili gumb koji može uključiti ili isključiti vidljivost određenih elemenata, sve ovisi o vama. Navedite svoj proizvod u komentarima ovdje!

Idite naprijed i osvojite kampere!

Više čitanja

Tampermonkey

Tampermonkey je besplatno proširenje preglednika i najpopularniji upravitelj korisničkih skripti za preglednike temeljene na Blink poput Chromea ... tampermonkey.net GreaseSpot Wiki

GreaseSpot je dokumentacija zajednice za skriptiranje korisnika s Greasemonkey. wiki.greasespot.net Masna vilica - sigurne i korisne korisničke skripte

Korisničke skripte daju vam kontrolu nad vašim iskustvom pregledavanja. Jednom instalirani, automatski izrađuju web lokacije na kojima ... greasyfork.org Početak rada: Izrada proširenja za Chrome

Proširenja vam omogućuju dodavanje funkcionalnosti Chromeu bez dubokog uranjanja u izvorni kôd. Možete stvoriti novi… developer.chrome.com Kako razviti proširenje za Firefox

Ovaj je post na blogu vrlo zastario. Ako želite noviji vodič za razvoj proširenja, pročitajte novi Kako ... blog.mozilla.org