Schließe dich uns in #hackpack-chrome-ext auf Slack an, um Hilfe zu bekommen, abzuhängen und dein Projekt vorzustellen!

Übersicht

Glückwunsch! Du hast dich für dieses Hackpack entschieden und bist auf dem besten Weg, ein supercooles Produkt zu bauen!

In diesem Hackpack wirst du eine Chrome-Erweiterung bauen, die den Inhalt von Webseiten nach anpassbaren Regeln ersetzt. Auf einen Blick, Ihre Aufgaben gehören:

1. Ersetzen Sie alle Instanzen des Textes „cal“ auf allen Webseiten.
2. Ersetzen Sie alle Texte auf einer Webseite nach benutzerdefinierten Ersetzungsregeln.
3. Ersetzen Sie alle Bilder auf einer Webseite nach benutzerdefinierten Ersetzungsregeln.

Nachdem Sie diese Aufgaben erledigt haben, werden Sie eine spannende Anwendung erstellt haben, die Sie in Ihrem eigenen Browser verwenden können!

Erste Schritte

1. Laden Sie den Startcode herunter und entpacken Sie ihn.

Sie sollten ungefähr die folgenden Dateien haben.

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

Alternativ können Sie, wenn Sie ein Git-Master sind, mit unserem Git-Repository über HTTPS oder SSH synchronisieren. Hinweis: Wenn Sie mit Git nicht vertraut sind oder nicht wissen, was die folgenden Zeilen bewirken, führen Sie die folgenden Befehle nicht aus!

# 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

Erste Schritte

Google Chrome herunterladen

Um eine Chrome-Erweiterung zu erstellen, benötigen Sie Google Chrome! Wenn du Chrome noch nicht heruntergeladen hast, kannst du die neueste Version hier herunterladen. Für dieses Hackpack benötigst du Chrome Version 40 oder neuer. Um herauszufinden, welche Version Sie haben, gehen Sie zu chrome://version/ in der Omnibar und sehen Sie sich die oberste Zeile an. Sie sollten etwas sehen wie

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

Machen Sie sich keine Sorgen, wenn es nicht genau dasselbe ist. Solange die Hauptzahl (vor dem Dezimalpunkt) größer als 40 ist, sind Sie bereit!

Laden Sie den Starter-Code

Chrome liefert Erweiterungen normalerweise als .crx-Dateien aus (ähnlich wie .zip-Dateien), was für die Verteilung gut ist, aber nicht so gut für die Entwicklung. Stattdessen werden wir Chrome anweisen, den Startercode-Ordner als Erweiterung zu behandeln.

Wir müssen die Chrome-Entwicklereinstellungen aktivieren, um unsere Chrome-Erweiterung zu erstellen.

Um dies zu tun:

1. Navigieren Sie zu chrome://extensions in Ihrem Browser.
2. Vergewissern Sie sich, dass das Kontrollkästchen Entwicklermodus in der oberen rechten Ecke aktiviert ist.
3. Klicken Sie auf Entpackte Erweiterung laden…, um einen Dateiauswahldialog zu öffnen.
4. Navigieren Sie zu dem Verzeichnis, in dem sich Ihre Erweiterungsdateien befinden, und wählen Sie es aus.

Sie sollten nun einen Bildschirm sehen, der wie der folgende aussieht:

Beachten Sie, dass das Kontrollkästchen für den Entwicklermodus aktiviert ist und die Erweiterung aktiviert ist.

Achten Sie außerdem auf den Link Neu laden.

Standardmäßig lädt Chrome Ihre Erweiterung nicht automatisch neu, wenn Sie Ihren Code aktualisieren. Wenn Sie also Ihre Erweiterung testen möchten, müssen Sie die Erweiterung vor dem Testen neu laden. Andernfalls werden Ihre Änderungen nicht in die aktive Erweiterung übernommen. Grundsätzlich gilt: Jedes Mal, wenn Sie eine Änderung an Ihrem Code vornehmen, die Sie live in Chrome testen möchten, stellen Sie sicher, dass Sie die Erweiterung über die Schaltfläche „Neu laden“ neu laden.

Hintergrundwissen

Für dieses Projekt benötigen Sie einige Kenntnisse über Javascript und Chrome-Erweiterungen. Der Startcode sollte genügend Kommentare enthalten, um jede Datei zu erklären, aber wenn Sie ein tieferes Verständnis dieser Systeme erlangen möchten, bevor Sie mit dem Hackpack beginnen, haben wir unten Links zu einigen Tutorials bereitgestellt. Insbesondere, wenn du noch nie mit Javascript in Berührung gekommen bist, empfehlen wir dir, ein Javascript-Tutorial durchzuarbeiten.

Lerne über Javascript

Was ist JavaScript?

JavaScript ist eine Skriptsprache für Computer. Sie wird oft in Webbrowser-Anwendungen ausgeführt, um dynamische Inhalte wie Popup-Nachrichten oder eine Live-Uhr zu erstellen. Es ist nicht mit der Programmiersprache Java verwandt.

Hier sind ein paar unserer Lieblings-Javascript-Tutorials!

Wenn Sie bereits Experte in mehreren Programmiersprachen sind oder Javascript kennen und nur eine Auffrischung der Syntax benötigen, schauen Sie sich Learn X in Y Minutes an. Dieses Tutorial dauert etwa 10 Minuten.

Wenn Sie noch nie etwas von Javascript gesehen (oder gehört) haben, oder wenn Sie ein ausführliches, umfassendes Tutorial wünschen, das Sie von Grund auf in Javascript einführt, empfehlen wir Codecademy. Dieses Tutorium dauert etwa 10 Stunden.

Wenn Sie ein umfassendes Tutorium zu allen Dingen, die mit Javascript zu tun haben, wünschen, sollten Sie sich W3 Schools ansehen. Dieses Tutorial dauert etwa 10 Stunden.

Natürlich steht es Ihnen frei, Ihre eigenen Tutorials zu finden oder selbst zu lernen.

Die Grundlagen von Chrome-Erweiterungen

Was sind Chrome-Erweiterungen?

Erweiterungen sind kleine Softwareprogramme, die die Funktionalität des Chrome-Browsers verändern und erweitern können. Sie werden mit Hilfe von Webtechnologien wie HTML, JavaScript und CSS geschrieben.

Wenn Sie mehr über Chrome-Erweiterungen erfahren möchten, lesen Sie die Einführung von Google zu Erweiterungen und den Überblick von Google.

Checkpoint 1: Cal to Butt

Wenn das alles erledigt ist, können wir loslegen!

Aufgabe A: Lesen Sie den Startcode

Bevor Sie mit dem Schreiben von Code beginnen, lesen Sie sich den Startcode und die Kommentare durch, die wir zur Verfügung gestellt haben. Lesen Sie insbesondere den gesamten Abschnitt src/inject/inject.js, da Sie die meisten Ihrer Änderungen in dieser Datei vornehmen werden. Wenn Sie Fragen haben, wäre dies eine gute Gelegenheit, in unserem Slack-Kanal um Hilfe zu bitten!

Aufgabe B: Aktualisieren Sie modifyText, um jede Instanz von „cal“ durch „butt“ zu ersetzen

Für die erste Aufgabe aktualisieren Sie die Funktion modifyText in src/inject/inject.js, um jede Instanz der Teilzeichenkette „cal“ durch die Zeichenkette „butt“ in einem gegebenen Wort zu ersetzen, und geben die geänderte Zeichenkette zurück. Für Teil 1 wird die Variable settings Null sein.

Zum Beispiel sollte modifyText('calhacks organizer', null) butthacks organizer zurückgeben.

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

Testen Sie Ihre Methode, indem Sie die UC Berkeley Wiki Seite oder die CalHacks Website besuchen. Ich persönlich mag die Calculus-Wiki-Seite.

(Tipp: Sehen Sie sich die Dokumentation zu JavaScript String replace an)

Edge cases: Was passiert mit der Zeichenkette 'iCalendar'? Versuchen Sie, modifyText so zu aktualisieren, dass der ursprüngliche Fall der Teilzeichenkette cal beibehalten wird. Das heißt, 'cal' -> 'butt', aber auch 'Cal' -> 'Butt' und 'CAL' -> 'BUTT'. Welche anderen gebräuchlichen Groß- und Kleinschreibweisen wird Ihre Funktion berücksichtigen?

Prüfpunkt 2: Benutzerdefinierte Übersetzungen

Wir sind nicht die Ersten, die auf diese Idee kommen. Wenn Sie XKCD lesen, kommt Ihnen vielleicht einiges davon bekannt vor. Wenn Sie XKCD nicht gelesen haben, ist es an der Zeit, eine Programmierpause einzulegen und ein paar gute, altmodische Webcomics zu lesen. Hier sind ein paar unserer Favoriten.

Diese Comics zeigen einige großartige Textersetzungen, die hier im Klartextformat wiedergegeben werden.

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

Und natürlich unser eigenes

cal -> butt

Wir werden diese „Pfeilsyntax“ verwenden, um eine Textersetzungsregel für den Rest dieses Projekts darzustellen. Insbesondere wird

pattern -> replacement

die Umwandlung der Zeichenfolge "pattern" in die Zeichenfolge "replacement" darstellen. Zum Beispiel bedeutet "years -> minutes", dass wir jede Instanz der Teilzeichenkette "years" durch die Zeichenkette "minutes" ersetzen, und "minutes -> years" bedeutet, dass wir jede Instanz der Teilzeichenkette "minutes" durch die Zeichenkette "years" ersetzen.

Aufgabe C: Parse a list of strings into a map of replacement rules.

Für diese Aufgabe schreiben Sie die Funktion parseSettings in src/inject/inject.js, um ein Eingabe-Array von Zeilen, die Ersetzungsregeln darstellen, zu konvertieren und eine Map von Mustern zu ihren Ersetzungen auszugeben.

Die Funktionssignatur lautet

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

Zum Beispiel sollte

parseSettings()

zurückgeben

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

Sie haben die Garantie, dass jeder Eintrag im Zeilenarray die Teilzeichenkette '->' mindestens einmal enthält.

Endfälle: Wie verarbeitet Ihre Funktion die Zeile "a -> b -> c". Wird sie zu "a": "b -> c", zu "a -> b": "c" oder zu etwas anderem? Was ist, wenn es kein Muster gibt (d. h. die Zeile sieht aus wie "->word", ohne Text vor dem Pfeil)? Was ist, wenn es keine Ersetzung gibt (d. h. die Zeile sieht aus wie "word->", ohne Text nach dem Pfeil)? Was ist mit der Zeile mit nur 2 Zeichen -> (d. h. kein Text vor oder nach dem Pfeil)? Wie geht Ihre Funktion mit Leerzeichen um? Verarbeitet sie die Zeile " a -> b " als "a":"b" oder als " a ": " b "? Was geschieht, wenn es zwei verschiedene Zeilen mit demselben Muster gibt? Ein Beispiel: Eine Zeile des Arrays ist "force->horse" und ein anderer Eintrag ist "force->fore"?

Aufgabe D: Verwenden Sie eine Karte von Ersetzungsregeln, um mehrere Textersetzungen durchzuführen

Nachdem wir die Funktion parseSettings abgeschlossen haben, müssen wir nun zur Funktion modifyText zurückkehren, um unsere neuen Ersetzungsregeln zu verwenden! Der Startcode übernimmt den Rückgabewert der Funktion parseSettings und übergibt ihn als Variable settings an die Funktion modifyText.

Für diese Aufgabe müssen Sie modifyText in src/inject/inject.js aktualisieren, damit alle Ersetzungsregeln aus der Map in Kraft treten.

Wenn die Map beispielsweise eine Assoziation zwischen "force" und "horse" (d.h. settings = "horse") enthält, dann sollte jede Instanz der Teilzeichenkette "force" im Text durch die Zeichenkette "horse" ersetzt werden, und so weiter für den Rest der pattern: replacement Paare in der Map. Wie immer sollten Sie "cal" durch "butt"

Edge cases ersetzen: In welcher Reihenfolge werden die Ersetzungen ausgewertet? Nehmen wir an, settings = {'train':'bus', 'use':'eat'}. Was passiert mit der Zeichenfolge "trainer"? Gilt zuerst train, was zu buser und dann zu beatr führt? Oder gilt zuerst use (ohne Wirkung), gefolgt von train, so dass die Zeichenfolge schließlich buser lautet? Wie in Checkpoint 1, wie behandeln Sie den Fall des Originaltextes? Gibt es eine allgemeine Möglichkeit, die Groß- und Kleinschreibung zu berücksichtigen?

Mit der Browser-Aktion.

Um diese Funktion zu testen, haben wir Ihnen eine Browser-Aktion für die Erweiterung zur Verfügung gestellt. In der oberen rechten Ecke des Chrome-Fensters befindet sich ein kleines TreeHacks-Symbol.

Klicken Sie auf das Symbol, um eine Benutzeroberfläche zu öffnen, in der Sie Ersetzungsregeln eingeben können. Die von Ihnen eingegebenen Ersetzungsregeln werden an Ihre Funktionen übergeben und auf die Seite angewendet. Ein Screenshot davon ist unten zu sehen:

Der Text, den Sie in dieses Feld eingeben, bleibt bestehen – er verschwindet nicht, wenn Sie das Popup schließen. Wenn Sie daran interessiert sind, finden Sie den Code dafür in src/browser_action/. Wenn Sie auf die Schaltfläche „Speichern“ klicken, wird der Text im lokalen Speicher von Chrome gespeichert, und wenn Sie auf die Schaltfläche „Löschen“ klicken, wird der lokale Speicher gelöscht.

Checkpoint 3: Bildersatz

Für den dritten und letzten Checkpoint werden Sie die Funktionalität der Erweiterung so erweitern, dass der Benutzer Bildersatz genau wie Textersatz angeben kann.

Da dies der letzte Teil des Hackpacks ist, geben wir Ihnen hier etwas weniger Anleitung und etwas mehr Freiheit. Sie können jedes beliebige Kodierungsschema verwenden, um die Bildübersetzungsregeln darzustellen. Wir schlagen vor, dass Sie das Schema img->https://path.to/image.png verwenden, um anzuzeigen, dass alle Bilder durch das Bild unter https://path.to/image.png ersetzt werden sollen. Je nachdem, wie Sie die Regeln für die Ersetzung von Bildern darstellen wollen, können Sie auch andere Schritte als die folgenden ausführen.

Aufgabe E: Finden Sie alle Bilder auf einer bestimmten Webseite.

Wenn wir alle Bilder auf einer Webseite ersetzen wollen, müssen wir zunächst alle Bilder auf dieser Webseite haben. Schreiben Sie eine (Hilfs-)Methode, die eine Liste aller Bilder auf einer Seite zurückgibt.

Sie könnten versucht sein, jQuery zu verwenden, aber seien Sie gewarnt – die Einbindung von jQuery in eine Chrome-Erweiterung ist nicht einfach, und es gibt einen Weg, dies mit Vanilla JS zu lösen. Wenn Sie einen Tipp brauchen, sehen Sie sich die Dokumentation zu querySelectorAll an.

Aufgabe F: Aktualisieren Sie parseSettings, um zusätzlich zu den Textersatzregeln auch Bildersatzregeln zu behandeln.

Sie müssen die Implementierung von parseSettings ändern, um auf Bildersatzregeln zu achten. Wie werden Sie eine Bildersatzregel darstellen?

Aufgabe G: Aktualisieren Sie die Quelle jedes Bildes auf der Seite.

Wenn Sie die Bilder und die Ersatz-URL haben, schreiben Sie Code, um das Originalbild zu aktualisieren, damit es die Ziel-URL anzeigt. Wenn Sie einen Hinweis brauchen, sehen Sie sich das src-Attribut von Bildern an.

Aufgabe H: Wir stecken alle gemeinsam drin

Mit diesen Hilfsmethoden in der Hand implementieren Sie die replaceAllImages-Funktion in src/inject/inject.js. Diese Funktion wird unmittelbar nach der Auswertung der Textersetzungen aufgerufen. Wenn alles gut geht, sollten Sie in der Lage sein, eine Bildersetzungsregel in die Browseraktion einzugeben und zu sehen, dass alle Bilder ersetzt werden!

Glückwunsch!

Sie haben es geschafft! Sehr gut gemacht. Du hast eine coole Chrome-Erweiterung gebaut, die Inhalte auf Websites ersetzt, und was noch wichtiger ist, du darfst sie behalten!

Nimm dir einen Moment Zeit, um dich zu entspannen, tief durchzuatmen und auf das Projekt zurückzublicken, das du gebaut hast. Es ist sehr beeindruckend!

Wenn du diesen Punkt erreichst, komm in den Slack-Kanal #hackpack-chrome-ext, um zu feiern! Du hast es verdient.

Erweiterungen

Auf hohem Niveau hast du ein System gebaut, das sich auf die Weitergabe von Nachrichten zwischen einem Popup-Dialog (die Browser-Aktion von Chrome) und einem Skript, das auf jeder Webseite läuft, stützt. Wir haben dies genutzt, um Informationen über Text- und Bildersatz an das Injektionsskript weiterzugeben, aber es gibt keinen Grund, dass wir hier aufhören müssen!

Sie können dieses Framework erweitern, um wirklich coole Projekte zu bauen. Dem Himmel sind keine Grenzen gesetzt, aber wir haben hier einige Vorschläge gemacht.

• Mit regulären Ausdrücken mehr als nur reinen Text abgleichen! Erweitern Sie die Funktionalität von modifyText, um die Muster aus settings als reguläre Ausdrücke zu behandeln, nicht nur als reinen Text.
• Unterstützen Sie den Abgleich mit Dokumentenselektoren aus dem DOM. Match auf Tag-Namen (wie img, aber auch a und iframe), oder .class-Namen, oder vielleicht sogar #ids. Können Sie Unterstützung für alle Selektoren einbauen?
• Ersetzen Sie nicht alle Bilder, sondern nur einige wenige (z.B. 1%). Könnten Sie Youtube-Links (a-Tags mit einem href, der "youtube" enthält) in Rick Astley-Videos umwandeln?

Abgesehen vom Bereich der Ersetzungen,

• erlauben Sie dem Benutzer, dem Hintergrundskript Informationen zu übermitteln. Vielleicht fragst du ihn nach seinem Namen und hebst jeden Text, der seinen Namen enthält, rot hervor.
• Lass den Benutzer eine Reihe von Servern angeben, die als Proxys fungieren. Du hast ein einfaches Tor gebaut!
• Erlaube einem Benutzer, seine Gesundheitsdaten einzugeben, und schlage (über ein freundliches Popup oder eine Weiterleitung) vor, dass er jede Zeit, die er auf einer Seite verbringt (hust, reddit hust), trainiert.

Das ist nur der Anfang. Lassen Sie Ihrer Fantasie freien Lauf. Wir können es kaum erwarten, zu sehen, was ihr baut!

Sonstiges

Feedback

Wenn ihr irgendwelche Kommentare habt, positive oder negative, wendet euch an Sam Redmond (@organizer-sam auf Slack) mit eurem Feedback! Wir würden gerne hören, was ihr gut findet und was wir eurer Meinung nach verbessern können.

Credit

Die Idee geht an die Erfinder der Cloud-to-Butt Chrome Extension, die großartige Dokumentation (von der wir vieles schamlos gestohlen haben) an die Chromium-Mitwirkenden und die Bilder an XKCD.

License

MIT