JavaScript alkalmazása: Felhasználói szkriptek

Felhasználói index megírása szórakoztató módja a JavaScript-ismeretek használatának. Valós idejű visszajelzéssel és érvényesítéssel kivisz a szerkesztőből a böngészőbe.

Mi a felhasználói szkript?

A Usercripts (más néven Felhasználói szkriptek, Felhasználói szkriptek vagy .user.js) nyílt forráskódú licencelt bővítmények azokhoz a böngészőkhöz, amelyek betöltés közben megváltoztatják a weboldalakat. Megadják a felhasználóknak azt az erőt, hogy a webhelyek azt tegyék meg, amit akarnak, ahelyett, hogy eredetileg szánták volna.

A felhasználói szkriptek JavaScript-ben vannak megírva, és lehetővé teszik a weboldal megjelenésének és hangulatának módosítását a böngészőben. A szkriptek csak a böngészőre hatnak, a tényleges weboldalra nem.

Gyors figyelmeztetés

A usercripts használatakor tisztában kell lennie az adatvédelmi problémákkal, és nem szabad olyan forrásokból telepítenie, amelyekben nem bízik. A Usercripts végezhet műveleteket az Ön nevében, és potenciálisan hozzáférhet minden olyan információhoz, amelyhez Ön hozzáfér, vagy amelyet Ön belép egy webhelyre. Gyakran megengedik nekik, hogy olyan funkciókat hajtsanak végre, amelyeket a normál webhelyeken lévő szkriptek nem tehetnek meg, például információkat tárolhatnak a számítógépükön és megoszthatnak a webhelyek között. A rosszul írt felhasználói dokumentumokat rosszindulatú webhelyek is kihasználhatják.

magyarázatok a //github.com/OpenUserJs/OpenUserJS.org/wiki/Userscript-Beginners-HOWTO oldalról

Miért felhasználói szkriptek?

A Free Code Camp rengeteg nagyszerű valós projektet tartalmaz, amelyek gazdagítják készségkészletét és portfólióját. Én személy szerint szeretem használni a JavaScriptben, a jQuery-ben és a CSS-ben megtanult készségeket a napi böngészés módosítására.

Egyes felhasználói szkriptek rendkívül népszerűek voltak, és böngészőbővítményekké alakultak. Ilyen például a Reddit Enhancement Suite, amely a //redditenhancementsuite.com/ címen található.

Te is használhatnád felhasználói szkriptedet egy böngésző kiterjesztés alapjaként!

Elkezdeni

A felhasználói szkripteket maguk a böngészőbővítmények futtatják. A Grease Monkey (FireFox) volt az úttörő kiegészítő, amely lehetővé tette az emberek számára, hogy testreszabják böngészési élményüket. Telepítse a megfelelő bővítményt a böngészőhöz.

A Firefox számára: Grease Monkey

Greasemonkey

A Fejlesztési Csatorna segítségével tesztelheti ennek a kiegészítésnek egy kísérleti új verzióját, mielőtt az megjelenik az általános… addons.mozilla.org

Chrome-hoz: Tamper Monkey

Tampermonkey

A legnépszerűbb felhasználói index-kezelő a blink-alapú böngészőkhöz: chrome.google.com

Ehhez az oktatóanyaghoz a Chrome-ot fogom használni a Tamper Monkey-vel.

A Grease Monkey vagy a Tamper Monkey telepítése után nem lehet jelentős különbség a folyamatban.

Minden esetre itt van egy gyors link a Grease Monkey telepítéséhez (valamint néhány dolog elkészítéséhez).

Greasemonkey bemutató kezdőknek

A Greasemonkey bemutatóban kitértem a Greasemonkey felhasználói szkriptek írására. Ez az oktatóanyag után képes lesz… hayageek.com

a projekt

Kicsit változtatni fogunk a Hacker News //news.ycombinator.com honlapján.

A jQuery használatával a váltakozó linkek háttérszínei kissé eltérnek az olvashatóság javítása érdekében.

indítson új szkriptet

Kattintson a jobb felső sarokban található Tamper Monkey ikonra, és a párbeszédpanelen válassza az ' Új parancsfájl hozzáadása' lehetőséget.

Meg kell nyitni egy új fülre, amely így néz ki

Töltse ki az információkat

Új szkript indítása után az első dolog, amit meg akarunk tenni, az a tetején található szkriptadatok kitöltése. Folytassa, és töltse ki a következő attribútumokat, ahogy csak akarja

  • név
  • leírás
  • szerző

Megmutatom, hogy néz ki az enyém is.

JQuery hozzáadása

közvetlenül a vonal előtt

// ==/UserScript==

adjon hozzá egy sort a

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

Gondoljon erre úgy, hogy importálja / igényli a JQuery-t egy JS-projekthez.

itt van az enyém

Helló script.js!

Nézzük meg, hogy a szkriptünk betöltődik-e a //news.ycombinator.com webhelyre, és a jQuery jó-e.

A // itt a kód itt sor után adja hozzá a következő kódot

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

és írja be a Ctrl + s billentyűkombinációt, vagy kattintson a bal oldalon található mentés gombra

A következő oldalra kerülhet. Ha nem, kattintson az Installed userscripts fülre.

Fantasztikus! Az Out szkript a Tamper Monkey-ba töltődik. A bal oldali zöld pont azt jelenti, hogy a szkript be van kapcsolva. A képernyőképen még a Hacker News logóját is láthatja.

hajtsa végre a szkriptet

Látogasson el a böngészőjében található Hacker News oldalra, és ha követte a lépéseket, és minden rendben ment, akkor látnia kell

Indítsa el a hibakeresőt

Itt az ideje megtalálni a módosítani kívánt bejegyzés elemeket. Írja be a Ctrl + Shift + i billentyűkombinációt a böngésző hibakeresőjének megjelenítéséhez.

Most egy elemet szeretnénk kiválasztani, hogy jobban szemügyre vehessük. A hibakereső bal felső sarkában lévő egérrel a kék négyzetre kattintva megnyílik az elemválasztó. Használhatja a Ctrl + Shift + c billentyűkombinációt is .

Mint látható, találtam egy td.title nevű elemet . Miután rákattintott, az elem kiemelésre kerül a hibakereső elemek lapján (szintén látható fent).

A címünk fölötti elem kiemelése

ezt választja ki a böngészőben

Bingó. Úgy tűnik, hogy megtaláltuk a kívánt elemet. A Hacker News tiszta HTML elrendezéssel rendelkezik, így nem volt túl nehéz megtalálni a cél elemünket.

Ha emlékszel a jQuery-re, csak annyit kell tennie, hogy megtalálja az összes üzenet elemet, használja a választót

$('.athing')

tegyen valamit a hozzászólás elemünkkel

Most, hogy van módunk kiválasztani az elemünket a jQuery segítségével, megváltoztathatjuk az elemünket. Változtassuk meg a bejegyzések háttérszínét a következő kód használatával. Erre módosítsa a $ (document) .ready () kódot

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

megjegyzés: A #DDD a #DDDDDD rövidítése;

nézzük meg a kapott oldalt. Ne felejtse el elmenteni a felhasználói indexet, majd frissítse a HackerNews oldalt. Lehet, hogy be kell zárnia a hibakeresőt az egész oldal megtekintéséhez.

Befejeztük már? Nem egészen. Az összes hozzászóláselemet váltogatás helyett megváltoztattuk. Lehet, hogy úgy néz ki, mint a kívánt zebra effektus, de ez csak azért van, mert a score / subinfo elem nem érvényesül. Ha hajlandó módosítani ezt az elemet, kérjük, tegye meg, és nyugodtan tegye közzé módszerét a megjegyzésekben. Ez az útmutató hatályán kívül esik.

Óh ne?! Mit csinálunk ... Nem akarok hurokokat írni!

jQuery a megmentéshez

Ne féljen, tábortársak. A jQuery ismét a segítségére állt.

A jQuery speciális választókat biztosít egy ilyen alkalomra.

Most bemutatom : páratlan

: páratlan választó

Leírás: Kiválasztja a páratlan elemeket, nulla indexeléssel. Lásd még. Különösen vegye figyelembe, hogy a 0 alapú indexelés azt jelenti, hogy… api.jquery.com

csak annyit kell tennünk, hogy hozzáadjuk : páratlan a választónk végéhez, hogy a sor így nézzen ki. megjegyzés: a színt is megváltoztattam #EEE; hogy jobban beleolvadjon.

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

Mentse el a szkriptet, és frissítse a HackerNews szoftvert, és látnia kell ezt a végterméket

Összecsomagolás

Tessék, itt van. Most van egy újabb kreatív lehetőséged, hogy felszabadítsd a kezdő kódolási varázslatot! A felhasználói szkriptek használhatók a webhely funkcionalitásának vagy megjelenésének módosítására, egy olyan funkció hozzáadására, amelyet mindig is szeretett volna, és még sok minden mást.

Házi feladat

Írjon saját felhasználói szkriptet, hogy hozzáadjon valamit egy gyakran használt webhelyhez. Legyen szó stílusról vagy egy gombról, amely megváltoztathatja egyes elemek láthatóságát, mindez rajtad múlik. Adja meg termékét az itt található megjegyzésekben!

Menj és hódítsd meg a táborlakókat!

További olvasmányok

Tampermonkey

A Tampermonkey egy ingyenes böngészőbővítmény, és a legnépszerűbb felhasználói index-kezelő az olyan Blink-alapú böngészőkhöz, mint a Chrome ... tampermonkey.net GreaseSpot Wiki

A GreaseSpot közösségi dokumentáció a Greasemonkey felhasználói szkriptjeihez. wiki.greasespot.net Greasy Fork - biztonságos és hasznos felhasználói szkriptek

A felhasználói szkriptek segítségével Ön irányíthatja a böngészési élményt. A telepítés után automatikusan létrehozzák azokat a webhelyeket, amelyeken Ön… greasyfork.org Első lépések: Chrome-bővítmény építése

A bővítmények lehetővé teszik a funkcionalitás hozzáadását a Chrome-hoz anélkül, hogy mélyen belemerülne a natív kódba. Létrehozhat új… developer.chrome.com Hogyan lehet Firefox kiterjesztést fejleszteni

Ez a blogbejegyzés nagyon elavult. Ha egy újabb útmutatót szeretne a kiterjesztés fejlesztéséhez, olvassa el az új Hogyan lehet… blog.mozilla.org oldalt