Come join us on #hackpack-chrome-ext on Slack to get help, hang out, and show off your project!

Overview

Congratulations! Ezt a hackpacket választottad, és máris jó úton haladsz egy szupermenő termék megalkotása felé!

Ebben a hackpackben egy olyan Chrome-bővítményt fogsz készíteni, amely testreszabható szabályok szerint helyettesíti a weboldalak tartalmát. Ránézésre a feladatai közé tartozik:

1. A “cal” szöveg összes példányának cseréje az összes weboldalon.
2. A weboldalon található összes szöveg cseréje a felhasználó által megadott helyettesítési szabályok szerint.
3. Cserepelje ki az összes képet egy weboldalon a felhasználó által megadott helyettesítési szabályok szerint.

Az alábbi feladatok elvégzése után egy izgalmas alkalmazást fog építeni, amelyet a saját böngészőjében használhat!

Első lépések

1. Töltse le és csomagolja ki az indító kódot.

Nagyjából a következő fájlokkal kell rendelkeznie.

hackpack-chrome-ext-master/├── README.md├── manifest.json├── icons│ ├── TreeHacks-white-128.png│ ├── TreeHacks-white-16.png│ ├── TreeHacks-white-19.png│ ├── TreeHacks-white-32.png│ ├── TreeHacks-white-48.png│ ├── TreeHacks-white-64.png│ └── TreeHacks-white-96.png└── src ├── bg │ └── background.js ├── browser_action │ ├── browser_action.css │ ├── browser_action.html │ └── browser_action.js ├── inject │ └── inject.js └── options ├── options.css ├── options.html └── options.js

Alternatívaként, ha Ön Git mester, akkor HTTPS-en vagy SSH-n keresztül szinkronizálódhat a Git tárolónkkal. Megjegyzés: Ha nem ismeri a Git-et, vagy nem tudja, hogy a következő sorok mit csinálnának, ne hajtsa végre a következő parancsokat!

# From Terminal.app or equivalent...# Clone via HTTPS$ git clone https://github.com/TreeHacks/hackpack-chrome-ext.git# or SSH$ git clone [email protected]:TreeHacks/hackpack-chrome-ext.git

Első lépések

Google Chrome letöltése

A Chrome bővítmény elkészítéséhez Google Chrome-ra lesz szüksége! Ha még nem töltötte le a Chrome-ot, töltse le a legújabb verziót innen. Ehhez a hackpackhez a Chrome 40-es vagy újabb verziójára lesz szükséged. Ahhoz, hogy kiderítsd, melyik verzióval rendelkezel, menj a chrome://version/ menüpontra az Omnibárban, és nézd meg a felső sort. Valami olyasmit kell látnod, mint

Google Chrome48.0.2564.109 (Official Build) (64-bit)

Ne aggódj, ha ez nem pontosan ugyanaz. Amíg a főszám (a tizedesvessző előtt) nagyobb, mint 40, addig készen állsz!

Az indító kód betöltése

A Chrome általában .crx fájlként szállítja a kiterjesztéseket (hasonlóan a .zip fájlokhoz), ami nagyszerű a terjesztéshez, de nem annyira jó a fejlesztéshez. Ehelyett megmondjuk a Chrome-nak, hogy a starter code mappát bővítményként kezelje.

A Chrome fejlesztői beállításait engedélyeznünk kell ahhoz, hogy a Chrome bővítményünket elkészíthessük.

Ezzel kapcsolatban:

1. Navigáljunk a chrome://extensions címre a böngészőben.
2. Győződjünk meg róla, hogy a jobb felső sarokban lévő Fejlesztői mód jelölőnégyzet be van jelölve.
3. Kattintsunk a Csomagolatlan kiterjesztés betöltése… gombra, hogy megjelenjen egy fájlválasztó párbeszédpanel.
4. Navigáljon ahhoz a könyvtárhoz, amelyben a kiterjesztés fájljai találhatók, és válassza ki azt.

Ezután egy olyan képernyőnek kell megjelennie, mint az alábbi:

Figyeljen arra, hogy a Fejlesztői mód jelölőnégyzet be van jelölve, és a kiterjesztés engedélyezve van.

Közelebbről figyelje az Újratöltés linket.

A Chrome alapértelmezés szerint nem fogja automatikusan újratölteni a bővítményt, ha frissíti a kódot. Így ha tesztelni szeretné a bővítményét, akkor a tesztelés előtt újra kell töltenie a bővítményt. Ellenkező esetben a módosításai nem lesznek jelen az aktív bővítményben. Alapvetően minden alkalommal, amikor olyan változtatást hajt végre a kódján, amelyet élesben szeretne tesztelni a Chrome-ban, győződjön meg róla, hogy a bővítményt az Újratöltés gomb segítségével újratölti.

Háttérismeretek

Ezhez a projekthez szüksége lesz némi ismeretre a Javascript és a Chrome-bővítmények terén. A kezdő kódnak elegendő megjegyzést kell tartalmaznia az egyes fájlok magyarázatához, de ha mélyebb ismereteket szeretne szerezni ezekről a rendszerekről, mielőtt elkezdené a hackpacket, az alábbiakban linkeket adunk néhány oktatóanyaghoz. Különösen, ha még nem ismeri a Javascriptet, nagyon ajánljuk, hogy nézzen végig egy Javascript oktatóanyagot.

Ismerje meg a Javascriptet

Mi az a JavaScript?

A JavaScript egy szkriptnyelv számítógépek számára. Gyakran futtatják webböngésző alkalmazásokban, hogy dinamikus tartalmat hozzanak létre, például felugró üzenetet vagy élő órát. Nincs köze a Java programozási nyelvhez.

Itt van néhány kedvenc Javascript oktatóanyagunk!

Ha már több programozási nyelv szakértője vagy, vagy már ismerted a Javascriptet, és csak felfrissítésre van szükséged a szintaxisról, nézd meg a Learn X in Y Minutes című könyvet. Ez az oktatóprogram körülbelül 10 percet vesz igénybe.

Ha még sosem látott (vagy hallott) a Javascriptről, vagy egy olyan mélyreható, átfogó oktatóprogramot szeretne, amely az alapoktól kezdve végigviszi a Javascriptet, akkor a Codecademy-t ajánljuk. Ez az oktatóanyag körülbelül 10 órát vesz igénybe.

Ha átfogó oktatóanyagot szeretne mindenről, ami Javascript, nézze meg a W3 Schools-t. Ez az oktatóanyag körülbelül 10 órát vesz igénybe.

Naná, hogy szabadon kereshet saját oktatóanyagokat, vagy tanulhat a gyakorlatban.

A Chrome-bővítmények alapjai

Mi is az a Chrome-bővítmény?

A bővítmények olyan kis szoftverprogramok, amelyek módosíthatják és bővíthetik a Chrome böngésző funkcióit. Ezeket olyan webes technológiák segítségével írja meg, mint a HTML, a JavaScript és a CSS.

Ha többet szeretne megtudni a Chrome-bővítményekről, olvassa el a Google bevezetőjét a bővítményekről és a Google magas szintű áttekintését.

1. ellenőrzési pont: Cal to Butt

Mivel mindezzel végeztünk, lássunk hozzá!

A feladat: Olvassa el a kezdő kódot

Mielőtt bármilyen kódot elkezdene írni, olvassa át az általunk megadott kezdő kódot és megjegyzéseket. Különösen olvassa el az egész src/inject/inject.js kódot, mert a legtöbb változtatást ebben a fájlban fogja elvégezni. Ha bármilyen kérdésed van, ez egy remek alkalom arra, hogy segítséget kérj a Slack csatornánkon!

B feladat: A modifyText frissítése, hogy a ‘cal’ minden példányát ‘butt’-ra cserélje

Az első feladatban frissíteni fogod a modifyText függvényt a src/inject/inject.js-ban, hogy egy adott szóban a ‘cal’ részlánc minden példányát a ‘butt’ stringre cserélje, és visszaadja a módosított stringet. Az első résznél a settings változó null lesz.

A modifyText('calhacks organizer', null) például butthacks organizer-et kell visszaadnia.

/* File src/inject/inject.js */function modifyText(text, settings) {// YOUR CODE HEREreturn text;}

Tesztelje a módszerét a UC Berkeley Wiki oldalán vagy a CalHacks weboldalán. Nekem személy szerint a Calculus Wiki oldal tetszik.

(Tipp: Nézd meg a JavaScript String replace dokumentációját)

Edge cases: Mi történik a 'iCalendar' karakterlánccal? Próbáljuk meg frissíteni a modifyText-t úgy, hogy az cal részlánc eredeti esetét tartsa tiszteletben. Vagyis a 'cal' -> 'butt', de a 'Cal' -> 'Butt' és a 'CAL' -> 'BUTT' is. Milyen más gyakori esetrendszereket vesz figyelembe a függvényed?

2. ellenőrző pont: Egyéni fordítások

Nem mi vagyunk az elsők, akik erre gondoltak. Ha olvasod az XKCD-t, néhány dolog ismerős lehet neked. Ha nem olvastad az XKCD-t, nos, itt az ideje, hogy tarts egy kis kódolási szünetet és olvass néhány jó öreg webcomicot. Íme néhány kedvencünk.

Ezekben a képregényekben néhány remek szöveghelyettesítést mutatunk be, amelyeket itt egyszerű szöveges formában reprodukálunk.

batman -> a man dressed like a batkeyboard -> leopardwitnesses -> these dudes i knowallegedly -> kinda probablynew study -> tumblr postrebuild -> avengespace -> spaaacegoogle glass -> virtual boysmartphone -> pokedexelectric -> atomicsenator -> elf-lordcar -> catelection -> eating contestcongressional leaders -> river spiritshomeland security -> homestar runnercould not be reached for comment -> is guilty and everyone knows itforce -> horsedebate -> dance-offself driving -> uncontrollably swervingpoll -> psychic readingcandidate -> airbenderdrone -> dogvows to -> probably won'tat large -> very largesuccessfully -> suddenlyexpands -> physically expandsfirst-degree -> friggin' awfulsecond-degree -> friggin' awfulthird-degree -> friggin' awfulan unknown number -> like hundredsfront runner -> blade runnerglobal -> sphericalyears -> minutesminutes -> yearsno indication -> lots of signsurgedrestraint by -> drunkenly egged onhorsepower -> tons of horsemeat

És persze a mi saját

cal -> butt

Ezt a “nyíl szintaxist” fogjuk használni a szöveghelyettesítési szabály ábrázolására a projekt további részében. Konkrétan, hagyjuk, hogy

pattern -> replacement

reprezentálja a "pattern" karakterláncból a "replacement" karakterláncba történő átalakítást. Például "years -> minutes" azt jelenti, hogy a "years" részsorozat minden példányát a "minutes" karakterlánccal helyettesítjük, "minutes -> years" pedig azt, hogy a "minutes" részsorozat minden példányát a "years" karakterlánccal helyettesítjük.

C feladat: Sztringek listájának elemzése helyettesítő szabályok térképévé.

Ezért a feladatért meg kell írni a src/inject/inject.js-ban található parseSettings függvényt, amely átalakítja a helyettesítő szabályokat ábrázoló sorok bemeneti tömbjét, és kimeneti egy térképet a mintákból a helyettesítésükre.

A függvény aláírása

function parseSettings(lines) { // YOUR CODE HEREreturn null;}

A függvénynek például

parseSettings()

vissza kell adnia

{ "batman": "a man dressed like a bat", "keyboard": "leopard", "force": "horse"}

Garantálnia kell, hogy a sorok tömbjének minden egyes bejegyzése legalább egyszer tartalmazza a '->' részláncot.

Első esetek: Hogyan dolgozza fel a függvényed a "a -> b -> c" sort. Átváltoztatja "a": "b -> c"-ra, "a -> b": "c"-re, vagy valami másra? Mi van akkor, ha nincs minta (azaz a sor úgy néz ki, mint "->word", a nyíl előtt nincs szöveg)? Mi van, ha nincs csere (azaz a sor úgy néz ki, mint "word->", a nyíl után nincs szöveg)? Mi a helyzet a csak 2 karakteres -> sorral (azaz nincs szöveg a nyíl előtt vagy után)? Hogyan kezeli a függvénye a szóközöket? A " a -> b " sort "a":"b"-ként vagy " a ": " b "-ként dolgozza fel? Mi történik, ha két különböző sor van, mindkettő ugyanazzal a mintával. Például lehet, hogy a tömb egyik sora "force->horse", egy másik sora pedig "force->fore"?

Task D: Használjuk a helyettesítési szabályok térképét, hogy több szövegcserét hajtsunk végre

A parseSettings függvényt elvégezve most vissza kell térnünk a modifyText függvényhez, hogy használjuk az új helyettesítési szabályainkat! A kezdő kód átveszi a parseSettings függvényünk visszatérési értékét, és átadja a modifyText függvénybe a settings változóként.

Ezért a feladatért frissítenünk kell a modifyText függvényt a src/inject/inject.js-ban, hogy a térképen szereplő összes helyettesítési szabály érvénybe lépjen.

Például, ha a térképben a "force" és a "horse" (azaz settings = "horse") között van egy asszociáció, akkor a "force" részlánc bármely példányát a "horse" karakterlánccal kell helyettesíteni a szövegben, és így tovább a többi pattern: replacement párra a térképben. Mint mindig, most is a "cal"-at kell helyettesítenie "butt"

Sarkalatos esetekkel: Milyen sorrendben kerülnek kiértékelésre a helyettesítések? Tegyük fel, hogy settings = {'train':'bus', 'use':'eat'}. Mi történik a "trainer" karakterlánccal? Először train érvényesül, ami buser-hez, majd beatr-hez vezet? Vagy először use érvényesül (hatás nélkül), majd train következik, és a végeredmény buser lesz? Az 1. ellenőrzőponthoz hasonlóan hogyan kezeli az eredeti szöveg esetét? Van általános módja az eredeti eset tiszteletben tartásának?

A böngészőművelet használatával.

A funkció teszteléséhez a bővítményhez egy böngészőműveletet adtunk. A Chrome ablak jobb felső sarkában lesz egy kis TreeHacks ikon).

Az ikonra kattintva megjelenik egy felhasználói felület, ahol megadhatja a helyettesítési szabályokat. A megadott helyettesítési szabályok átkerülnek a függvényekbe, és alkalmazásra kerülnek az oldalon. Az alábbiakban egy képernyőkép látható erről:

Az ebbe a mezőbe beírt szöveg tartós – nem fog eltűnni, amikor bezárja a felugró ablakot. Ha érdekel, az ehhez szükséges kód a src/browser_action/-ben található. A mentés gomb megnyomása elmenti a szöveget a Chrome helyi tárolójába, a törlés gomb megnyomása pedig törli a helyi tárolót.

3. ellenőrzőpont: Képek helyettesítése

A harmadik és egyben utolsó ellenőrzőpontban a bővítmény funkcionalitását úgy kell bővítenie, hogy a felhasználó a szöveg helyettesítéséhez hasonlóan képcseréket is megadhasson.

Mivel ez a hackpack utolsó része, itt egy kicsit kevesebb útmutatást és egy kicsit több szabadságot adunk. Bármilyen kódolási sémát használhatsz a képfordítási szabályok ábrázolásához. Javasoljuk, hogy a img->https://path.to/image.png sémát használd annak jelzésére, hogy minden képet a https://path.to/image.png-nél lévő képpel kell helyettesíteni. Attól függően, hogy hogyan kívánja ábrázolni a képcsere-szabályokat, előfordulhat, hogy az alábbiakban leírtaktól eltérő lépéseket kell végrehajtania.

E feladat: Az összes kép keresése egy adott weboldalon.

Ha egy weboldalon lévő összes képet szeretnénk kicserélni, először is rendelkeznünk kell az adott weboldalon lévő összes képpel. Írjunk egy (segéd)metódust, amely visszaadja az adott oldalon található összes kép listáját.

Kísértést érezhetünk a jQuery használatára, de figyelmeztetünk: a jQuery beépítése egy Chrome-bővítménybe nem egyszerű, és van rá mód, hogy ezt vanilla JS használatával oldjuk meg. Ha segítségre van szüksége, nézze meg a querySelectorAll dokumentációját.

F feladat: A parseSettings frissítése, hogy a szöveghelyettesítési szabályok mellett a képhelyettesítési szabályokat is kezelje.

A parseSettings implementációját úgy kell megváltoztatnia, hogy figyeljen a képhelyettesítési szabály(ok)ra. Hogyan fog ábrázolni egy képhelyettesítő szabályt?

G feladat: Frissítse az oldalon lévő minden egyes kép forrását.

Amikor megvan a képek és a helyettesítő URL, írjon kódot az eredeti kép frissítéséhez, hogy az a cél URL-t jelenítse meg. Ha segítségre van szükséged, nézd meg a képek src attribútumát.

H feladat: Mindannyian együtt vagyunk benne

Ezekkel a segédmódszerekkel a kezedben implementáld a replaceAllImages függvényt a src/inject/inject.js-ban. Ezt a függvényt közvetlenül a szövegcserék kiértékelése után hívjuk meg. Ha minden jól megy, akkor be kell tudnod írni egy képcsere-szabályt a böngésző műveletébe, és látnod kell, hogy minden kép kicserélődik!

Gratulálok!

Megcsináltad! Nagyon jól csináltad. Építettél egy klassz Chrome-bővítményt, amely kicseréli a weboldalak tartalmát, és ami a legfontosabb, meg is tarthatod!”

Pihenj egy kicsit, vegyél egy mély lélegzetet, és nézz vissza a projektre, amit építettél. Nagyon lenyűgöző!

Ha eljutottál idáig, gyere a #hackpack-chrome-ext Slack csatornára, hogy megünnepeljük! Megérdemled.

Bővítések

Felső szinten egy olyan rendszert építettél, amely egy felugró párbeszédpanel (a Chrome böngésző művelete) és egy minden weboldalon futó szkript közötti üzenetátvitelre támaszkodik. Ezt arra használtuk, hogy információt adjunk át a szöveg- és képcserékről a befecskendező szkriptnek, de nem kell itt megállnunk!

Ezt a keretrendszert kibővítheted, hogy igazán klassz projekteket hozz létre. A határ a csillagos ég, de itt adtunk néhány javaslatot.

• Nem csak a sima szöveget illesztheti be – illesszen be reguláris kifejezéseket! Bővítse ki a modifyText funkcionalitását, hogy a settings-ből származó mintákat ne csak egyszerű szövegként, hanem reguláris kifejezésekként is kezelje.
• Támogassa a DOM dokumentumszelektorokra való illesztést. Passzoljon a tag nevekre (mint img, de a a és iframe is), vagy a .class nevekre, vagy talán még a #id-ökre is. Meg tudod építeni a szelektorok teljes készletének támogatását?
• Ne cseréld le az összes képet – csak néhányat (mondjuk 1%-ot). Meg tudná változtatni a youtube linkeket (a címkék href "youtube"-et tartalmazó href címkékkel) Rick Astley videókra?

A cserék birodalmától eltávolodva,

• Megengedné a felhasználónak, hogy információt jelezzen a háttérszkriptnek. Esetleg kérdezze meg a nevét, és piros színnel emelje ki a nevét tartalmazó szöveget.
• Hagyja, hogy a felhasználó megadjon egy csomó szervert, amelyek proxyként működnek. Megépítettél egy alap Tor-t!
• Megengedheted a felhasználónak, hogy megadja az egészségügyi adatait, és javasolhatod (barátságos felugró ablakon vagy átirányításon keresztül), hogy tornázzon minden olyan időszakban, amit egy webhely böngészésével tölt (köhögés reddit köhögés).

Ez még csak a kezdet. Engedd szabadjára a fantáziádat. Alig várjuk, hogy lássuk, mit építesz!

Vegyes

Visszajelzés

Ha bármilyen észrevételed van, pozitív vagy negatív, fordulj Sam Redmondhoz (@organizer-sam a Slacken) visszajelzéssel! Szívesen meghallgatnánk, hogy szerinted mi az, ami nagyszerű, és mi az, amin szerinted javíthatnánk.

Hitel

Az ötletet a Cloud-to-Butt Chrome Extension készítőinek köszönhetjük, a nagyszerű dokumentációért (amelynek nagy részét szégyentelenül elloptuk) a Chromium közreműködőinek, a képekért pedig az XKCD-nek.

Licenc

MIT

.