Przyłącz się do nas na #hackpack-chrome-ext na Slacku, aby uzyskać pomoc, spędzić czas i pochwalić się swoim projektem!

Przegląd

Gratulacje! Wybrałeś ten hackpack i jesteś na dobrej drodze do stworzenia super fajnego produktu!

W tym hackpacku zbudujesz rozszerzenie chrome, które zastępuje treść na stronach internetowych zgodnie z regułami, które można dostosować. W skrócie, Twoje zadania będą obejmować:

1. Zastąp wszystkie przypadki tekstu „cal” na wszystkich stronach internetowych.
2. Zastąp cały tekst na stronie internetowej zgodnie z regułami zastępowania określonymi przez użytkownika.
3. Zastąp wszystkie obrazy na stronie internetowej zgodnie z regułami zastępowania określonymi przez użytkownika.

Po wykonaniu tych zadań, zbudujesz ekscytującą aplikację, której możesz używać w swojej własnej przeglądarce!

Rozpoczęcie pracy

1. Pobierz i rozpakuj kod startowy.

Powinieneś z grubsza mieć następujące pliki.

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

Alternatywnie, jeśli jesteś mistrzem Git, możesz zsynchronizować się z naszym repozytorium Git przez HTTPS lub SSH. Uwaga: Jeśli nie znasz Git lub nie wiesz, co zrobią poniższe linie, nie wykonuj poniższych poleceń!

# 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

Rozpoczęcie pracy

Pobierz Google Chrome

Aby zbudować rozszerzenie Chrome, będziesz potrzebował Google Chrome! Jeśli jeszcze nie pobrałeś Chrome, pobierz najnowszą wersję tutaj. Do tego hackpacka będziesz potrzebował Chrome w wersji 40 lub nowszej. Aby dowiedzieć się, jaką masz wersję, przejdź do chrome://version/ na pasku narzędzi i spójrz na górną linię. Powinieneś zobaczyć coś w stylu

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

Nie przejmuj się, jeśli to nie jest dokładnie to samo. Dopóki liczba główna (przed kropką dziesiętną) jest większa niż 40, jesteś gotowy!

Załaduj kod startowy

Chrom zazwyczaj wysyła rozszerzenia jako pliki .crx (podobne do plików .zip), co jest świetne do dystrybucji, ale nie tak świetne do rozwijania. Zamiast tego powiemy Chrome, aby traktował folder z kodem startowym jako rozszerzenie.

Musimy włączyć Chrome Developer Settings, aby zbudować nasze rozszerzenie chrome.

Aby to zrobić:

1. Przejdź do chrome://extensions w przeglądarce.
2. Upewnij się, że pole wyboru Tryb programisty w prawym górnym rogu jest zaznaczone.
3. Kliknij Załaduj rozpakowane rozszerzenie…, aby wyświetlić okno dialogowe wyboru pliku.
4. Przejdź do katalogu, w którym znajdują się pliki rozszerzenia, i wybierz go.

Powinieneś teraz zobaczyć ekran, który wygląda jak poniższy:

Zauważ, że pole wyboru Tryb programisty jest zaznaczone, a rozszerzenie jest włączone.

Dodatkowo zwróć uwagę na link Przeładuj.

Domyślnie Chrome nie przeładowuje rozszerzenia automatycznie, jeśli zaktualizujesz swój kod. Dlatego, jeśli chcesz przetestować swoje rozszerzenie, musisz je przeładować przed testowaniem. W przeciwnym razie Twoje zmiany nie będą obecne w aktywnym rozszerzeniu. Zasadniczo, za każdym razem, gdy wprowadzasz zmiany w swoim kodzie, które chcesz przetestować na żywo w Chrome, upewnij się, że przeładowujesz rozszerzenie używając przycisku Reload.

Wiedza podstawowa

Do tego projektu będziesz potrzebował trochę wiedzy na temat Javascript i rozszerzeń Chrome. Kod startowy powinien mieć wystarczające komentarze, aby wyjaśnić każdy plik, ale jeśli chcesz uzyskać głębsze zrozumienie tych systemów przed rozpoczęciem hackpacka, poniżej zamieściliśmy linki do niektórych tutoriali. W szczególności, jeśli nigdy wcześniej nie miałeś do czynienia z Javascriptem, gorąco polecamy przejście przez tutorial Javascript.

Poznaj Javascript

Co to jest JavaScript?

JavaScript jest językiem skryptowym dla komputerów. Jest on często uruchamiany w aplikacjach przeglądarki internetowej w celu tworzenia dynamicznej zawartości, takiej jak wyskakujące wiadomości lub zegar na żywo. Nie jest związany z językiem programowania Java.

Oto kilka naszych ulubionych samouczków Javascript!

Jeśli jesteś już ekspertem w kilku językach programowania lub znasz Javascript i potrzebujesz odświeżenia składni, sprawdź Learn X in Y Minutes. Ten samouczek trwa około 10 minut.

Jeśli nigdy wcześniej nie widziałeś (lub nie słyszałeś) o języku Javascript lub chcesz dogłębnego, zaangażowanego samouczka, który poprowadzi cię przez Javascript od podstaw, polecamy Codecademy. Ten samouczek trwa około 10 godzin.

Jeśli chcesz uzyskać wszechstronny przewodnik po wszystkich rzeczach związanych z Javascriptem, sprawdź Szkoły W3. Ten samouczek trwa około 10 godzin.

Oczywiście, możesz znaleźć własne samouczki lub uczyć się przez działanie.

Podstawy rozszerzeń Chrome

Czym są rozszerzenia Chrome?

Rozszerzenia to małe programy, które mogą modyfikować i zwiększać funkcjonalność przeglądarki Chrome. Piszesz je przy użyciu technologii internetowych, takich jak HTML, JavaScript i CSS.

Jeśli chcesz dowiedzieć się więcej na temat rozszerzeń Chrome, przeczytaj wprowadzenie Google do rozszerzeń i wysokopoziomowy przegląd Google.

Punkt kontrolny 1: Cal to Butt

Mając to wszystko za sobą, zaczynajmy!

Zadanie A: Przeczytaj kod startowy

Zanim zaczniesz pisać jakikolwiek kod, przeczytaj kod startowy i komentarze, które udostępniliśmy. W szczególności przeczytaj cały plik src/inject/inject.js, ponieważ to w nim będziesz wprowadzał większość swoich zmian. Jeśli masz jakieś pytania, to będzie to świetna okazja, aby poprosić o pomoc na naszym kanale Slack!

Zadanie B: Zaktualizuj modifyText, aby zastąpić każdą instancję 'cal’ ciągiem 'butt’

W pierwszym zadaniu zaktualizujesz funkcję modifyText w src/inject/inject.js, aby zastąpić każdą instancję podłańcucha 'cal’ ciągiem 'butt’ w danym słowie i zwróci zmodyfikowany ciąg. Dla części 1 zmienna settings będzie miała wartość null.

Na przykład funkcja modifyText('calhacks organizer', null) powinna zwrócić butthacks organizer.

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

Przetestuj swoją metodę, odwiedzając stronę UC Berkeley Wiki lub witrynę CalHacks. Osobiście lubię stronę Calculus Wiki.

(Wskazówka: Sprawdź dokumentację na temat JavaScript String replace)

Edge cases: Co się dzieje z ciągiem 'iCalendar'? Spróbuj zaktualizować modifyText tak, aby respektował oryginalny przypadek podłańcucha cal. To znaczy, 'cal' -> 'butt', ale także 'Cal' -> 'Butt' i 'CAL' -> 'BUTT'. Jakie inne typowe schematy obudowy uwzględni Twoja funkcja?

Punkt kontrolny 2: Tłumaczenia niestandardowe

Nie jesteśmy pierwszymi, którzy o tym pomyśleli. Jeśli czytasz XKCD, niektóre z tych rzeczy mogą wydawać ci się znajome. Jeśli nie czytałeś XKCD, cóż, nadszedł czas, aby zrobić sobie przerwę w kodowaniu i przeczytać kilka dobrych, staromodnych webkomiksów. Oto kilka z naszych ulubionych.

Komiksy te pokazują kilka świetnych zamienników tekstu, które są tutaj odtworzone w formacie plaintext.

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

I oczywiście, nasz własny

cal -> butt

Użyjemy tej „składni strzałek” do reprezentowania reguł zastępowania tekstu w pozostałej części tego projektu. W szczególności, pozwolimy

pattern -> replacement

reprezentować transformację z łańcucha "pattern" do łańcucha "replacement". Na przykład "years -> minutes" oznacza, że zastępujemy każdą instancję podłańcucha "years" ciągiem "minutes", a "minutes -> years" oznacza, że zastępujemy każdą instancję podłańcucha "minutes" ciągiem "years".

Zadanie C: Parsowanie listy łańcuchów na mapę reguł zastępowania.

Dla tego zadania napiszesz funkcję parseSettings w src/inject/inject.js, aby przekształcić wejściową tablicę wierszy reprezentujących reguły zastępowania i wyprowadzić mapę od wzorców do ich zamienników.

Opis funkcji to

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

Na przykład,

parseSettings()

powinna zwrócić

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

Gwarantujemy Ci, że każdy wpis w tablicy wierszy zawiera podłańcuch '->' przynajmniej raz.

Przypadki brzegowe: W jaki sposób Twoja funkcja przetwarza wiersz "a -> b -> c". Czy zamienia go na "a": "b -> c", na "a -> b": "c", czy na coś innego? Co jeśli nie ma wzorca (tzn. linia wygląda jak "->word" bez tekstu przed strzałką)? Co jeśli nie ma zamiany (np. linia wygląda jak "word->" bez tekstu za strzałką)? A co z linią zawierającą tylko 2 znaki -> (tj. bez tekstu przed lub po strzałce)? Jak Twoja funkcja radzi sobie z białymi spacjami? Czy przetwarza linię " a -> b " jako "a":"b" czy jako " a ": " b "? Co się stanie, jeśli istnieją dwie różne linie, każda z tym samym wzorem. Na przykład, być może jeden wiersz tablicy to "force->horse", a inny wpis to "force->fore"?

Zadanie D: Użyj mapy reguł zastępowania do wykonania kilku zamian tekstu

Po wykonaniu funkcji parseSettings musimy teraz wrócić do funkcji modifyText, aby użyć naszych nowych reguł zastępowania! Kod startowy pobierze wartość zwrotną Twojej funkcji parseSettings i przekaże ją do funkcji modifyText jako zmienną settings.

Do tego zadania będziesz musiał zaktualizować modifyText w src/inject/inject.js, tak aby wszystkie reguły zastępowania z mapy zostały wprowadzone w życie.

Na przykład, jeśli mapa zawiera asocjację między "force" i "horse" (tj. settings = "horse"), to każda instancja podłańcucha "force" powinna zostać zastąpiona ciągiem "horse" w tekście, i tak dalej dla reszty par pattern: replacement w mapie. Jak zawsze, powinieneś nadal zastępować "cal" z "butt"

przypadkami skrajnymi: W jakiej kolejności zastępstwa są oceniane? Załóżmy, że settings = {'train':'bus', 'use':'eat'}. Co dzieje się z łańcuchem "trainer"? Czy train stosuje się najpierw, prowadząc do buser, a następnie beatr? Albo czy use stosuje się najpierw (bez efektu), a następnie train dla końcowego łańcucha buser? Podobnie jak w punkcie kontrolnym 1, jak radzisz sobie z przypadkiem oryginalnego tekstu? Czy istnieje ogólny sposób na respektowanie oryginalnego przypadku?

Używanie akcji przeglądarki.

Aby przetestować tę funkcję, dostarczyliśmy Ci akcję przeglądarki dla rozszerzenia. W prawym górnym rogu okna Chrome będzie znajdować się mała ikona TreeHacks).

Kliknij na ikonę, aby odsłonić interfejs użytkownika, w którym możesz wprowadzić reguły zastępowania. Reguły zastępowania, które wprowadzisz, zostaną przekazane do twoich funkcji i zastosowane do strony. Zrzut ekranu pokazany jest poniżej:

Tekst wprowadzony w tym polu jest trwały – nie zniknie po zamknięciu okna. Jeśli jesteś zainteresowany, kod do zrobienia tego jest w src/browser_action/. Naciśnięcie przycisku Zapisz powoduje zapisanie tekstu w pamięci lokalnej Chrome’a, a naciśnięcie przycisku Wyczyść powoduje wyczyszczenie pamięci lokalnej.

Punkt kontrolny 3: Zamiana obrazów

W trzecim i ostatnim punkcie kontrolnym rozszerzysz funkcjonalność rozszerzenia, aby umożliwić użytkownikowi określanie zamienników obrazów, tak samo jak zamienników tekstu.

Ponieważ jest to ostatnia część hackpacka, dajemy Ci trochę mniej wskazówek i trochę więcej swobody. Możesz użyć dowolnego schematu kodowania, który chcesz reprezentować reguły tłumaczenia obrazów. Sugerujemy, abyś użył schematu img->https://path.to/image.png do wskazania, że wszystkie obrazy powinny być zastąpione obrazem w https://path.to/image.png. W zależności od tego, jak zdecydujesz się reprezentować swoje reguły zastępowania obrazów, możesz mieć oddzielne kroki niż te poniżej.

Zadanie E: Znajdź wszystkie obrazy na danej stronie internetowej.

Jeśli chcemy zastąpić wszystkie obrazy na stronie internetowej, będziemy musieli najpierw mieć wszystkie obrazy na tej stronie. Napisz metodę (pomocniczą), która zwraca listę wszystkich obrazków na stronie.

Możesz pokusić się o użycie jQuery, ale ostrzegamy – włączenie jQuery do rozszerzenia Chrome nie jest łatwe, a istnieje sposób na rozwiązanie tego problemu przy użyciu waniliowego JS. Jeśli potrzebujesz podpowiedzi, sprawdź dokumentację dla querySelectorAll.

Zadanie F: Zaktualizuj parseSettings, aby obsługiwał reguły zamiany obrazów oprócz reguł zamiany tekstu.

Będziesz musiał zmienić implementację parseSettings, aby wyszukać regułę(y) zamiany obrazów. Jak będziesz reprezentował regułę zastępowania obrazów?

Zadanie G: Zaktualizuj źródło każdego obrazu na stronie.

Gdy masz już obrazy i zastępczy adres URL, napisz kod, aby zaktualizować oryginalny obraz tak, aby wyświetlał docelowy adres URL. Jeśli potrzebujesz podpowiedzi, spójrz na atrybut src na obrazkach.

Zadanie H: We’re All in This Together

Z tymi metodami pomocniczymi w ręku, zaimplementuj funkcję replaceAllImages w src/inject/inject.js. Funkcja ta jest wywoływana natychmiast po tym, jak zamienniki tekstu zostaną obliczone. Jeśli wszystko pójdzie dobrze, powinieneś być w stanie wprowadzić regułę zastępowania obrazów do akcji przeglądarki i zobaczyć, że wszystkie obrazy są zastępowane!

Gratulacje!

Udało ci się! Bardzo dobra robota. Zbudowałeś fajne rozszerzenie chrome, które zastępuje treść na stronach internetowych, a co więcej, możesz je zatrzymać!

Poświęć chwilę na relaks, weź głęboki oddech i spójrz wstecz na projekt, który zbudowałeś. To bardzo imponujące!

Jeśli dotarłeś do tego punktu, przyjdź na kanał Slack #hackpack-chrome-ext, aby to uczcić! Zasłużyłeś na to.

Rozszerzenia

Na wysokim poziomie zbudowałeś system, który opiera się na przekazywaniu wiadomości między wyskakującym oknem dialogowym (akcja przeglądarki Chrome) a skryptem uruchamianym na każdej stronie internetowej. Używamy tego do przekazywania informacji o zamianie tekstu i obrazu do skryptu wstrzykującego, ale nie ma powodu, aby na tym poprzestać!

Możesz rozszerzyć ten szkielet, aby zbudować naprawdę fajne projekty. The sky’s the limit, ale podaliśmy tutaj kilka sugestii.

• Dopasuj więcej niż tylko zwykły tekst – dopasuj wyrażenia regularne! Rozszerz funkcjonalność modifyText, aby traktować wzorce z settings jako reprezentujące wyrażenia regularne, a nie tylko zwykły tekst.
• Wspieraj dopasowywanie na selektorach dokumentu z DOM. Dopasowanie do nazw znaczników (jak img, ale także a i iframe), lub nazw .class, a może nawet #ids. Czy możesz zbudować wsparcie dla pełnego zestawu selektorów?
• Nie zastępuj wszystkich obrazów – zastąp tylko kilka (powiedzmy 1%). Czy mógłbyś zmienić linki youtube (a ze znacznikami href zawierającymi "youtube") na filmy Ricka Astleya?

Odchodząc od sfery zamienników,

• Zezwól użytkownikowi na sygnalizowanie informacji do skryptu tła. Być może poprosi o imię i podświetli na czerwono każdy tekst, który zawiera jego imię.
• Pozwól użytkownikowi określić kilka serwerów, które będą działać jako serwery proxy. Zbudowałeś już podstawowy Tor!
• Pozwól użytkownikowi na wprowadzenie danych dotyczących jego zdrowia i zasugeruj (poprzez przyjazny popup lub przekierowanie), aby ćwiczył w każdym okresie czasu spędzonym na przeglądaniu jednej strony (cough reddit cough).

To dopiero początek. Puść wodze fantazji. Nie możemy się doczekać, aby zobaczyć, co zbudujesz!

Różne

Opinie

Jeśli masz jakieś uwagi, pozytywne lub negatywne, dotrzyj do Sama Redmonda (@organizer-sam na Slacku) z opiniami! Chętnie usłyszymy, co według Ciebie jest świetne, a co możemy poprawić.

Uznanie

Wyznanie za pomysł należy się twórcom rozszerzenia Cloud-to-Butt Chrome Extension, uznanie za świetną dokumentację (z której wiele bezwstydnie ukradliśmy) należy się twórcom Chromium, a za obrazki – XKCD.

Licencja

MIT