Vieni a trovarci su #hackpack-chrome-ext su Slack per ricevere aiuto, uscire e mostrare il tuo progetto!

Panoramica

Congratulazioni! Hai scelto questo hackpack e sei sulla buona strada per costruire un prodotto super cool!

In questo hackpack, costruirai un’estensione per chrome che sostituisce il contenuto delle pagine web secondo regole personalizzabili. A colpo d’occhio, i vostri compiti includeranno:

1. Sostituire tutte le istanze del testo “cal” su tutte le pagine web.
2. Sostituire tutto il testo su una pagina web secondo regole di sostituzione specificate dall’utente.
3. Sostituisci tutte le immagini su una pagina web secondo le regole di sostituzione specificate dall’utente.

Dopo aver finito questi compiti, avrai costruito un’applicazione interessante che potrai usare nel tuo browser! Scarica e decomprimi il codice di partenza.

Dovresti avere all’incirca i seguenti file.

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

In alternativa, se sei un Git master, puoi sincronizzarti con il nostro repository Git su HTTPS o SSH. Nota: se non hai familiarità con Git, o non sai cosa farebbero le seguenti linee, non eseguire i seguenti comandi!

# 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

Preparazione

Scaricare Google Chrome

Per costruire un’estensione per Chrome, hai bisogno di Google Chrome! Se non hai ancora scaricato Chrome, scarica l’ultima versione qui. Per questo hackpack, avrai bisogno di Chrome versione 40 o più recente. Per capire quale versione hai, vai su chrome://version/ nell’Omnibar e guarda la linea superiore. Dovresti vedere qualcosa come

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

Non preoccuparti se non è esattamente lo stesso. Finché il numero maggiore (prima della virgola) è maggiore di 40, sei a posto!

Carica il codice di avvio

Chrome di solito spedisce le estensioni come file .crx (simili ai file .zip), il che è ottimo per la distribuzione, ma non tanto per lo sviluppo. Invece, diremo a Chrome di trattare la cartella del codice iniziale come un’estensione.

Abbiamo bisogno di abilitare le impostazioni dello sviluppatore Chrome per costruire la nostra estensione chrome.

Per fare questo:

1. Naviga verso chrome://extensions nel tuo browser.
2. Assicurati che la casella di controllo della modalità sviluppatore nell’angolo in alto a destra sia selezionata.
3. Clicca Load unpacked extension… per far apparire una finestra di dialogo di selezione dei file.
4. Vai alla directory in cui si trovano i file della tua estensione e selezionala.

Ora dovresti vedere una schermata simile alla seguente:

Nota che la casella di controllo della modalità sviluppatore è selezionata e l’estensione è abilitata.

Inoltre, presta molta attenzione al link Reload.

Di default, Chrome non ricarica automaticamente la tua estensione se aggiorni il tuo codice. Quindi, se vuoi testare la tua estensione, devi ricaricare l’estensione prima di testarla. Altrimenti, le tue modifiche non saranno presenti nell’estensione attiva. Fondamentalmente, ogni volta che fai una modifica al tuo codice che vuoi testare dal vivo in Chrome, assicurati di ricaricare l’estensione usando il pulsante Reload.

Conoscenze di base

Per questo progetto, avrai bisogno di qualche conoscenza di Javascript e delle estensioni di Chrome. Il codice di partenza dovrebbe avere sufficienti commenti per spiegare ogni file, ma se vuoi avere una comprensione più profonda di questi sistemi prima di iniziare l’hackpack, abbiamo fornito link ad alcuni tutorial qui sotto. In particolare, se non hai mai visto Javascript prima d’ora, ti raccomandiamo vivamente di seguire un tutorial su Javascript.

Impara a conoscere Javascript

Che cos’è JavaScript?

JavaScript è un linguaggio di scripting per computer. Viene spesso eseguito nelle applicazioni del browser web per creare contenuti dinamici come un messaggio popup o un orologio dal vivo. Non è correlato al linguaggio di programmazione Java.

Ecco alcuni dei nostri tutorial Javascript preferiti!

Se sei già esperto in diversi linguaggi di programmazione, o conoscevi già Javascript e hai solo bisogno di un ripasso della sintassi, guarda Learn X in Y Minutes. Questo tutorial dura circa 10 minuti.

Se non hai mai visto (o sentito parlare) di Javascript prima, o vuoi un tutorial approfondito e coinvolto che ti porta attraverso Javascript da zero, ti consigliamo Codecademy. Questo tutorial dura circa 10 ore.

Se vuoi un tutorial completo di tutto ciò che riguarda Javascript, controlla W3 Schools. Questo tutorial dura circa 10 ore.

Certo, sei libero di trovare i tuoi tutorial, o imparare facendo.

Le basi delle estensioni di Chrome

Cosa sono le estensioni di Chrome?

Le estensioni sono piccoli programmi software che possono modificare e migliorare le funzionalità del browser Chrome. Le scrivi usando tecnologie web come HTML, JavaScript e CSS.

Se vuoi saperne di più sulle estensioni di Chrome, leggi l’introduzione di Google alle estensioni e la panoramica di alto livello di Google.

Punto di controllo 1: Cal to Butt

Con tutto questo fuori dai piedi, cominciamo!

Task A: Leggi il codice di partenza

Prima di iniziare a scrivere qualsiasi codice, leggi il codice di partenza e i commenti che ti abbiamo fornito. In particolare, leggi tutto src/inject/inject.js, perché farai la maggior parte delle tue modifiche in quel file. Se hai qualche domanda, questa sarebbe un’ottima occasione per chiedere aiuto sul nostro canale Slack!

Task B: Aggiornare modifyText per sostituire ogni istanza di ‘cal’ con ‘butt’

Per il primo task, aggiornerai la funzione modifyText in src/inject/inject.js per sostituire ogni istanza della sottostringa ‘cal’ con la stringa ‘butt’ in una data parola e restituisce la stringa modificata. Per la parte 1, la variabile settings sarà null.

Per esempio, modifyText('calhacks organizer', null) dovrebbe restituire butthacks organizer.

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

Testate il vostro metodo visitando la pagina Wiki della UC Berkeley o il sito CalHacks. Personalmente mi piace la pagina Wiki di Calculus.

(Suggerimento: controlla la documentazione su JavaScript String replace)

Caso limite: Cosa succede alla stringa 'iCalendar'? Provate ad aggiornare modifyText in modo che rispetti il caso originale della sottostringa cal. Cioè 'cal' -> 'butt', ma anche 'Cal' -> 'Butt' e 'CAL' -> 'BUTT'. Di quali altri schemi di casing comuni terrà conto la vostra funzione?

Punto di controllo 2: Traduzioni personalizzate

Non siamo i primi a pensarci. Se leggete XKCD, alcune di queste cose potrebbero sembrarvi familiari. Se non avete letto XKCD, beh, è il momento di fare una pausa di codifica e leggere qualche buon vecchio webcomic. Qui ci sono alcuni dei nostri preferiti.

Questi fumetti mostrano alcune grandi sostituzioni di testo, che sono qui riprodotte in formato testo semplice.

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

E naturalmente, il nostro

cal -> butt

Useremo questa “sintassi della freccia” per rappresentare una regola di sostituzione del testo per il resto di questo progetto. In particolare, lasceremo che

pattern -> replacement

rappresenti la trasformazione dalla stringa "pattern" alla stringa "replacement". Per esempio, "years -> minutes" significa che sostituiamo ogni istanza della sottostringa "years" con la stringa "minutes", e "minutes -> years" significa che sostituiamo ogni istanza della sottostringa "minutes" con la stringa "years".

Task C: Analizzare una lista di stringhe in una mappa di regole di sostituzione.

Per questo compito, scriverete la funzione parseSettings in src/inject/inject.js per convertire un array di input di righe che rappresentano regole di sostituzione e produrre una mappa dai modelli ai loro sostituti.

La firma della funzione è

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

Per esempio,

parseSettings()

dovrebbe restituire

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

Ti viene garantito che ogni voce nell’array di righe contenga la sottostringa '->' almeno una volta.

Caso limite: Come elabora la tua funzione la riga "a -> b -> c". La trasforma in "a": "b -> c", in "a -> b": "c" o in qualcos’altro? Cosa succede se non c’è uno schema (cioè la linea appare come "->word" senza testo prima della freccia)? E se non c’è una sostituzione (cioè la linea assomiglia a "word->" senza testo dopo la freccia)? E la linea con solo 2 caratteri -> (cioè nessun testo prima o dopo la freccia)? Come gestisce la tua funzione gli spazi bianchi? Tratta la riga " a -> b " come "a":"b" o come " a ": " b "? Cosa succede se ci sono due linee diverse, ognuna con lo stesso modello. Per esempio, forse una riga dell’array è "force->horse" e un’altra voce è "force->fore"?

Task D: Usare una mappa di regole di sostituzione per eseguire diverse sostituzioni di testo

Avendo completato la funzione parseSettings, ora dobbiamo tornare alla funzione modifyText per usare le nostre nuove regole di sostituzione! Il codice di avvio prenderà il valore di ritorno della tua funzione parseSettings e lo passerà nella funzione modifyText come variabile settings.

Per questo compito, dovrai aggiornare modifyText in src/inject/inject.js, in modo che tutte le regole di sostituzione dalla mappa siano attuate.

Per esempio, se la mappa contiene un’associazione tra "force" e "horse" (cioè settings = "horse"), allora ogni istanza della sottostringa "force" dovrebbe essere sostituita dalla stringa "horse" nel testo, e così via per il resto delle coppie pattern: replacement nella mappa. Come sempre, si dovrebbe ancora sostituire "cal" con "butt"

casi di margine: In che ordine vengono valutate le sostituzioni? Supponiamo settings = {'train':'bus', 'use':'eat'}. Cosa succede alla stringa "trainer"? Si applica prima train, portando a buser e poi a beatr? O use si applica prima (senza effetto), seguito da train per una stringa finale di buser? Come nel punto di controllo 1, come si gestisce il caso del testo originale? C’è un modo generale per rispettare il caso originale?

Utilizzando l’azione del browser.

Per testare questa funzione, ti abbiamo fornito un’azione del browser per l’estensione. Nell’angolo in alto a destra della finestra di Chrome, ci sarà una piccola icona TreeHacks).

Clicca sull’icona per rivelare un’interfaccia utente dove puoi inserire regole di sostituzione. Le regole di sostituzione che inserisci saranno passate nelle tue funzioni e applicate alla pagina. Uno screenshot di questo è mostrato qui sotto:

Il testo che inserisci in questa casella è persistente – non scomparirà quando chiuderai il popup. Se sei interessato, il codice per fare questo è in src/browser_action/. Premendo il pulsante salva il testo nella memoria locale di Chrome, e premendo il pulsante cancella la memoria locale.

Checkpoint 3: Image Replacement

Per il terzo e ultimo checkpoint, estenderai la funzionalità dell’estensione per permettere all’utente di specificare le sostituzioni di immagini, proprio come le sostituzioni di testo.

Siccome questa è la parte finale dell’hackpack, ti stiamo dando meno indicazioni e un po’ più di libertà. Puoi usare qualsiasi schema di codifica tu voglia per rappresentare le regole di traduzione delle immagini. Ti suggeriamo di usare lo schema img->https://path.to/image.png per indicare che tutte le immagini dovrebbero essere sostituite dall’immagine a https://path.to/image.png. A seconda di come scegliete di rappresentare le vostre regole di sostituzione delle immagini, potreste avere dei passi separati da quelli che seguono.

Task E: trovare tutte le immagini su una data pagina web.

Se vogliamo sostituire tutte le immagini su una pagina web, dobbiamo prima avere tutte le immagini su quella pagina web. Scrivi un metodo (helper) che restituisca una lista di tutte le immagini su una pagina.

Potresti essere tentato di usare jQuery, ma fai attenzione – incorporare jQuery in un’estensione di Chrome non è facile, e c’è un modo per risolvere questo problema usando vanilla JS. Se hai bisogno di un suggerimento, controlla la documentazione per querySelectorAll.

Task F: Aggiornare parseSettings per gestire le regole di sostituzione delle immagini in aggiunta alle regole di sostituzione del testo.

Dovrai cambiare l’implementazione di parseSettings per tenere conto delle regole di sostituzione delle immagini. Come rappresenterai una regola di sostituzione dell’immagine?

Task G: Aggiorna il sorgente di ogni immagine sulla pagina.

Una volta che hai le immagini e l’URL di sostituzione, scrivi il codice per aggiornare l’immagine originale in modo che visualizzi l’URL di destinazione. Se hai bisogno di un suggerimento, guarda l’attributo src sulle immagini.

Task H: We’re All in This Together

Con questi metodi helper in mano, implementa la funzione replaceAllImages in src/inject/inject.js. Questa funzione viene chiamata immediatamente dopo la valutazione delle sostituzioni di testo. Se tutto va bene, dovresti essere in grado di inserire una regola di sostituzione dell’immagine nell’azione del browser, e vedere che tutte le immagini vengono sostituite!

Congratulazioni!

Ci sei riuscito! Molto ben fatto. Hai costruito una bella estensione per chrome che sostituisce il contenuto dei siti web, e in più, puoi tenerla!

Prenditi un momento per rilassarti, fai un respiro profondo e guarda il progetto che hai costruito. È davvero impressionante!

Se arrivi a questo punto, vieni sul canale Slack #hackpack-chrome-ext per festeggiare! Te lo meriti.

Estensioni

A un livello alto, hai costruito un sistema che si basa sul passaggio di messaggi tra una finestra di dialogo popup (l’azione del browser Chrome) e uno script che viene eseguito su ogni pagina web. Abbiamo usato questo per passare informazioni sulle sostituzioni di testo e immagini allo script di iniezione, ma non c’è motivo di fermarsi qui!

Puoi estendere questo framework per costruire progetti davvero fantastici. Il cielo è il limite, ma abbiamo dato alcuni suggerimenti qui.

• Esegui più di un semplice testo – abbina le espressioni regolari! Estendere la funzionalità di modifyText per trattare i modelli da settings come espressioni regolari, non solo testo semplice.
• Supporta la corrispondenza su selettori di documenti dal DOM. Corrispondere ai nomi dei tag (come img, ma anche a e iframe), o ai nomi .class, o forse anche ai #id. Puoi costruire il supporto per l’intero set di selettori?
• Non sostituire tutte le immagini – sostituiscine solo alcune (diciamo l’1%). Potresti cambiare i link di youtube (tag a con un href contenente "youtube") in video di Rick Astley?

Lontano dal regno delle sostituzioni,

• Consenti all’utente di segnalare informazioni allo script di sfondo. Forse chiedete il loro nome, ed evidenziate in rosso qualsiasi testo che contenga il loro nome.
• Lasciate che l’utente specifichi un mucchio di server per agire come proxy. Avete costruito un Tor di base!
• Consentite all’utente di inserire i suoi dati sanitari, e suggerite (tramite un popup o un reindirizzamento amichevole) di fare esercizio fisico per ogni periodo di tempo che trascorre in un sito (cough reddit cough).

Questo è solo l’inizio. Lasciate correre l’immaginazione. Non vediamo l’ora di vedere cosa costruisci!

Varie

Feedback

Se hai qualche commento, positivo o negativo, contatta Sam Redmond (@organizer-sam su Slack) con un feedback! Ci piacerebbe sentire cosa pensi sia fantastico e cosa pensi che possiamo migliorare.

Credito

Il credito per l’idea va ai creatori dell’estensione Chrome Cloud-to-Butt, il credito per la grande documentazione (molta della quale abbiamo rubato senza vergogna) va ai collaboratori di Chromium, e il credito per le immagini va a XKCD.

Licenza

MIT