Připojte se k nám na #hackpack-chrome-ext na Slacku a získejte pomoc, diskutujte a předveďte svůj projekt!

Přehled

Gratulujeme! Vybrali jste si tento hackpack a jste na dobré cestě k vytvoření super cool produktu!

V tomto hackpacku vytvoříte rozšíření Chromu, které nahrazuje obsah na webových stránkách podle přizpůsobitelných pravidel. Mezi vaše úkoly bude ve stručnosti patřit:

1. Nahraďte všechny výskyty textu „cal“ na všech webových stránkách.
2. Nahraďte veškerý text na webové stránce podle uživatelem zadaných pravidel nahrazování.
3. Vyměňte všechny obrázky na webové stránce podle uživatelem zadaných pravidel nahrazování.

Po dokončení těchto úkolů vytvoříte zajímavou aplikaci, kterou budete moci používat ve vlastním prohlížeči!

Začínáme

1. Stáhněte si a rozbalte startovní kód.

Měli byste mít zhruba následující soubory.

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

Pokud jste Git master, můžete se synchronizovat s naším úložištěm Git přes HTTPS nebo SSH. Poznámka: Pokud se v systému Git nevyznáte nebo nevíte, co by následující řádky udělaly, následující příkazy neprovádějte!

# 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

Začínáme

Stáhnout Google Chrome

Pro vytvoření rozšíření pro Chrome budete potřebovat Google Chrome! Pokud jste si Chrome ještě nestáhli, stáhněte si nejnovější verzi zde. Pro tento hackpack budete potřebovat Chrome verze 40 nebo novější. Chcete-li zjistit, kterou verzi máte, přejděte na adresu chrome://version/ v panelu Omnibar a podívejte se na horní řádek. Měli byste vidět něco jako

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

Nedělejte si starosti, pokud to není přesně totéž. Pokud je hlavní číslo (před desetinnou čárkou) větší než 40, máte vystaráno!“

Načíst startovací kód

Chrome obvykle dodává rozšíření jako soubory .crx (podobně jako .zip), což je skvělé pro distribuci, ale ne tak skvělé pro vývoj. Místo toho řekneme Chromu, aby se složkou se startovacím kódem zacházel jako s rozšířením.

Pro sestavení našeho rozšíření Chromu musíme povolit Nastavení pro vývojáře.

Za tímto účelem:

1. Přejděte v prohlížeči na adresu chrome://extensions.
2. Ujistěte se, že je zaškrtnuto políčko Režim pro vývojáře v pravém horním rohu.
3. Klepnutím na tlačítko Načíst rozbalené rozšíření… se zobrazí dialogové okno pro výběr souboru.
4. Přejděte do adresáře, ve kterém se nacházejí soubory rozšíření, a vyberte jej.

Měli byste nyní vidět obrazovku, která vypadá následovně:

Všimněte si, že je zaškrtnuto políčko Režim pro vývojáře a rozšíření je povoleno.

Dále věnujte zvýšenou pozornost odkazu Reload (Znovu načíst).

Ve výchozím nastavení Chrome při aktualizaci kódu rozšíření automaticky znovu nenačte. Pokud tedy chcete rozšíření otestovat, musíte ho před testováním znovu načíst. Jinak se vaše změny v aktivním rozšíření neprojeví. V podstatě pokaždé, když v kódu provedete změnu, kterou chcete v Chromu živě otestovat, nezapomeňte rozšíření znovu načíst pomocí tohoto tlačítka Reload.

Základní znalosti

Pro tento projekt budete potřebovat určité znalosti o Javascriptu a rozšířeních Chrome. Startovní kód by měl obsahovat dostatečné množství komentářů, které vysvětlují jednotlivé soubory, ale pokud chcete před zahájením hackpacku získat hlubší znalosti těchto systémů, níže uvádíme odkazy na některé výukové programy. Zejména pokud jste se s Javascriptem nikdy předtím nesetkali, vřele doporučujeme projít si výukový kurz Javascriptu.

Zjistěte více o Javascriptu

Co je to JavaScript?

JavaScript je skriptovací jazyk pro počítače. Často se spouští v aplikacích webového prohlížeče a slouží k vytváření dynamického obsahu, například vyskakovacích zpráv nebo živých hodin. Není příbuzný s programovacím jazykem Java.

Tady je několik našich oblíbených výukových programů pro Javascript!

Pokud jste již dříve ovládali několik programovacích jazyků nebo jste Javascript znali a potřebujete si jen osvěžit syntaxi, podívejte se na knihu Naučte se X za Y minut. Tento výukový kurz trvá asi 10 minut.

Pokud jste se s Javascriptem ještě nikdy nesetkali (nebo o něm neslyšeli) nebo chcete podrobný a obsáhlý výukový kurz, který vás provede Javascriptem od základů, doporučujeme Codecademy. Tento výukový kurz trvá asi 10 hodin.

Pokud chcete komplexní výukový kurz všeho, co se týká Javascriptu, podívejte se na W3 Schools. Tento výukový kurz trvá asi 10 hodin.

Samozřejmě si můžete najít vlastní výukové kurzy nebo se učit praxí.

Základy rozšíření Chrome

Co jsou to rozšíření Chrome?

Rozšíření jsou malé softwarové programy, které mohou upravovat a rozšiřovat funkce prohlížeče Chrome. Píšete je pomocí webových technologií, jako jsou HTML, JavaScript a CSS.

Pokud se chcete o rozšířeních Chrome dozvědět více, přečtěte si úvod do problematiky rozšíření a jejich přehled na vysoké úrovni od společnosti Google.

Kontrolní bod 1: Cal to Butt

Když už to máte za sebou, můžeme začít!

Úkol A: Přečtěte si startovací kód

Než začnete psát jakýkoli kód, přečtěte si startovací kód a komentáře, které jsme vám poskytli. Zejména si přečtěte celý src/inject/inject.js, protože v tomto souboru budete provádět většinu změn. Pokud máte nějaké dotazy, bude to skvělá příležitost požádat o pomoc na našem kanálu Slack!

Úkol B: Aktualizujte funkci modifyText tak, aby nahradila každý výskyt řetězce ‚cal‘ řetězcem ‚butt‘

Při prvním úkolu aktualizujete funkci modifyText v souboru src/inject/inject.js tak, aby nahradila každý výskyt podřetězce ‚cal‘ řetězcem ‚butt‘ v daném slově a vrátila upravený řetězec. Pro první část bude proměnná settings nulová.

Například modifyText('calhacks organizer', null) by měla vrátit butthacks organizer.

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

Vyzkoušejte svou metodu na stránce UC Berkeley Wiki nebo na webu CalHacks. Osobně se mi líbí stránka Calculus Wiki.

(Tip: Podívejte se do dokumentace k nahrazování řetězců v JavaScriptu)

Krajní případy: Co se stane s řetězcem 'iCalendar'? Zkuste aktualizovat řetězec modifyText tak, aby respektoval původní případ podřetězce cal. Tedy 'cal' -> 'butt', ale také 'Cal' -> 'Butt' a 'CAL' -> 'BUTT'. Jaká další běžná schémata pádů bude vaše funkce zohledňovat?“

Kontrolní bod 2: Vlastní překlady

Nejsme první, koho to napadlo. Pokud čtete XKCD, může vám něco z toho připadat povědomé. Pokud jste XKCD nečetli, no, je čas dát si pauzu od kódování a přečíst si nějaký starý dobrý webový komiks. Zde je několik našich oblíbených.

Tyto komiksy ukazují některé skvělé náhrady textu, které jsou zde reprodukovány ve formátu prostého textu.

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

A samozřejmě naše vlastní

cal -> butt

Po zbytek tohoto projektu budeme používat tuto „šipkovou syntaxi“, která představuje pravidlo pro nahrazování textu. Konkrétně necháme

pattern -> replacement

zastupovat transformaci z řetězce "pattern" na řetězec "replacement". Například "years -> minutes" znamená, že každý případ podřetězce "years" nahradíme řetězcem "minutes", a "minutes -> years" znamená, že každý případ podřetězce "minutes" nahradíme řetězcem "years".

Zadání C:

Pro tuto úlohu napíšete funkci parseSettings v src/inject/inject.js, která převede vstupní pole řádků představujících náhradní pravidla a na výstupu vytvoří mapu ze vzorů na jejich náhrady.

Signatura funkce je

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

Například

parseSettings()

by měla vrátit

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

Zaručíte, že každá položka v poli řádků obsahuje alespoň jednou podřetězec '->'.

Krajní případy: Jak vaše funkce zpracuje řádek "a -> b -> c". Změní ho na "a": "b -> c", na "a -> b": "c" nebo na něco jiného? Co když neexistuje žádný vzor (tj. řádek vypadá jako "->word" bez textu před šipkou)? Co když neexistuje žádná náhrada (tj. řádek vypadá jako "word->" bez textu za šipkou)? Co když má řádek pouze 2 znaky -> (tj. před šipkou ani za ní není žádný text)? Jak si vaše funkce poradí s bílými znaky? Zpracuje řádek " a -> b " jako "a":"b" nebo jako " a ": " b "? Co se stane, pokud existují dva různé řádky, každý se stejným vzorem. Například jeden řádek pole je třeba "force->horse" a další položka je "force->fore"?

Zadání D: Použijte mapu pravidel nahrazování k provedení několika nahrazení textu

Po dokončení funkce parseSettings se nyní musíme vrátit k funkci modifyText a použít naše nová pravidla nahrazování! Startovací kód vezme návratovou hodnotu vaší funkce parseSettings a předá ji do funkce modifyText jako proměnnou settings.

Pro tento úkol budete muset aktualizovat modifyText v src/inject/inject.js, aby se všechna náhradní pravidla z mapy uvedla v platnost.

Příklad pokud mapa obsahuje asociaci mezi "force" a "horse" (tj. settings = "horse"), pak by měl být každý případ podřetězce "force" v textu nahrazen řetězcem "horse" a tak dále pro ostatní dvojice pattern: replacement v mapě. Jako vždy byste měli stále nahrazovat "cal" "butt"

Krajní případy: V jakém pořadí se náhrady vyhodnocují? Předpokládejme, že settings = {'train':'bus', 'use':'eat'}. Co se stane s řetězcem "trainer"? Uplatní se nejprve train, což vede k buser a pak k beatr? Nebo se nejprve aplikuje use (bez efektu) a následně train pro výsledný řetězec buser? Jak se stejně jako v kontrolním bodě 1 vypořádáte s případem původního textu? Existuje obecný způsob, jak respektovat původní pád?

Pomocí akce prohlížeče.

Pro otestování této funkce jsme vám poskytli akci prohlížeče pro rozšíření. V pravém horním rohu okna prohlížeče Chrome bude malá ikona TreeHacks).

Klepnutím na ikonu se zobrazí uživatelské rozhraní, kde můžete zadat pravidla pro nahrazení. Zadaná náhradní pravidla budou předána do funkcí a použita na stránce. Snímek obrazovky je uveden níže:

Text, který zadáte do tohoto pole, je trvalý – nezmizí, když zavřete vyskakovací okno. Pokud vás to zajímá, kód, jak to provést, je v src/browser_action/. Stisknutím tlačítka uložit se text uloží do místního úložiště Chrome a stisknutím tlačítka vymazat se místní úložiště vymaže.

Kontrolní bod 3: Nahrazování obrázků

Ve třetím a posledním kontrolním bodě rozšíříte funkčnost rozšíření tak, abyste mohli uživateli zadávat nahrazování obrázků, stejně jako nahrazování textu.

Jelikož se jedná o závěrečnou část hackpacku, dáme vám zde o něco méně návodu a o něco více volnosti. Pro reprezentaci pravidel pro překlad obrázků můžete použít libovolné kódovací schéma. Doporučujeme použít schéma img->https://path.to/image.png, které označuje, že všechny obrázky by měly být nahrazeny obrázkem na https://path.to/image.png. V závislosti na tom, jak se rozhodnete reprezentovat pravidla pro nahrazování obrázků, můžete mít samostatné kroky než ty, které jsou uvedeny níže.

Úkol E: Najděte všechny obrázky na dané webové stránce.

Pokud chceme nahradit všechny obrázky na webové stránce, budeme nejprve potřebovat všechny obrázky na dané webové stránce. Napište (pomocnou) metodu, která vrátí seznam všech obrázků na stránce.

Možná vás láká použít jQuery, ale pozor – začlenit jQuery do rozšíření Chrome není snadné a existuje způsob, jak to vyřešit pomocí vanilla JS. Pokud potřebujete nápovědu, podívejte se do dokumentace k querySelectorAll.

Úkol F: Aktualizujte parseSettings tak, aby kromě pravidel pro nahrazování textu zvládal i pravidla pro nahrazování obrázků.

Budete muset změnit implementaci parseSettings, aby dávala pozor na pravidla pro nahrazování obrázků. Jak budete reprezentovat pravidlo nahrazení obrázku?

Úkol G: Aktualizujte zdroj každého obrázku na stránce.

Jakmile budete mít obrázky a náhradní URL, napište kód pro aktualizaci původního obrázku tak, aby zobrazoval cílovou URL. Pokud potřebujete nápovědu, podívejte se na atribut src u obrázků.

Úkol H: Jedeme v tom všichni společně

Pokud máte tyto pomocné metody v ruce, implementujte funkci replaceAllImages v src/inject/inject.js. Tato funkce se volá bezprostředně po vyhodnocení nahrazení textu. Pokud vše proběhne v pořádku, měli byste být schopni zadat pravidlo pro nahrazování obrázků do akce prohlížeče a vidět, že všechny obrázky jsou nahrazeny!

Gratulujeme!

Dokázali jste to! Velmi dobře. Vytvořili jste skvělé rozšíření Chromu, které nahrazuje obsah na webových stránkách, a co víc, můžete si ho nechat!

Na chvíli si odpočiňte, zhluboka se nadechněte a podívejte se zpět na projekt, který jste vytvořili. Je to velmi působivé!

Pokud se dostanete až sem, přijďte to oslavit do kanálu #hackpack-chrome-ext na Slacku! Zasloužíte si to.

Rozšíření

Na vysoké úrovni jste vytvořili systém, který spoléhá na předávání zpráv mezi vyskakovacím dialogovým oknem (akce prohlížeče Chrome) a skriptem, který se spouští na každé webové stránce. Ten jsme používali k předávání informací o nahrazení textu a obrázků injekčnímu skriptu, ale není důvod, proč bychom u toho museli skončit!

Tento rámec můžete rozšířit a vytvořit tak opravdu skvělé projekty. Nebesa jsou neomezená, ale uvedli jsme zde několik návrhů.

• Připojte více než jen prostý text – připojte regulární výrazy! Rozšiřte funkci modifyText tak, aby se vzory z settings považovaly za regulární výrazy, nikoli jen za prostý text.
• Podpora porovnávání na selektory dokumentu z DOM. Shoda na jménech značek (jako img, ale také a a iframe), nebo jménech .class, nebo třeba i #id. Můžete vytvořit podporu pro celou sadu selektorů?“
• Nenahrazujte všechny obrázky – stačí nahradit jen několik (řekněme 1 %). Mohli byste změnit odkazy na youtube (značky a s href obsahující "youtube") na videa Ricka Astleyho?“

Pokračovat z oblasti nahrazování,

• umožnit uživateli signalizovat informace skriptu na pozadí. Třeba se ho zeptat na jméno a červeně zvýraznit jakýkoli text, který obsahuje jeho jméno.
• Nechat uživatele zadat několik serverů, které budou fungovat jako proxy. Vytvořili jste základní Tor!“
• Dovolte uživateli zadat údaje o svém zdravotním stavu a navrhněte mu (prostřednictvím přátelského vyskakovacího okna nebo přesměrování), aby cvičil po každé době, kterou stráví prohlížením jedné stránky (kašlat reddit kašlat).

To je jen začátek. Popusťte uzdu své fantazii. Nemůžeme se dočkat, až uvidíme, co vytvoříte!

Různé

Zpětná vazba

Pokud máte nějaké připomínky, ať už pozitivní nebo negativní, obraťte se se zpětnou vazbou na Sama Redmonda (@organizer-sam na Slacku)! Rádi si poslechneme, co považujete za skvělé a co bychom podle vás mohli zlepšit.

Zásluhy

Zásluhy za nápad patří původcům rozšíření Cloud-to-Butt pro Chrome, zásluhy za skvělou dokumentaci (jejíž velkou část jsme bezostyšně ukradli) patří přispěvatelům Chromu a zásluhy za obrázky patří XKCD.

Licence

MIT