de Thomas Noe

Aplicarea JavaScript: Scripturi de utilizator

Aplicarea JavaScript Scripturi de utilizator
Credit de artă

Scrierea unui Usercript este un mod distractiv de a vă folosi abilitățile JavaScript. Vă scoate din editor în browser cu feedback și validare în timp real.

Ce este un script de utilizator?

Scripturi de utilizator (aka Scripturi de utilizator, Scripturi de utilizator sau .user.js) sunt programe de completare cu licență open-source pentru browsere web care schimbă paginile web pe măsură ce sunt încărcate. Ele oferă utilizatorilor puterea de a face site-urile web să facă ceea ce doresc, mai degrabă decât ceea ce a fost intenționat inițial.

Scripturile de utilizator sunt scrise în JavaScript și vă permit să modificați aspectul unei pagini web din browser. Scripturile afectează numai browserul dvs., nu pagina web reală.

Un avertisment rapid

Ar trebui să fiți conștienți de problemele de confidențialitate atunci când utilizați scripturile utilizatorilor și nu ar trebui să le instalați din surse în care nu aveți încredere. Scripturile utilizatorilor pot efectua acțiuni în numele dvs. și pot accesa orice informații de pe un site web la care aveți acces sau pe care le introduceți pe un site web. Adesea li se permite să îndeplinească funcții pe care scripturile de pe site-urile web normale nu le pot, cum ar fi stocarea informațiilor pe computerul dvs. și partajarea acestora între site-ul web. Scrierile utilizatorilor scrise greșit ar putea fi, de asemenea, potențial exploatate de site-uri web dăunătoare.

explicații preluate din https://github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

De ce scripturi de utilizator?

Free Code Camp are o mulțime de proiecte extraordinare din lumea reală, care vă vor îmbogăți setul de abilități și portofoliul. Personal îmi place să folosesc abilitățile pe care le-am învățat în JavaScript, jQuery și CSS pentru a-mi modifica navigarea de zi cu zi.

Unele scripturi de utilizator au fost extrem de populare și au fost transformate în extensii de browser. Un exemplu ar putea fi Reddit Enhancement Suite găsit la http://redditenhancementsuite.com/.

Și dvs. puteți utiliza scriptul dvs. de utilizator ca bază a unei extensii de browser!

Noțiuni de bază

Scripturile de utilizator sunt rulate chiar de la extensiile de browser. Grease Monkey (FireFox) a fost pionierul pentru a permite oamenilor să își personalizeze experiența de navigare. Instalați plug-in-ul corespunzător pentru browser.

Pentru FireFox: Maimuță unsuroasă

Maimuță unsuroasă
Canalul de dezvoltare vă permite să testați o nouă versiune experimentală a acestui supliment înainte de a fi lansată în general …addons.mozilla.org

Pentru Chrome: Tamper Monkey

Tampermonkey
Cel mai popular manager de scripturi pentru utilizatori pentru browserele bazate pe Blinkchrome.google.com

Pentru acest tutorial voi folosi Chrome cu Tamper Monkey.

Nu ar trebui să existe diferențe semnificative cu procesul după instalarea Grease Monkey sau Tamper Monkey.

Pentru orice eventualitate, iată un link rapid către instalarea Grease Monkey (precum și realizarea câtorva lucruri cu el.)

Tutorial Greasemonkey pentru începători
În tutorialul Greasemonkey, am prezentat cum să scriu scripturile de utilizator Greasemonkey. După acest tutorial, veți putea …hayageek.com

proiectul

Vom face o ușoară modificare a paginii de start de pe Hacker News http://news.ycombinator.com.

1612107187 618 Aplicarea JavaScript Scripturi de utilizator
Pagina de pornire HackerNews

Vom folosi jQuery pentru a face ca alternativele culorilor de fundal ale legăturilor să fie ușor diferite pentru a îmbunătăți lizibilitatea.

începeți un nou script

Faceți clic pe pictograma Tamper Monkey din dreapta sus și selectați „Adăugați un nou script ‘ din caseta de dialog.

Ar trebui să fiți adus la o filă nouă care arată astfel

1612107187 443 Aplicarea JavaScript Scripturi de utilizator
pagină de script nouă

Completați informațiile

După începerea unui script nou, primul lucru pe care vrem să-l facem este să completați informațiile despre script în partea de sus. Continuați și completați următoarele atribute oricând doriți

  • Nume
  • Descriere
  • autor

Îți voi arăta și cum arată al meu.

Adăugați jQuery

chiar înainte de linie

// ==/UserScript==

adăugați o linie cu textul

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

Gândiți-vă la acest lucru ca la importarea / necesitatea jQuery pentru un proiect JS.

aici este a mea

1612107188 662 Aplicarea JavaScript Scripturi de utilizator
informații despre script completate

Bună ziua script.js!

Să vedem dacă se încarcă scriptul nostru http://news.ycombinator.com și jQuery este bine să mergi.

După // codul dvs. aici linie adăugați următorul cod

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

și intră Ctrl + s sau faceți clic pe butonul de salvare din stânga

Puteți fi adus la pagina următoare. Dacă nu, faceți clic pe fila Usercripts instalate.

1612107188 638 Aplicarea JavaScript Scripturi de utilizator
pagina de scripturi de utilizator instalată

Minunat! Scriptul Out este încărcat în Tamper Monkey. Punctul verde din stânga înseamnă că scriptul este pornit. Puteți vedea chiar și sigla Hacker News în captura de ecran.

executați scriptul

Vizita Știri despre hackeri în browserul dvs. și dacă ați urmărit și totul a mers bine, ar trebui să vedeți

1612107188 504 Aplicarea JavaScript Scripturi de utilizator
dialog de alertă de lucru

Porniți depanatorul

Este timpul să găsim elementele postării pe care dorim să le modificăm. introduce Ctrl + Shift + i pentru a afișa depanatorul browserului.

Acum vrem să selectăm un element pentru a arunca o privire mai atentă. Dacă faceți clic pe pătratul albastru cu mouse-ul în partea stângă sus a debuggerului, se va deschide selectorul de elemente. De asemenea, puteți utiliza comanda cheie Ctrl + Shift + c.

1612107188 958 Aplicarea JavaScript Scripturi de utilizator
selector de elemente

După cum puteți vedea, am găsit un element numit td.title. După ce faceți clic pe el, elementul este evidențiat în fila Elemente a depanatorului (de asemenea, afișat mai sus.)

Evidențierea elementului de deasupra titlului nostru numit

<tr class="athing">

selectează acest lucru în browser

1612107188 657 Aplicarea JavaScript Scripturi de utilizator
BINGO

Bingo. Se pare că am găsit elementul dorit. Hacker News are un aspect HTML curat, astfel încât nu a fost prea dificil să găsim elementul nostru țintă.

Dacă vă amintiți jQuery, tot ce trebuie să faceți pentru a găsi toate elementele postării este să folosiți selectorul

$('.athing')

faceți ceva elementului nostru de postare

Acum că avem o modalitate de a selecta elementul nostru cu jQuery ne putem modifica elementul. Să schimbăm culoarea de fundal a postărilor folosind următorul cod. Schimbați codul $ (document) .ready () cu acesta

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

notă: #DDD este prescurtarea pentru #DDDDDD;

să ne uităm la pagina rezultată. Nu uitați să salvați scrierea utilizatorului, apoi să reîmprospătați pagina HackerNews. Este posibil să fie necesar să închideți depanatorul pentru a vedea întreaga pagină.

1612107188 87 Aplicarea JavaScript Scripturi de utilizator
prima pagină modificată a Hacker News

Am terminat deja? Nu chiar. Am schimbat toate elementele postării noastre în loc să alternăm. Poate arăta ca efectul zebră pe care l-am dorit, dar asta doar pentru că elementul scor / subinfo nu este efectuat. Dacă vă simțiți înclinați să modificați și acel element, vă rugăm să faceți acest lucru și nu ezitați să postați metoda dvs. în comentarii. Nu intră în sfera acestui ghid.

Oh nu?! Ce facem … Nu vreau să scriu nicio buclă!

jIntrebare la salvare

Nu vă temeți, colegi de camping. jQuery a venit din nou în ajutor.

jQuery oferă selectoare speciale doar pentru o astfel de ocazie.

Acum introducem :ciudat

: Selector ciudat
Descriere: Selectează elemente impare, indexate zero. A se vedea, de asemenea, chiar. În special, rețineți că indexarea bazată pe 0 înseamnă …api.jquery.com

tot ce trebuie să facem este să adăugăm :ciudat până la capătul selectorului nostru, astfel încât linia să arate astfel. notă: De asemenea, am schimbat culoarea în #EEE; pentru a se amesteca mai bine.

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

Salvați scriptul și actualizați HackerNews și ar trebui să vedeți acest produs final

1612107188 597 Aplicarea JavaScript Scripturi de utilizator
produs final

Înfășurându-se

Iată-l. Acum aveți o altă ieșire creativă pentru a vă dezlănțui vrăjitoria de codare în devenire! Scripturile de utilizator pot fi folosite pentru a modifica funcționalitatea sau aspectul unui site, pentru a adăuga o caracteristică pe care ți-ai dorit-o dintotdeauna, plus multe altele.

Teme pentru acasă

Scrieți propriul script de utilizator pentru a adăuga ceva la un site web pe care îl utilizați des. Fie că este vorba de stil sau de un buton care poate comuta vizibilitatea anumitor elemente, depinde de tine. Furnizați produsul în comentariile de aici!

Mergeți și cuceriți Campers!

Mai multe lecturi

Tampermonkey
Tampermonkey este o extensie gratuită de browser și cel mai popular manager de scripturi pentru utilizatori pentru browserele bazate pe Blink, cum ar fi Chrome …tampermonkey.netWiki GreaseSpot
GreaseSpot este documentația comunității pentru scriptarea utilizatorilor cu Greasemonkey.wiki.greasespot.netGreasy Fork – scripturi de utilizator sigure și utile
Scripturile utilizatorului vă permit să controlați experiența de navigare. Odată instalate, acestea vă fac automat site-urile …greasyfork.orgNoțiuni introductive: construirea unei extensii Chrome
Extensiile vă permit să adăugați funcționalități Chrome fără a vă scufunda profund în codul nativ. Puteți crea noi …developer.chrome.comCum se dezvoltă o extensie Firefox
Această postare pe blog este foarte depășită. Dacă doriți un ghid mai recent pentru dezvoltarea extensiilor, vă rugăm să citiți noul Cum să …blog.mozilla.org