Kom bij ons op #hackpack-chrome-ext op Slack om hulp te krijgen, rond te hangen, en te pronken met je project!

Overzicht

Gefeliciteerd! U hebt dit hackpack gekozen, en u bent goed op weg om een supercool product te bouwen!

In dit hackpack bouwt u een chroomextensie die de inhoud van webpagina’s vervangt volgens aanpasbare regels. In een oogopslag zullen uw taken omvatten:

1. Vervang alle instanties van de tekst “cal” op alle webpagina’s.
2. Vervang alle tekst op een webpagina volgens door de gebruiker gespecificeerde vervangingsregels.
3. Vervang alle afbeeldingen op een website volgens door de gebruiker gespecificeerde vervangingsregels.

Als u klaar bent met deze taken, hebt u een spannende toepassing gebouwd die u in uw eigen browser kunt gebruiken!

Aan de slag

1. Download en unzip de starter code.

U zou ongeveer de volgende bestanden moeten hebben.

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

Als alternatief, als u een Git master bent, kunt u synchroniseren met onze Git repository over HTTPS of SSH. Opmerking: Als u niet bekend bent met Git, of niet weet wat de volgende regels zouden doen, voer de volgende commando’s dan niet uit!

# 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

Aan de slag

Download Google Chrome

Om een Chrome extensie te bouwen, heeft u Google Chrome nodig! Als u Chrome nog niet hebt gedownload, kunt u de nieuwste versie hier downloaden. Voor dit hackpack hebt u Chrome versie 40 of nieuwer nodig. Om te weten welke versie u hebt, gaat u naar chrome://version/ in de Omnibar, en kijkt u naar de bovenste regel. Je zou iets moeten zien als

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

Maak je geen zorgen als het niet precies hetzelfde is. Zolang het grote getal (voor de komma) groter is dan 40, bent u klaar!

Laad de startercode

Chrome verzendt extensies meestal als .crx-bestanden (vergelijkbaar met .zip-bestanden), wat geweldig is voor distributie, maar niet zo geweldig voor ontwikkeling. In plaats daarvan zullen we Chrome vertellen om de startercode-map als een extensie te behandelen.

We moeten Chrome Developer Settings inschakelen om onze Chrome-extensie te kunnen bouwen.

Om dit te doen:

1. Navigeer naar chrome://extensions in uw browser.
2. Zorg ervoor dat het selectievakje Ontwikkelaarsmodus in de rechterbovenhoek is ingeschakeld.
3. Klik op Uitgepakte extensie laden… om een dialoogvenster voor bestandsselectie te openen.
4. Navig naar de map waarin uw extensiebestanden staan en selecteer deze.

U zou nu een scherm moeten zien dat er uitziet zoals hieronder:

Merk op dat het selectievakje Ontwikkelaarsmodus is ingeschakeld, en dat de extensie is ingeschakeld.

Voorts moet u goed letten op de koppeling Opnieuw laden.

Normaal gesproken zal Chrome uw extensie niet automatisch opnieuw laden als u uw code bijwerkt. Als u uw extensie wilt testen, moet u de extensie dus opnieuw laden voordat u gaat testen. Anders zullen uw wijzigingen niet aanwezig zijn in de actieve extensie. Elke keer dat u een wijziging aanbrengt in uw code die u live in Chrome wilt testen, moet u ervoor zorgen dat u de extensie opnieuw laadt met de knop Herladen.

Achtergrondkennis

Voor dit project hebt u enige kennis nodig van Javascript en Chrome-extensies. De startcode zou voldoende commentaar moeten bevatten om elk bestand uit te leggen, maar als u een dieper inzicht in deze systemen wilt krijgen voordat u aan het hackpack begint, hebben we hieronder links naar enkele tutorials gegeven. In het bijzonder, als u nog nooit Javascript heeft gezien, raden wij u aan om een Javascript tutorial door te nemen.

Leer over Javascript

Wat is JavaScript?

JavaScript is een scripttaal voor computers. Het wordt vaak gebruikt in webbrowsertoepassingen om dynamische inhoud te maken, zoals een pop-upbericht of een live klok. Het is niet gerelateerd aan de programmeertaal Java.

Hier zijn een paar van onze favoriete Javascript tutorials!

Als je al een expert bent in verschillende programmeertalen, of je kende Javascript al en je hebt alleen een opfrisser nodig over de syntax, kijk dan eens naar Learn X in Y Minutes. Deze tutorial duurt ongeveer 10 minuten.

Als je nog nooit Javascript hebt gezien (of van gehoord), of je wilt een diepgaande, betrokken tutorial die je vanaf de basis door Javascript heen leidt, dan raden wij Codecademy aan. Deze tutorial duurt ongeveer 10 uur.

Als je een uitgebreide tutorial wilt van alles wat met Javascript te maken heeft, kijk dan eens bij W3 Schools. Deze tutorial neemt ongeveer 10 uur in beslag.

Het staat u natuurlijk vrij om uw eigen tutorials te vinden of te leren door te doen.

De basisbeginselen van Chrome-extensies

Wat zijn Chrome-extensies?

Extensies zijn kleine softwareprogramma’s die de functionaliteit van de Chrome-browser kunnen wijzigen en verbeteren. U schrijft ze met webtechnologieën zoals HTML, JavaScript en CSS.

Als u meer wilt weten over Chrome-extensies, leest u de inleiding van Google over extensies en het overzicht op hoog niveau van Google.

Checkpoint 1: Cal to Butt

Met dat alles uit de weg, laten we aan de slag gaan!

Taak A: Lees de startcode

Voordat u begint met het schrijven van code, leest u eerst de startcode en het commentaar door dat we u hebben gegeven. Lees in het bijzonder src/inject/inject.js helemaal door, omdat u de meeste wijzigingen in dat bestand zult aanbrengen. Als u vragen hebt, zou dit een geweldige kans zijn om hulp te vragen op ons Slack-kanaal!

Taak B: Werk modifyText bij om elke instantie van ‘cal’ te vervangen door ‘butt’

Voor de eerste taak werkt u de functie modifyText in src/inject/inject.js bij om elke instantie van de substring ‘cal’ te vervangen door de string ‘butt’ in een bepaald woord en retourneert u de gewijzigde string. Voor deel 1, zal de variabele settings null.

Voorbeeld, modifyText('calhacks organizer', null) zou butthacks organizer moeten opleveren.

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

Test je methode door de UC Berkeley Wiki pagina te bezoeken of de CalHacks website. Ik persoonlijk hou van de Calculus Wiki pagina.

(Hint: Bekijk de documentatie over JavaScript String vervangen)

Edge cases: Wat gebeurt er met de string 'iCalendar'? Probeer modifyText zo bij te werken dat het de oorspronkelijke zaak van de substring cal respecteert. Dat wil zeggen, 'cal' -> 'butt', maar ook 'Cal' -> 'Butt' en 'CAL' -> 'BUTT'. Met welke andere gebruikelijke casing-schema’s houdt uw functie rekening?

Checkpoint 2: Aangepaste vertalingen

We zijn niet de eersten die dit bedenken. Als je XKCD leest, komt een deel van dit je misschien bekend voor. Als je XKCD niet gelezen hebt, wel, dan is het tijd om een codeerpauze te nemen en wat goede ouderwetse webcomics te lezen. Hier zijn een paar van onze favorieten.

Deze strips laten een aantal geweldige tekstvervangers zien, die hier in platte tekst worden gereproduceerd.

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

En natuurlijk, onze eigen

cal -> butt

We gaan deze “pijl-syntaxis” gebruiken om een tekstvervangingsregel weer te geven voor de rest van dit project. In het bijzonder laten we

pattern -> replacement

de transformatie van de string "pattern" naar de string "replacement" vertegenwoordigen. Bijvoorbeeld, "years -> minutes" betekent dat we elke instantie van de substring "years" vervangen door de string "minutes", en "minutes -> years" betekent dat we elke instantie van de substring "minutes" vervangen door de string "years".

Taak C: Parseer een lijst van strings in een map van vervangingsregels.

Voor deze taak schrijft u de functie parseSettings in src/inject/inject.js om een invoerarray van regels die vervangingsregels vertegenwoordigen te converteren en een map van patronen naar hun vervangingen uit te voeren.

De functiehandtekening is

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

Zo moet

parseSettings()

bijvoorbeeld

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

U krijgt de garantie dat elke invoer in de array van regels de substring '->' ten minste één keer bevat.

Edge cases: Hoe verwerkt uw functie de regel "a -> b -> c". Verandert die in "a": "b -> c", in "a -> b": "c", of in iets anders? Wat als er geen patroon is (d.w.z. de regel ziet eruit als "->word" zonder tekst voor de pijl)? Wat als er geen vervanging is (d.w.z. de regel ziet eruit als "word->" met geen tekst na de pijl)? Hoe zit het met de regel met slechts 2 tekens -> (d.w.z. geen tekst voor of na de pijl)? Hoe gaat uw functie om met witruimte? Verwerkt hij de regel " a -> b " als "a":"b" of als " a ": " b "? Wat gebeurt er als er twee verschillende lijnen zijn, elk met hetzelfde patroon. Bijvoorbeeld, misschien is één regel van de array "force->horse" en een andere "force->fore"?

Taak D: Gebruik een map van vervangingsregels om verschillende tekstvervangingen uit te voeren

Na de functie parseSettings te hebben voltooid, moeten we nu teruggaan naar de functie modifyText om onze nieuwe vervangingsregels te gebruiken! De startcode neemt de retourwaarde van uw parseSettings functie en geeft die door aan de modifyText functie als de settings variabele.

Voor deze taak moet u modifyText bijwerken in src/inject/inject.js, zodat alle vervangingsregels uit de kaart worden toegepast.

Bijvoorbeeld, als de map een associatie bevat tussen "force" en "horse" (d.w.z. settings = "horse"), dan moet elk geval van de substring "force" worden vervangen door de string "horse" in de tekst, en zo verder voor de rest van de pattern: replacement paren in de map. Zoals altijd moet u "cal" nog steeds vervangen door "butt"

Edge gevallen: In welke volgorde worden vervangingen geëvalueerd? Stel settings = {'train':'bus', 'use':'eat'}. Wat gebeurt er met de string "trainer"? Wordt train eerst toegepast, wat leidt tot buser en dan beatr? Of wordt use eerst toegepast (zonder effect), gevolgd door train voor een uiteindelijke string van buser? Hoe ga je, net als bij Checkpoint 1, om met het geval van de oorspronkelijke tekst? Is er een algemene manier om de originele vorm te respecteren?

Gebruik de browser actie.

Om deze functie te testen, hebben we je een browser actie voor de extensie gegeven. In de rechterbovenhoek van het Chrome-venster ziet u een klein TreeHacks-pictogram).

Klik op het pictogram om een UI te openen waarin u vervangingsregels kunt invoeren. De vervangingsregels die u invoert, worden doorgegeven aan uw functies en toegepast op de pagina. Hieronder ziet u een screenshot hiervan:

De tekst die u in dit vak invoert, is blijvend – hij verdwijnt niet wanneer u de pop-up sluit. Als u geïnteresseerd bent, de code om dit te doen staat in src/browser_action/. Als u op de knop Opslaan drukt, wordt de tekst opgeslagen in het lokale geheugen van Chrome, en als u op de knop Wissen drukt, wordt het lokale geheugen gewist.

Checkpoint 3: Beeldvervanging

Voor het derde en laatste checkpoint breidt u de functionaliteit van het programma uit, zodat de gebruiker beeldvervangingen kan opgeven, net als tekstvervangingen.

Doordat dit het laatste deel van het pakket is, geven we u hier wat minder richtlijnen en wat meer vrijheid. U kunt om het even welk coderingsschema gebruiken om de beeldvertaalregels weer te geven. We stellen voor dat u het schema img->https://path.to/image.png gebruikt om aan te geven dat alle afbeeldingen moeten worden vervangen door de afbeelding op https://path.to/image.png. Afhankelijk van hoe u uw beeldvervangingsregels wilt weergeven, kunt u afzonderlijke stappen hebben dan die hieronder.

Taak E: Vind alle afbeeldingen op een gegeven webpagina.

Als we alle afbeeldingen op een webpagina willen vervangen, zullen we eerst alle afbeeldingen op die webpagina moeten hebben. Schrijf een (helper)methode die een lijst met alle afbeeldingen op een pagina retourneert.

Je bent misschien geneigd om jQuery te gebruiken, maar wees gewaarschuwd – jQuery opnemen in een Chrome-extensie is niet eenvoudig, en er is een manier om dit op te lossen met vanilla JS. Als je een hint nodig hebt, bekijk dan de documentatie voor querySelectorAll.

Taak F: Werk parseSettings bij om naast tekstvervangingsregels ook afbeeldingsvervangingsregels af te handelen.

Je zult de implementatie van parseSettings moeten wijzigen om uit te kijken naar afbeeldingsvervangingsregel(s). Hoe ga je een image replacement rule weergeven?

Taak G: Update de bron van elke afbeelding op de pagina.

Als je eenmaal de afbeeldingen en de vervangings-URL hebt, schrijf dan code om de originele afbeelding bij te werken zodat het de doel-URL weergeeft. Als je een hint nodig hebt, kijk dan naar het src attribuut op afbeeldingen.

Taak H: We’re All In This Together

Met deze helper methods in de hand, implementeer je de replaceAllImages functie in src/inject/inject.js. Deze functie wordt aangeroepen onmiddellijk nadat tekstvervangingen zijn geëvalueerd. Als alles goed gaat, zou je in staat moeten zijn om een regel voor het vervangen van afbeeldingen in te voeren in de browser-actie, en zien dat alle afbeeldingen worden vervangen!

Gefeliciteerd!

Het is je gelukt! Heel goed gedaan. Je hebt een coole chrome extensie gebouwd die inhoud op websites vervangt, en wat meer is, je mag het houden!

Neem even een moment rust, haal diep adem, en kijk terug op het project dat je hebt gebouwd. Het is erg indrukwekkend!

Als je zover bent, kom dan naar het Slack-kanaal #hackpack-chrome-ext om het te vieren! Je hebt het verdiend.

Extensies

Op hoog niveau heb je een systeem gebouwd dat is gebaseerd op het doorgeven van berichten tussen een popup-dialoogvenster (de browseractie van Chrome) en een script dat op elke webpagina wordt uitgevoerd. We hebben dit gebruikt om informatie over tekst- en beeldvervangingen door te geven aan het injectiescript, maar daar hoeven we het niet bij te laten!

Je kunt dit framework uitbreiden om echt coole projecten te bouwen. De sky is de limit, maar we hebben hier wat suggesties gegeven.

• Match meer dan alleen platte tekst – match reguliere expressies! Breid de functionaliteit van modifyText uit om de patronen uit settings te behandelen als reguliere expressies, niet alleen als platte tekst.
• Ondersteun matching op document selectors uit het DOM. Match op tag namen (zoals img, maar ook a en iframe), of .class namen, of misschien zelfs #ids. Kun je ondersteuning bouwen voor de volledige set van selectors?
• Vervang niet alle afbeeldingen – vervang er maar een paar (zeg 1%). Kun je youtube links (a tags met een href met daarin "youtube") veranderen in Rick Astley video’s?

Op het gebied van vervangingen,

• Mogelijkheid voor de gebruiker om informatie door te geven aan het achtergrond script. Misschien hun naam vragen, en tekst die hun naam bevat rood markeren.
• Laat de gebruiker een aantal servers opgeven om als proxies te fungeren. Je hebt een basis Tor gebouwd!
• Laat een gebruiker zijn gezondheidsgegevens invoeren, en stel voor (via een vriendelijke popup of redirect) dat ze elke periode dat ze op een site surfen (cough reddit cough) oefeningen doen.

Dit is nog maar het begin. Laat je fantasie de vrije loop. We kunnen niet wachten om te zien wat je bouwt!

Diversen

Feedback

Als je opmerkingen hebt, positief of negatief, neem dan contact op met Sam Redmond (@organisator-sam op Slack) met feedback! We horen graag wat je goed vindt, en wat je denkt dat we kunnen verbeteren.

Credit

Credit voor het idee gaat naar de bedenkers van de Cloud-to-Butt Chrome Extensie, credit voor de geweldige documentatie (waarvan we veel schaamteloos hebben gestolen) gaat naar de Chromium contributors, en credit voor de afbeeldingen gaat naar XKCD.

Licentie

MIT