JavaScript tiek lietots: Lietotāju skripti

Usercript rakstīšana ir jautrs veids, kā izmantot JavaScript prasmes. Ar reāllaika atgriezenisko saiti un apstiprināšanu jūs varat izņemt no redaktora pārlūkprogrammā.

Kas ir lietotāja skripts?

Userscripts (aka lietotāja skriptus, Lietotāju skripti vai .user.js) ir atvērtā koda licencēti add-ons tīmekļa pārlūkiem, ka pārmaiņas interneta lapas, jo tie ir piekrauts. Tie dod lietotājiem iespēju likt vietnēm darīt to, ko viņi vēlas, nevis sākotnēji iecerēto.

Lietotāju skripti ir uzrakstīti JavaScript un ļauj jums pielāgot jūsu pārlūkprogrammas tīmekļa izskatu. Skripti ietekmē tikai jūsu pārlūkprogrammu, nevis faktisko vietni.

Ātrs brīdinājums

Lietojot usercripts, jums jāzina par privātuma problēmām un nevajadzētu tos instalēt no avotiem, kuriem neuzticaties. Userscripts var veikt darbības jūsu vārdā un, iespējams, piekļūt jebkurai informācijai vietnē, kurai esat piekļuvis vai kuru ievadāt vietnē. Viņiem bieži ir atļauts veikt funkcijas, kuras skripti parastās vietnēs nevar, piemēram, informācijas glabāšana datorā un koplietošana starp vietnēm. Ļaunprātīgas vietnes potenciāli var izmantot arī nepareizi uzrakstītus lietotāju parakstus.

paskaidrojumi ņemti no //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO

Kāpēc lietotāju skripti?

Bezmaksas Code Camp ir daudz lielisku reālās pasaules projektu, kas bagātinās jūsu prasmju kopumu un portfeli. Man personīgi patīk izmantot JavaScript, jQuery un CSS apgūtās prasmes, lai mainītu ikdienas pārlūkošanu.

Daži lietotāju skripti ir bijuši ārkārtīgi populāri, un no tiem tika izveidoti pārlūka paplašinājumi. Piemērs tam varētu būt Reddit Enhancement Suite, kas atrodams vietnē //redditenhancementsuite.com/.

Arī jūs varētu izmantot savu lietotāja skriptu kā pārlūka paplašinājuma pamatu!

Darba sākšana

Lietotāju skripti tiek palaisti no pārlūkprogrammas paplašinājumiem. Grease Monkey (FireFox) bija pionieru papildinājums, kas ļāva cilvēkiem pielāgot pārlūkošanas pieredzi. Instalējiet pārlūkprogrammai atbilstošo spraudni.

Firefox: Tauku mērkaķis

Greasemonkey

Attīstības kanāls ļauj pārbaudīt šī papildinājuma eksperimentālu jaunu versiju, pirms tā tiek izlaista vispārīgajā… addons.mozilla.org

Pārlūkam Chrome: Tamper Monkey

Tampermonkey

Populārākais uz Blink balstīto pārlūkprogrammu lietotāju skriptu pārvaldnieks chrome.google.com

Šajā apmācībā es izmantošu pārlūku Chrome kopā ar Tamper Monkey.

Pēc Grease Monkey vai Tamper Monkey instalēšanas procesā nedrīkst būt nekādu būtisku atšķirību.

Katram gadījumam šeit ir ātra saite uz Grease Monkey instalēšanu (kā arī ar to izveidojot dažas lietas).

Greasemonkey apmācība iesācējiem

Greasemonkey apmācībā esmu apskatījis, kā rakstīt Greasemonkey lietotāja skriptus. Pēc šīs apmācības jūs varēsiet ... hayageek.com

projekts

Mēs nedaudz mainīsim mājas lapu vietnē Hacker News //news.ycombinator.com.

Mēs izmantosim jQuery, lai mainītu saišu fona krāsas nedaudz atšķirīgas, lai uzlabotu lasāmību.

sākt jaunu skriptu

Augšējā labajā stūrī noklikšķiniet uz ikonas Tamper Monkey un dialoglodziņā atlasiet Pievienot jaunu skriptu .

Jums vajadzētu nokļūt jaunā cilnē, kas izskatās šādi

Aizpildiet informāciju

Pēc jauna skripta sākšanas pirmā lieta, ko mēs vēlamies darīt, ir augšpusē aizpildīt skripta informāciju. Turpiniet un aizpildiet šādus atribūtus, cik vien vēlaties

  • nosaukums
  • apraksts
  • autors

Es jums parādīšu, kā izskatās arī mans.

Pievienojiet jQuery

tieši pirms līnijas

// ==/UserScript==

pievienot rindu ar tekstu

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

Padomājiet par to kā par jQuery importēšanu / pieprasīšanu JS projektam.

šeit ir mans

Labdien, script.js!

Apskatīsim, vai mūsu skripts tiek ielādēts vietnē //news.ycombinator.com, un jQuery ir labi iet.

Pēc // jūsu kods šeit rindiņa pievienojiet šādu kodu

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

un ievadiet Ctrl + s vai noklikšķiniet uz pogas Saglabāt kreisajā pusē

Jūs varat novirzīt uz nākamo lapu. Ja nē, noklikšķiniet uz cilnes Instalētie lietotāju skripti.

Satriecošs! Out skripts tiek ielādēts Tamper Monkey. Zaļais punkts kreisajā pusē nozīmē, ka skripts ir ieslēgts. Ekrānuzņēmumā jūs pat varat redzēt Hacker News logotipu.

izpildīt skriptu

Apmeklējiet Hacker News savā pārlūkprogrammā, un, ja jūs sekojat līdzi, un viss noritēja labi, jums to vajadzētu redzēt

Ieslēdziet atkļūdotāju

Ir pienācis laiks atrast ziņas elementus, kurus vēlamies modificēt. Ievadiet Ctrl + Shift + i, lai atvērtu pārlūkprogrammas atkļūdotāju.

Tagad mēs vēlamies izvēlēties elementu, lai to aplūkotu tuvāk. Noklikšķinot uz zilā kvadrāta ar peli, kas atrodas atkļūdotāja augšējā kreisajā stūrī, tiks atvērts elementu atlasītājs. Varat arī izmantot taustiņu komandu Ctrl + Shift + c .

Kā redzat, es atradu elementu ar nosaukumu td.title . Pēc noklikšķināšanas uz tā atkļūdotāja cilnē elementi tiek izcelts elements (parādīts arī iepriekš).

Izceļot elementu virs mūsu nosaukuma sauc

atlasa to pārlūkprogrammā

Bingo. Izskatās, ka mēs atradām vēlamo elementu. Hacker News ir tīrs HTML izkārtojums, tāpēc nebija pārāk grūti atrast mūsu mērķa elementu.

Ja atceraties savu jQuery, viss, kas jums jādara, lai atrastu visus ziņas elementus, ir izmantot selektoru

$('.athing')

dariet kaut ko mūsu amata elementam

Tagad, kad mums ir veids, kā atlasīt elementu ar jQuery, mēs varam mainīt savu elementu. Mainīsim amatu fona krāsu, izmantojot šādu kodu. Mainiet kodu $ (document) .ready () uz šo

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

piezīme: #DDD ir stenogramma #DDDDDD;

apskatīsim iegūto lapu. Neaizmirstiet saglabāt savu usercript un pēc tam atsvaidzināt HackerNews lapu. Lai apskatītu visu lapu, jums, iespējams, būs jāaizver atkļūdotājs.

Vai mēs jau esam pabeiguši? Ne īsti. Mēs esam mainījuši visus savus amata elementus, nevis pārmaiņus. Tas var izskatīties kā vēlamais zebras efekts, bet tas ir tikai tāpēc, ka rezultāts / apakšinformācijas elements netiek izpildīts. Ja jums šķiet, ka vēlaties mainīt arī šo elementu, lūdzu, dariet to un nekautrējieties publicēt savu metodi komentāros. Tas nav šīs rokasgrāmatas darbības jomā.

Ak nē?! Ko mēs darām ... Es nevēlos rakstīt nevienu cilpu!

jQuery glābšanai

Nebaidieties, kolēģi Kemperi. jQuery atkal ir nācis talkā.

jQuery nodrošina īpašus atlasītājus tieši šādam gadījumam.

Tagad ievieš : nepāra

: nepāra atlasītājs

Apraksts: atlasa nepāra elementus, kas indeksēti ar nulli. Skatīt arī pat. Īpaši ņemiet vērā, ka indeksēšana uz 0 bāzes nozīmē… api.jquery.com

viss, kas mums jādara, ir mūsu selektora beigās pievienot : nepāra, lai līnija izskatās šādi. piezīme: Es arī esmu mainījis krāsu uz #EEE; labāk saplūst.

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

Saglabājiet skriptu un atsvaidziniet HackerNews, un jums vajadzētu redzēt šo gala produktu

Iesaiņošana

Tur jums tas ir. Tagad jums ir vēl viena radoša izeja, lai atraisītu savu iesākošo kodēšanas burvību! Lietotāju skriptus var izmantot, lai uzlabotu vietnes funkcionalitāti vai izskatu, lai pievienotu vienmēr vēlamo funkciju, kā arī daudz ko citu.

Mājasdarbs

Uzrakstiet savu lietotāja skriptu, lai kaut ko pievienotu vietnei, kuru bieži lietojat. Vai tas būtu stils vai poga, kas var mainīt noteiktu elementu redzamību, viss ir atkarīgs no jums. Norādiet savu produktu komentāros šeit!

Iet uz priekšu un iekarojiet kemperus!

Vairāk lasu

Tampermonkey

Tampermonkey ir bezmaksas pārlūka paplašinājums un vispopulārākais Blink balstītu pārlūku, piemēram, Chrome, lietotāju skriptu pārvaldnieks ... tampermonkey.net GreaseSpot Wiki

GreaseSpot ir kopienas dokumentācija lietotāju skriptiem ar Greasemonkey. wiki.greasespot.net Greasy Fork - droši un noderīgi lietotāju skripti

Lietotāju skripti ļauj jums kontrolēt pārlūkošanas pieredzi. Pēc instalēšanas viņi automātiski izveido vietnes, kuras jūs… greasyfork.org Darba sākšana: Chrome paplašinājuma izveide

Paplašinājumi ļauj jums pievienot pārlūkam Chrome funkcionalitāti, neiedziļinoties vietējā kodā. Jūs varat izveidot jaunu ... developer.chrome.com Kā izveidot Firefox paplašinājumu

Šis emuāra ziņojums ir ļoti novecojis. Ja vēlaties saņemt jaunāku paplašinājumu izstrādes ceļvedi, lūdzu, izlasiet jauno How to… blog.mozilla.org