Steuern Sie das Internet Mit Chrome-Erweiterungen!

0
16

Als web-UI-Entwickler und-designer, es gibt unzählige Dinge zu lernen, und nur so viele Stunden am Tag. Es gibt Themen, die ich habe absichtlich vermieden, wie mobile-und offline-Anwendung Entwicklung, weil an einem gewissen Punkt, haben Sie, um eine Linie zu zeichnen, die irgendwo in den Millionen von glänzenden neuen Themen und die Arbeit erledigen. Einer der Bereiche, ich habe vermieden, in der Vergangenheit ist browser-Erweiterung, Entwicklung. Ich nicht verstehen, wie Sie funktioniert, was die Entwicklungs-Umgebung war, oder wie Berechtigungen interagiert mit übergeordneten Seiten, weil, ehrlich gesagt, ich glaube nicht, dass ich interessiert war.

Dann, eines Tages, meine sehr begabte designer/developer Freundin Natalie Schoch fragte mich, um Ihr die Chrome-Erweiterung über die Ziellinie. Sie hatte die front-end-Prototyp, aber brauchte Hilfe, das einstecken der Daten gesetzt und mit interaktiven JavaScript. Das Projekt nennt sich Autor und es ist nun an der Chrome-Erweiterung Speichern. Es ist eine freie und ästhetisch Ansprechend Weg, um zu lernen neue Vokabeln, wie Sie im web surfen. Die Erweiterung Oberflächen eine neue Vokabular-Wort zusammen mit Ihrer definition und Synonyme in jeder neuen Registerkarte.

Egal, genug einstecken der neuen Sache, die wir gemacht haben und auf den Spaß, herauszufinden, Chrome-Erweiterungen!

Eine animation zeigt, wie die Wordsmith-Erweiterung funktioniert, wenn Sie öffnen einen neuen tab in Chrome.

Erstens, was ist eine Chrome-Erweiterung überhaupt? Laut Chrome developer docs:

Erweiterungen sind event-basierte Programme verwendet werden, zu ändern oder zu verbessern, die Chrome-Browser-Erfahrung. Sie ermöglichen es Benutzern, Schneider Chrome die Funktionen und das Verhalten an die individuellen Bedürfnisse oder Präferenzen. Sie basieren auf web-Technologien wie HTML, JavaScript und CSS-Dateien.

(Hervorhebung von mir)

Im Grunde eine Chrome-Erweiterung ist ein one-trick-pony-tool baut auf der normalen browsing-Erfahrung zu überschreiben, eine konzentrierte Reihe von Interaktionen.

Immer ein bare-bones-Erweiterung und läuft

Die Chrom-docs sind meist einfach aber kann man zu kompliziert für einen Anfänger. Das erste, was Sie brauchen, um in Ihrem lokalen Projekt-directory ist ein manifest.json-Datei. Diese Datei fungiert als Kommandozentrale für Ihre Erweiterung. Dies ist, wo Sie sagen, Chrome, welche Dateien es sollten aufmerksam sein, um welche Art der Erweiterung Logik, die Sie verwenden.

{
“manifest_version”: 2, // Nur 2, es ist die stabile version, die Sie wollen
“name”: “Wordsmith”, // Der name deiner Erweiterung!
“Beschreibung”: “Neuen tab? Neues Wort!”, // Die Beschreibung Ihrer Erweiterung!
“Autor”: “Natalie Schoch und Lindsay Grizzard”, // Wer Sie sind
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}

Lassen Sie uns darüber reden, dass chrome_url_overrides bit. Dies sage Chrom, “Hey, als was würden Sie normalerweise eine Last (in diesem Fall) in einem neuen tab laden Sie dieses Coole, was ich stattdessen gemacht.” Ich empfehle, beginnend mit einer neuen tab-Google Chrome-Erweiterung, weil es ist der Schnellste Weg, um zu sehen, dass Sie immer das kleine Erweiterung, was zu arbeiten. Könnte man auch überschreiben Verlauf oder in den Lesezeichen, aber ich lasse Sie entdecken, dass auf Ihrem eigenen.

Jetzt erstellen wir eine neue Datei namens newtab.html:

<!DOCTYPE HTML>
<html>
<body>
<h1> Hallo Welt </h1>
</body>
</html>

Super!!! Alles was Sie jetzt tun müssen ist, laden Sie diese in Chrome extension developer-system zu sehen, Ihre schöne Arbeit. Um dies zu erhalten und in Betrieb ist, laden Sie Ihr Projekt in Chrome die developer-Modus mit den folgenden Schritten:

  1. Gehen Sie zu chrome://extensions
  2. Schalten Sie “Entwickler-Modus” in der oberen rechten
  3. Klicken Sie Auf “Load Unpacked”
  4. Laden Sie das Verzeichnis mit Ihrem manifest.json und newtab.html Dateien
  5. Öffnen Sie eine neue Registerkarte!

Sie sollten sehen, diese Magie:

Sie haben gerade gebaut eine Chrome-Erweiterung. Herzlichen Glückwunsch! An diesem Punkt, Sie können gehen Sie auf Ihre eigenen Abenteuer und machen ein statisches design für eine neue Registerkarte. Schreiben Sie CSS wie gewohnt (SCSS zu kompilieren, script-tags, inline, wenn Sie ein monster, etc…), und erstellen Sie neue statische Dinge.

Die wichtigste Sache zu erinnern, beim ändern des manifests.json-Datei oder JS-Dateien ist, dass Sie gehen müssen, zurück in Chrom://Erweiterungen und drücken den reload-icon für Ihre Erweiterung. Es wird kein update von Ihrer lokalen Entwicklung automatisch und Ihre änderungen werden nicht reflektiert werden, ohne diesen Schritt. Dies verwirrt das heck aus mir heraus.

Jetzt reden wir über JavaScript

Es gibt zwei Arten von Skript-Dateien im Chrome-Erweiterungen: content-scripts und hintergrund-Skripts.

Hintergrund-Skripts verwendet werden, für die Handhabung der zentralen Anwendungs-Aufgaben. Sie können handeln wie ein controller für Ihre Anwendung, bleiben inaktiv, bis ein Ereignis ausgelöst wird-und entladen, nachdem das Ereignis abgeschlossen ist. Verwenden Sie hintergrund-Skripts, wenn Sie kontrollieren möchten, mit den core-Logik der Anwendung oder listen für Interaktionen, die sich außerhalb der das DOM der Seite. Ein Beispiel würde sein, klicken Sie mit der Chrome-Erweiterung-Symbol in der oberen rechten Seite der Symbolleiste. Das ist nicht Bestandteil der Seite-spezifischen DOM. Wenn Sie wollen, zu manipulieren, Dinge außerhalb der Sandbox-Seite Sie sind auf, müssen Sie die hintergrund-Skripts.

Klicken auf das Symbol, und ein popup-load ist ein Beispiel für ein hintergrund-script-Befehl.

Als Anmerkung, diesen verlassen Sie sich auf die Chrome-API und ein bisschen mehr erweiterte. In Wordsmith, habe ich beschlossen, zu verzichten hintergrund-Skripts vollständig, da wir nur benötigt, DOM-spezifische Benutzeroberfläche. Ich fand die hintergrund-Skripte besonders knifflig und hat die meiste Hilfe von Daniel Shiffman s-video-tutorial. In der Tat, seine ganze tutorial-Reihe ist eine schöne Einführung in die extension-Entwicklung.

Content-scripts Ausführung von JavaScript im Kontext einer Webseite und in isolation. Dies bedeutet, dass jedes Skript-Zugriff auf die aktuellen DOM und manipulieren, aber der DOM und seine Skripte, nicht manipulieren kann, die Chrome-Erweiterung zurück. Inhalt-Skripte beschränkt Chrome API-Zugriff gibt und das arbeiten in einzelnen, isolierten Beispielen. Diese Erweiterung sichert Daten und hält library-Konflikte.

Cool, aber was hat das alles eigentlich zu bedeuten? Es sagt zwei Dinge. Sie können Inhalte, Skripts, um regelmäßige browser JavaScript, als würden Sie in eine einfache web-Anwendung. Die Isolierung definition bedeutet, dass Ihre Erweiterung die JavaScript-ist in einem eigenen Universum, getrennt von jeder Webseite JavaScript. Dies hält die Dinge wie API-secret-keys, private-Seite-Skripts. Darüber hinaus können Sie jede beliebige version einer JavaScript-Bibliothek, die in Ihrer Verlängerung, ohne sich Gedanken über widersprüchliche Versionen auf einer bestimmten Webseite.

Der praktische Unterschied in der content-Skripte ist, wie Sie geladen werden. Statt der Verknüpfung direkt auf die Datei, im HTML, verwenden Sie das manifest.json-Datei angeben, die von Skripts, die Sie aufrufen möchten.

{
“manifest_version”: 2,
“name”: “Wordsmith”,
“Beschreibung”: “Neuen tab? Neues Wort!”
“Autor”: “Natalie Schoch und Lindsay Grizzard”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
“content_scripts”: [
{
“matches”: [
“<all_urls>” //sehen alle Muster passen in den Optionen im chrome-docs
],
“js”: [“[Ihr-Pfad-zu]/jquery.min.js”,”[Ihr-Pfad-zu]/scripts.js”]
}
]
}

Diese neue content-script-Befehl in das manifest.json-Datei sagt, Chrome, ein paar Dinge. Es erzählt Chrome, wo Sie wollen, dass die Datei mit der “entspricht” – Anweisung. Wollen Sie es zu laden, die auf jeden einzelnen Chrome-Seite? Machen Sie eine Erweiterung, die soll nur auf bestimmten Seiten? Diese zu spezifizieren, fügen Sie die entsprechende URL auf das Muster passen zu erzählen Chrome-was ist zu beachten. Es erzählt auch die manifest-Datei wo zu finden, Ihre Inhalte, Skripte und in welcher Reihenfolge Sie ausgeführt werden.

Beim ändern der manifest.json-Datei und JavaScript-Dateien ist, dass Sie gehen müssen, zurück in Chrom://Erweiterungen und drücken den reload-icon für Ihre Erweiterung.

Fügen Sie eine Konsole.log (), um Ihr neues Skript-Datei, laden Sie Ihre Erweiterung, navigieren Sie zu einer beliebigen URL, und Sie werden sehen, Ihre Konsole Nachricht. Zu sehen, die Konsole sagt Ihnen, dass Sie haben nun Zugriff auf das DOM und kann beginnen, Sie zu manipulieren. CHROME-ERWEITERUNGEN SIND SO COOL. Sie haben die macht, zu spielen, um mit dem front-end des internet ohne source-code, oder eine komplexe dev-Umgebung. Jetzt lasst uns etwas Spaß haben, indem alle die divs auf einer Seite rot!

$(‘div’).css(‘background-color’,’red’);

Nun, gehen Sie zu einer anderen website. Alles ist schrecklich und rot, aber Sie haben so viel Kraft! Sie manipulieren können, jede Webseite zu Ihren Diensten. Gehen Sie weiter und Formen die Gestaltung der internet-in etwas besser (oder schlechter) für sich selbst oder andere!

Das ist im Grunde alles, was Sie wissen müssen, um loszulegen mit Chrome-Erweiterungen. Obwohl in der Dokumentation kann ein wenig außen auf den ersten, beginnen Sie mit einer einfachen statischen neue Registerkarte Erweiterung und iterieren von dort!

Glücklich manifest – (.json)ing!

Check-out Wordsmith das GitHub-repo zu sehen, wie wir den Bau unserer ersten Chrome-Erweiterung und fühlen Sie sich frei, um die Gabel und lassen Sie uns wissen, über bugs!