Slut dig till oss på #hackpack-chrome-ext på Slack för att få hjälp, umgås och visa upp ditt projekt!

Översikt

Grattis! Du har valt det här hackpacket och du är på god väg att bygga en superhäftig produkt!

I det här hackpacket kommer du att bygga ett Chrome-tillägg som ersätter innehållet på webbsidor enligt anpassningsbara regler. I korthet kommer dina uppgifter att omfatta:

1. Ersätt alla förekomster av texten ”cal” på alla webbsidor.
2. Ersätt all text på en webbsida enligt användarspecificerade ersättningsregler.
3. Ersätt alla bilder på en webbsida enligt användarspecificerade ersättningsregler.

När du har slutfört dessa uppgifter har du byggt ett spännande program som du kan använda i din egen webbläsare!

Kom igång

1. Ladda ner och packa upp startkoden.

Du bör ungefär ha följande filer.

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

Alternativt kan du, om du är Git-master, synkronisera med vårt Git-arkiv via HTTPS eller SSH. Obs: Om du inte är bekant med Git, eller inte vet vad följande rader skulle göra, utför inte följande kommandon!

# 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

Kom igång

Ladda ner Google Chrome

För att kunna bygga ett Chrome-tillägg behöver du Google Chrome! Om du inte redan har laddat ner Chrome kan du ladda ner den senaste versionen här. För det här hackpaketet behöver du Chrome version 40 eller nyare. För att ta reda på vilken version du har går du till chrome://version/ i Omnibar och tittar på den översta raden. Du bör se något i stil med

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

Oroa dig inte om det inte är exakt samma. Så länge det stora numret (före decimaltecknet) är större än 40 är du klar!

Ladda startkoden

Chrome levererar vanligtvis tillägg som .crx-filer (liknande .zip-filer), vilket är bra för distribution, men inte så bra för utveckling. Istället säger vi till Chrome att behandla mappen med startkod som ett tillägg.

Vi måste aktivera Chrome Developer Settings för att kunna bygga vårt Chrome-tillägg.

För att göra detta:

1. Navigera till chrome://extensions i din webbläsare.
2. Se till att kryssrutan Utvecklingsläge i det övre högra hörnet är markerad.
3. Klicka på Load unpacked extension… för att öppna en dialogruta för filval.
4. Navigera till katalogen där dina tilläggsfiler finns och välj den.

Du bör nu se en skärm som ser ut som nedan:

Notera att kryssrutan Utvecklingsläge är markerad och att tillägget är aktiverat.

Du ska dessutom vara uppmärksam på länken Reload.

Som standard kommer Chrome inte att ladda om ditt tillägg automatiskt om du uppdaterar din kod. Om du vill testa ditt tillägg måste du alltså ladda om tillägget innan du testar det. Annars kommer dina ändringar inte att finnas med i det aktiva tillägget. I princip varje gång du gör en ändring i din kod som du vill testa live i Chrome, se till att ladda om tillägget med den där Reload-knappen.

Bakgrundskunskap

För det här projektet behöver du viss kunskap om Javascript och Chrome Extensions. Startkoden bör ha tillräckliga kommentarer för att förklara varje fil, men om du vill få en djupare förståelse för dessa system innan du börjar med hackpack, har vi gett dig länkar till några handledningar nedan. Särskilt om du aldrig har sett Javascript tidigare rekommenderar vi starkt att du går igenom en Javascript-handledning.

Lär dig mer om Javascript

Vad är Javascript?

JavaScript är ett skriptspråk för datorer. Det körs ofta i webbläsarprogram för att skapa dynamiskt innehåll som ett popup-meddelande eller en levande klocka. Det är inte besläktat med programmeringsspråket Java.

Här är några av våra favoritsidor för Javascript!

Om du är expert på flera programmeringsspråk sedan tidigare, eller om du tidigare kunde Javascript och bara behöver en uppfräschning av syntaxen, kan du kolla in Learn X in Y Minutes. Den här handledningen tar cirka 10 minuter.

Om du aldrig har sett (eller hört talas om) Javascript tidigare, eller om du vill ha en djupgående, engagerad handledning som tar dig igenom Javascript från grunden, rekommenderar vi Codecademy. Denna handledning tar cirka 10 timmar.

Om du vill ha en omfattande handledning om allt som har med Javascript att göra kan du kolla in W3 Schools. Den här handledningen tar cirka 10 timmar.

Det står dig förstås fritt att hitta egna handledningar eller lära dig genom att göra.

Grunderna i Chrome Extensions

Vad är Chrome Extensions?

Extensions är små mjukvaruprogram som kan ändra och förbättra funktionaliteten i webbläsaren Chrome. Du skriver dem med hjälp av webbteknik som HTML, JavaScript och CSS.

Om du vill lära dig mer om Chrome Extensions kan du läsa igenom Googles introduktion till tillägg och Googles översikt på hög nivå.

Kontrollpunkt 1: Cal to Butt

Med allt detta ur vägen, låt oss komma igång!

Uppgift A: Läs startkoden

För att du ska kunna börja skriva kod ska du läsa igenom startkoden och kommentarerna som vi har tillhandahållit. Läs särskilt hela src/inject/inject.js, eftersom du kommer att göra de flesta av dina ändringar i den filen. Om du har några frågor är detta ett utmärkt tillfälle att be om hjälp i vår Slack-kanal!

Uppgift B: Uppdatera modifyText för att ersätta varje instans av ”cal” med ”butt”

För den första uppgiften ska du uppdatera modifyText-funktionen i src/inject/inject.js så att den ersätter varje instans av delsträngen ”cal” med strängen ”butt” i ett givet ord, och returnerar den ändrade strängen. För del 1 kommer variabeln settings att vara noll.

Till exempel bör modifyText('calhacks organizer', null) återge butthacks organizer.

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

Testa din metod genom att besöka UC Berkeley Wiki-sidan eller CalHacks webbplats. Personligen gillar jag sidan Calculus Wiki.

(Tips: Kolla dokumentationen om JavaScript String replace)

Edge cases: Vad händer med strängen 'iCalendar'? Försök att uppdatera modifyText så att den respekterar det ursprungliga fallet för delsträngen cal. Det vill säga 'cal' -> 'butt', men även 'Cal' -> 'Butt' och 'CAL' -> 'BUTT'. Vilka andra vanliga kasusordningar kommer din funktion att ta hänsyn till?

Kontrollpunkt 2: Anpassade översättningar

Vi är inte de första som har tänkt på det här. Om du läser XKCD kan en del av detta kännas bekant för dig. Om du inte har läst XKCD är det dags att ta en kodningspaus och läsa några bra gammaldags webbserier. Här är några av våra favoriter.

Dessa serier visar några bra textersättningar, som här återges i klartextformat.

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

Och naturligtvis vår alldeles egna

cal -> butt

Vi kommer att använda den här ”pilsyntaxen” för att representera en regel för textersättning under resten av det här projektet. I synnerhet låter vi

pattern -> replacement

representera omvandlingen från strängen "pattern" till strängen "replacement". Till exempel innebär "years -> minutes" att vi ersätter varje instans av delsträngen "years" med strängen "minutes", och "minutes -> years" innebär att vi ersätter varje instans av delsträngen "minutes" med strängen "years".

Uppgift C: Parsa en lista med strängar till en karta med ersättningsregler.

För den här uppgiften ska du skriva funktionen parseSettings i src/inject/inject.js för att konvertera en inmatningsmatris med strängar som representerar ersättningsregler och ge ut en karta från mönster till deras ersättningar.

Funktionens signatur är

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

Till exempel,

parseSettings()

ska återge

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

Du är garanterad att varje post i arrayen av rader innehåller delsträngen '->' minst en gång.

Edge cases: Hur behandlar din funktion raden "a -> b -> c". Förvandlar den den till "a": "b -> c", till "a -> b": "c" eller något annat? Vad händer om det inte finns något mönster (dvs. raden ser ut som "->word" utan text före pilen)? Vad händer om det inte finns någon ersättning (dvs. raden ser ut som "word->" utan text efter pilen)? Vad händer med raden med bara 2 tecken -> (dvs. ingen text före eller efter pilen)? Hur hanterar din funktion vitrymder? Behandlar den raden " a -> b " som "a":"b" eller som " a ": " b "? Vad händer om det finns två olika rader med samma mönster. Till exempel kanske en rad i matrisen är "force->horse" och en annan post är "force->fore"?

Task D: Använd en karta med ersättningsregler för att utföra flera textbyten

När vi har avslutat funktionen parseSettings måste vi nu gå tillbaka till funktionen modifyText för att använda våra nya ersättningsregler! Startkoden tar returvärdet från din parseSettings-funktion och skickar det till modifyText-funktionen som settings-variabel.

För den här uppgiften måste du uppdatera modifyText i src/inject/inject.js, så att alla ersättningsregler från kartan verkställs.

Om kartan till exempel innehåller en association mellan "force" och "horse" (dvs. settings = "horse"), ska alla exempel på delsträngen "force" ersättas med strängen "horse" i texten, och så vidare för resten av pattern: replacement-paren i kartan. Som alltid bör du fortfarande ersätta "cal" med "butt"

Edge cases: I vilken ordning utvärderas ersättningarna? Anta att settings = {'train':'bus', 'use':'eat'}. Vad händer med strängen "trainer"? Är train tillämplig först, vilket leder till buser och sedan beatr? Eller tillämpas use först (utan effekt), följt av train för en slutsträng på buser? Liksom i kontrollpunkt 1, hur hanterar du fallet med den ursprungliga texten? Finns det ett generellt sätt att respektera originalfallet?

Användning av webbläsaråtgärden.

För att testa den här funktionen har vi försett dig med en webbläsaråtgärd för tillägget. I det övre högra hörnet av Chrome-fönstret kommer det att finnas en liten TreeHacks-ikon).

Klicka på ikonen för att visa ett användargränssnitt där du kan ange ersättningsregler. De ersättningsregler som du anger kommer att skickas in i dina funktioner och tillämpas på sidan. En skärmdump av detta visas nedan:

Texten som du anger i den här rutan är beständig – den försvinner inte när du stänger popup-fönstret. Om du är intresserad finns koden för att göra detta i src/browser_action/. Genom att trycka på knappen spara sparas texten i Chromes lokala lagring och genom att trycka på knappen rensa rensas den lokala lagringen.

Kontrollpunkt 3: Bildersättning

För den tredje och sista kontrollpunkten ska du utöka funktionaliteten i tillägget så att användaren kan specificera bildersättningar, precis som textersättningar.

Då det här är den sista delen av hackpack, ger vi dig lite mindre vägledning och lite mer frihet här. Du kan använda vilket kodningsschema du vill för att representera bildöversättningsregler. Vi föreslår att du använder schemat img->https://path.to/image.png för att ange att alla bilder ska ersättas av bilden vid https://path.to/image.png. Beroende på hur du väljer att representera dina regler för bildersättning kan du ha separata steg än de nedan.

Uppgift E: Hitta alla bilder på en viss webbsida.

Om vi vill ersätta alla bilder på en webbsida måste vi först ha alla bilder på den webbsidan. Skriv en (hjälp)metod som returnerar en lista över alla bilder på en sida.

Du kanske frestas att använda jQuery, men var varnas – det är inte lätt att införliva jQuery i ett Chrome-tillägg, och det finns ett sätt att lösa detta med vanilla JS. Om du behöver ett tips kan du läsa dokumentationen för querySelectorAll.

Uppgift F: Uppdatera parseSettings för att hantera regler för bildersättning utöver regler för textersättning.

Du måste ändra implementationen av parseSettings för att hålla utkik efter regler för bildersättning. Hur kommer du att representera en bildersättningsregel?

Uppgift G: Uppdatera källan för varje bild på sidan.

När du har bilderna och ersättnings-URL:n skriver du kod för att uppdatera originalbilden så att den visar mål-URL:n. Om du behöver en ledtråd kan du titta på attributet src för bilder.

Uppgift H: Vi sitter alla i samma båt

Med dessa hjälpmetoder i handen implementerar du replaceAllImages-funktionen i src/inject/inject.js. Den här funktionen anropas omedelbart efter det att textersättningarna har utvärderats. Om allt går bra bör du kunna ange en regel för bildersättning i webbläsarens åtgärd och se att alla bilder ersätts!

Grattis!

Du klarade det! Mycket bra gjort. Du har byggt ett coolt Chrome-tillägg som ersätter innehåll på webbplatser, och dessutom får du behålla det!

Ta en stund för att slappna av, ta ett djupt andetag och se tillbaka på det projekt du har byggt. Det är mycket imponerande!

Om du kommer så här långt, kom till Slack-kanalen #hackpack-chrome-ext för att fira! Du förtjänar det.

Utökningar

På en hög nivå har du byggt ett system som bygger på meddelandeöverföring mellan en popup-dialog (Chromes webbläsaråtgärd) och ett skript som körs på varje webbsida. Vi har använt detta för att överföra information om text- och bildbyten till injektionsskriptet, men det finns ingen anledning att sluta där!

Du kan utöka det här ramverket för att bygga riktigt häftiga projekt. Himlen är gränslös, men vi har gett några förslag här.

• Match mer än bara vanlig text – matcha reguljära uttryck! Utöka funktionaliteten i modifyText för att behandla mönstren från settings som representerande reguljära uttryck, inte bara vanlig text.
• Stöd för matchning på dokumentväljare från DOM. Matcha på taggnamn (som img, men även a och iframe), eller .class-namn, eller kanske till och med #ids. Kan du bygga stöd för hela uppsättningen av selektorer?
• Ersätt inte alla bilder – ersätt bara några få (låt oss säga 1 %). Kan ni ändra youtube-länkar (a-taggar med en href som innehåller "youtube") till Rick Astley-videor?

Vidare bort från ersättningar,

• Gör det möjligt för användaren att signalera information till bakgrundsskriptet. Kanske fråga dem efter deras namn och markera i rött all text som innehåller deras namn.
• Låt användaren ange ett gäng servrar som ska fungera som proxies. Du har byggt en grundläggande Tor!
• Låt användaren ange sina hälsouppgifter och föreslå (via en vänlig popup eller omdirigering) att han/hon ska träna varje gång han/hon surfar på en webbplats (hosta reddit hosta).

Det här är bara början. Låt fantasin flöda fritt. Vi kan inte vänta på att se vad du bygger!

Övrigt

Feedback

Om du har några kommentarer, positiva eller negativa, kan du kontakta Sam Redmond (@organizer-sam på Slack) med feedback! Vi vill gärna höra vad du tycker är bra och vad du tror att vi kan förbättra.

Credit

Crediteringen för idén går till upphovsmännen bakom Chrome Extension Cloud-to-Butt, krediteringen för den fantastiska dokumentationen (som vi skamlöst stal mycket av) går till Chromium-bidragsgivarna, och krediteringen för bilderna går till XKCD.

License

MIT