Főoldal

"Mérnököt a mérnöktől"

A Schönherz Bázis összeköti az állást kereső és állást kínáló mérnököket.

CV küldés

Küldj önéletrajzot! Gyorsan, egyszerűen.
Megjegyzésbe írd be a pozíció nevét.
CV küldés

Iratkozz fel hírlevelünkre!

Hírek

Hogyan használd a JavaScriptet a web hackelésére
Hogyan használd a JavaScriptet a web hackelésére

Nem minden hack csínytevés! Avagy így tudod felhasználni a JavaScriptet a böngésződ javítására.


Image credits: Photo by Jen Wike Huger


Online JavaScript forrásból nincs hiány; az alapoktól kezdve az alkalmazáskészítői tutorialokig, minden megtalálható. Ebben a cikkben – mely nem követeli meg tőled saját app fejlesztését, de még különösebben mély ismeretet sem – elmagyarázom, hogyan használd ezt a webes élményeid javítására és a produktivitás növelésére.


A bookmarkletek ereje


Mind tudjuk, milyen hasznosak a könyvjelzők. Segítségükkel elmentheted weboldalak linkjeit, kategorizálhatod őket, hozzáadhatsz plusz (meta)adatot, hogy később könnyebben megtaláld, és mindezt egy olyan struktúrában tárolhatod, amiben könnyen tudsz navigálni. Amit viszont sok ember nem tud, hogy ezek mellé apró kódrészleteket is menthetsz, melyek a weboldal kontextusában kerülnek végrehajtásra és hozzáférést biztosítanak a strukturális- és stíluselemekhez.


Ha megnyitod a Facebook konzolját, akkor láthatod, hogy a fejlesztői eléggé ellenzik ezt a fajta szaglászást – és jó okuk van rá. Még a kódhoz való hozzáférés nélkül is tudsz dolgokat megváltoztatni – vagy akár el is rontani.



Mégis, el is felejtheted, amit írtál, vagy elveszthetsz egy kis szöveget. Vagy, ha olyan vagy mint én, akkor számodra a megnyitott fájlok elmentése, másolása, a weboldal és a konzol megnyitása, a beillesztés és futtatás túl sok energiabefektetés. Ezt a kódot arra használom, hogy megnézzem, milyen hosszú egy weboldal (a jelenleg használt eszköz képernyőméretében mérve). Működik Edge-ben, Firefoxban, Chromiumon és még a mobilomon is:


javascript:alert(document.body.scrollHeight / window.innerHeight)


Ha tudom milyen hosszú egy lap, előre eldönthetem, hogy elolvasom-e. Emellett arra használom, hogy  megmutassam az ügyfeleimnek, milyen nagy vagy kicsi egy weblap a különböző eszközökön. 


Itt egy másik eszköz, amit arra használok, hogy eltávolítsam az összes kép és gist fájlt a programozói blogok posztjaiból, hogy csak a kiemelt tartalmat lássam (természetesen el is mentem könyvjelzőként; nem helyeslem a felületes átfutást az olvasás helyett).


javascript:(function(){ [].slice.call(document.querySelectorAll('img, .gist')).forEach(function(elem) { elem.remove(); }); })()


Észrevehetted, hogy a kód nagy része nem bonyolult, sőt, egy része egyenesen egyszerű. Mivel ezek főként saját személyes felhasználásra vannak, az egyszerű tökéletesen megfelel. Ha beletenném egy gistbe, akkor mások is bele tudnának nyúlni és fejleszteni, és akkor még jobb bookmarkletjeink lehetnének.


Perzisztens változtatások a weben add-onok használatával


A többségünk, akik nem vagyunk webdesignerek, nem szeretnénk több böngészőt használni. Azt sem szeretnénk, ha a linkjeink tele lennének tűzdelve JavaScript töredékekkel. Csak hogy tisztázzuk, nem saját bővítmények írásáról beszélek, hanem már létezők felhasználásáról a webes élményeid javítására.


A probléma


Amikor először kezdtem Redditet és Imgurt használni, túlságosan nehéznek találtam a galériaszerkesztőjüket. Persze abbahagyhattam volna a használatukat, de akkor más online szolgáltatást kellett volna keresnem a feltöltéseimhez. Ugyanakkor el is felejthetem, utána visszajövök Imgurra, és nem tudok navigálni a saját tartalmaim között. Az én megoldásom erre az volt, hogy megnyitottam a konzolt és a page inspectort, és egy kicsit eljátszottam velük.


Teljes méretért kattints ide!


Körülbelül öt perc múlva kis különbségeket vettem észre a nagy képek és a miniatűrök között. Nekem nagyobb képekre volt szükségem, így már láthattam, hogy mi okozza a problémámat.


A megoldás


A kód, amivel előrukkoltam egészen egyszerűre sikeredett, csupán hét sorból állt. A cél nem az volt, hogy a lehető legkevesebb kódot írjam, vagy épp a legtisztábbat, csak hogy megoldja a problémát.


(function(jQuery) {
    jQuery('.sortable-image img, .sortable-image').css({width:'auto',height:'auto'})
    jQuery('.sortable-image img').each( function(e,elem) {
        var fixedImg = jQuery(this).attr('src').replace('s.png','.png');
        jQuery(this).attr( 'src', fixedImg );
    });
})(jQuery);


Először megüzentem az oldalnak, hogy távolítsa el a magassági és szélességi megkötéseket, utána pedig iteráljon végig az összes csoportosítható képen és a fájlnév egy részét cserélje le. Ez nem a legtisztább kód; arra épít, hogy az Imgur DOM struktúrája nem változik meg, és használja a jQuery könyvtárat. De az ötlet annyi, hogy megkapd amire szükséged van, és tudj haladni tovább. És sokkal hatékonyabb, mint emailezni a fejlesztőkkel, hogy változtassák meg mindenki élményét, csak mert te nehezen tudod használni.


Ehhez én egy add-ont használok, és tudomásom szerint nem szigorúan nyílt forráskódú (bár hozzáférhetsz a kódhoz, ha megtalálod a Chromium felhasználói profil mappáját) [Felhasználói JavaScript és CSS]. De lehetővé teszi neked, hogy megcsináld, amit akarsz, és még script szabályokat is állíthatsz be, hogy egy specifikus URL vagy URL mintára fussanak le.



(Azóta az Imgur már nem ugyanazt a DOM-ot használja, szóval a fenti kód nem fog működni. Ez várhatóan így lesz az összes olyan kódnál, amit ilyen módszerrel írsz meg. De ezekkel nem is birodalmat akarunk építeni, csupán egy kis monotonitást kiiktatni a mindennapjainkból.)


Bővítmények írása


Az utolsó téma, amit érinteni szeretnék ebben a cikkben, a saját add-onok létrehozása. Ilyen tekintetben főleg a Chromiumra fogok koncentrálni, mivel abban van a legtöbb tapasztalatom, de találhatsz linkeket a Firefoxhoz vagy akár más ezt támogató böngészőkhöz is.


Emellett akarhatsz ambíciózus dolgokat is tenni, például gyorsbillentyűket felvenni az előző-következő linkekkel rendelkező weblapokhoz, vagy specifikus gyűlöletbeszédet blokkolni. Ezt mind megeheted webes add-onok használatával vagy írásával.



Először is szükséged lesz egy mappára, ahol tárolhatod a fájlaidat.


mkdir -p ~/projects/addon-name


Ha ez már megvan, nyisd meg a kedvenc szerkesztőprogramod, és hozz létre két fájlt manifest.json és content.js néven (a második JS add-on specifikus, és csak konvencióképp nevezek így minden tartalom-alapú JS-t).


Manifest.json


Ezen fájl tartalma a Chromium add-onok legfontosabb része. Tulajdonképpen azt irányítja, hogy mikor és hogyan működik a plug-in. Ennek a professzionális létrehozása nem tartozik a cikk keretei közé, mint ahogy a Firefox bővítmények létrehozása is. Több információért látogasd meg a Chromium dokumentumait a Manifestről.


{ "manifest_version": 2, "name": "Whatever you want to call the plugin", "description": "A brief description of what the plugin does. I prefer the GNU philosophy of do one thing well", "version": "2.0", "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_end" } ] }


Ez csupán annyit mond a böngészőnek, hogy futtassa a content.js-t minden weboldal végigolvasása után, minden sémára és útvonalra.


Content.js


A content.js-be írt kód ugyanolyan, mint bármilyen kód, amit egy weboldalhoz írsz. Hogy könnyebben navigáljak a galériákban, egy barátom, Barry által írt kódot használok, és ehhez egy idősebb, Album Express nevű szoftvert használok, melyet még Windows 7-re írtak.




document.addEventListener('keyup', function(k) { switch(k.code) { case "ArrowRight": document.querySelector('.nav.controls .link.next').click(); break; case "ArrowUp": document.querySelector('.nav.controls .link.up').click(); break; case "ArrowLeft": document.querySelector('.nav.controls .link.prev').click(); // window.history.back(); // The software Barry uses actually doesn't think to generate "prev" links, so we have to be creative break; default: console.log("Key Pressed:", k); } });


Innen pedig navigálj a chrome://extensions/ oldalra a Chromium böngésződben.


Teljes méretért kattints ide!


Majd keresd meg a mappát, amibe a bővítményeidet mentetted, és végül klikkelj a megnyitásra.



Összefoglalás


Remélem élvezted a cikk olvasását, és segített neked a weboldalak személyre szabásában anélkül, hogy mindenki számára megváltoztatnád. Ha csak most kezded a JavaScriptet, kísérletezz, mielőtt elkezded a saját dolgaidat írni. Ez segíteni fog megtanulni, hogy milyen minták és módszerek működnek a legjobban számodra.


(Forrás)

***
Ha Te is kreatív, kihívásokkal teli mérnök állást keresel minoségi munkáltatónál, jó helyen jársz, mert a Schönherz Bázis épp azért jött létre, hogy Neked segítsen.
Gyere, nézz szét aktuális állásaink között!