Als Web-UI-Entwickler und -Designer gibt es unzählige Dinge zu lernen und nur so viele Stunden am Tag. Es gibt Themen, die ich bewusst vermieden habe, wie z. B. die Entwicklung mobiler und Offline-Anwendungen, denn irgendwann muss man eine Grenze ziehen bei den Millionen von glänzenden neuen Themen und etwas Arbeit erledigen. Einer der Bereiche, die ich in der Vergangenheit vermieden habe, ist die Entwicklung von Browsererweiterungen. Ich verstand nicht, wie sie funktionierten, was die Entwicklungsumgebung war oder wie Berechtigungen mit dem Überschreiben von Seiten interagierten, denn ehrlich gesagt, ich glaubte nicht, dass es mich interessieren würde.
Dann bat mich eines Tages meine sehr talentierte Freundin und Designerin/Entwicklerin Natalie Schoch, ihre Chrome-Erweiterung über die Ziellinie zu bringen. Sie hatte das Frontend bereits als Prototyp erstellt, brauchte aber etwas Hilfe beim Anbinden des Datensatzes und bei interaktivem JavaScript. Das Projekt heißt Wordsmith und ist jetzt im Chrome Extension Store erhältlich. Es ist eine kostenlose und ästhetisch ansprechende Möglichkeit, neue Vokabeln zu lernen, während Sie im Web surfen. Die Erweiterung zeigt bei jedem neuen Tab ein neues Vokabelwort mit seiner Definition und Synonymen an.
Nun, genug Werbung für das neue Ding, das wir gemacht haben, und weiter geht's mit dem Spaß, Chrome-Erweiterungen zu verstehen!
Zuerst, was ist eine Chrome-Erweiterung überhaupt? Laut den Chrome-Entwicklerdokumenten
Erweiterungen sind ereignisgesteuerte Programme, die verwendet werden, um das Chrome-Browsing-Erlebnis zu verändern oder zu verbessern. Sie ermöglichen es Benutzern, die Funktionalität und das Verhalten von Chrome an ihre individuellen Bedürfnisse oder Vorlieben anzupassen. Sie basieren auf Webtechnologien wie HTML, JavaScript und CSS.
(Hervorhebung von mir)
Im Grunde ist eine Chrome-Erweiterung ein auf ein Ziel fokussiertes Werkzeug, das auf dem normalen Browsing-Erlebnis aufbaut, um einen bestimmten Satz von Interaktionen zu überschreiben.
Eine einfache Erweiterung zum Laufen bringen
Die Chrome-Dokumentation ist meistens geradlinig, kann aber für Anfänger schnell zu kompliziert werden. Das Erste, was Sie in Ihrem lokalen Projektverzeichnis erstellen müssen, ist eine Datei namens manifest.json. Diese Datei fungiert als Kommandozentrale Ihrer Erweiterung. Hier teilen Sie Chrome mit, auf welche Dateien es achten soll und welche Art von Erweiterungslogik Sie verwenden.
{
“version”: 1.0:, // This is your regular project version number
“manifest_version”: 2, // Just use 2, it's the stable version you want
“name”: “Wordsmith”, // The name of your extension!
“description”: “New tab? New word!”, // The description of your extension!
“author”: “Natalie Schoch and Lindsay Grizzard”, // Who you are
“chrome_url_overrides” : {
“newtab”: “newtab.html”
}
}Lassen Sie uns über den Teil chrome_url_overrides sprechen. Damit sagen Sie Chrome: "Hey, das, was du normalerweise laden würdest (in diesem Fall) in einem neuen Tab, lade stattdessen diese coole Sache, die ich gemacht habe." Ich empfehle, mit einer neuen Tab-Chrome-Erweiterung zu beginnen, da dies der schnellste Weg ist, um zu sehen, ob Sie dieses kleine Erweiterungszeug zum Laufen bringen. Sie könnten auch die Historie oder Lesezeichen überschreiben, aber das überlasse ich Ihnen zum Erkunden.
Jetzt können wir eine neue Datei namens newtab.html erstellen.
<!DOCTYPE HTML>
<html>
<body>
<h1> Hey there world </h1>
</body>
</html>Großartig! Jetzt müssen Sie nur noch dies in das Erweiterungsentwicklungssystem von Chrome laden, um Ihre schöne Arbeit zu sehen. Um dies zum Laufen zu bringen, laden Sie Ihr Projekt im Entwicklermodus von Chrome mit den folgenden Schritten:
- Gehen Sie zu
chrome://extensions - Schalten Sie oben rechts "Entwicklermodus" ein
- Klicken Sie auf "Entpackt laden"
- Laden Sie das Verzeichnis, das Ihre Dateien
manifest.jsonundnewtab.htmlenthält - Öffnen Sie einen neuen Tab!
Das sollten Sie sehen
Sie haben gerade eine Chrome-Erweiterung erstellt. Herzlichen Glückwunsch! An diesem Punkt können Sie Ihr eigenes Abenteuer beginnen und jedes statische Design für einen neuen Tab erstellen. Sie können CSS schreiben, wie Sie es normalerweise tun würden (SCSS-Kompilierung einrichten, Skript-Tags, Inline, wenn Sie ein Monster sind usw.), und neue statische Dinge erstellen.
Das Wichtigste, was Sie sich merken sollten, wenn Sie die Datei manifest.json oder JS-Dateien ändern, ist, dass Sie zurück zu chrome://extensions gehen und auf das Aktualisierungssymbol für Ihre Erweiterung klicken müssen. Sie wird nicht automatisch von Ihrer lokalen Entwicklung aktualisiert und Ihre Änderungen werden ohne diesen Schritt nicht übernommen. Das hat mich ziemlich verwirrt.
Nun reden wir über JavaScript
Es gibt zwei Arten von Skriptdateien in Chrome-Erweiterungen: Inhaltsskripte und Hintergrundskripte.
Hintergrundskripte werden zur Verwaltung zentraler Anwendungsaufgaben verwendet. Sie können wie ein Controller für Ihre Anwendung fungieren, ruhen, bis ein Ereignis ausgelöst wird, und entladen sich nach Abschluss des Ereignisses. Verwenden Sie Hintergrundskripte, wenn Sie die Kernlogik Ihrer Anwendung steuern oder auf Interaktionen außerhalb des DOMs der Seite lauschen möchten. Ein Beispiel wäre das Klicken auf das Symbol Ihrer Chrome-Erweiterung oben rechts in der Symbolleiste. Das ist kein Teil des seitenbezogenen DOMs. Wenn Sie Dinge außerhalb der isolierten Seite, auf der Sie sich befinden, manipulieren möchten, benötigen Sie Hintergrundskripte.
Als Hinweis: Diese basieren auf der Chrome-API und sind etwas fortgeschrittener. In Wordsmith habe ich beschlossen, Hintergrundskripte komplett wegzulassen, da wir nur DOM-spezifische UI benötigten. Ich fand Hintergrundskripte besonders knifflig und erhielt die meiste Hilfe von Daniel Shiffman's Video- Tutorial. Tatsächlich ist seine gesamte Tutorial-Reihe eine hervorragende Einführung in die Entwicklung von Erweiterungen.
Inhaltsskripte führen JavaScript im Kontext einer bestimmten Webseite und isoliert aus. Das bedeutet, jedes Skript kann auf das aktuelle DOM zugreifen und es manipulieren, aber das DOM und seine Skripte können die Chrome-Erweiterung nicht zurück manipulieren. Inhaltsskripte haben begrenzten Zugriff auf die Chrome-API und existieren, um in einzelnen, isolierten Instanzen zu arbeiten. Dies sichert Erweiterungsinformationen und verhindert Konflikte zwischen Bibliotheken.
Cool, aber was bedeutet das alles tatsächlich? Es besagt zwei Dinge. Sie können Inhaltsskripte verwenden, um normales Browser-JavaScript auszuführen, so wie Sie es in einer einfachen Webanwendung tun würden. Die Definition von Isolation bedeutet, dass das JavaScript Ihrer Erweiterung in seinem eigenen Universum existiert, getrennt vom JavaScript jeder Webseite. Dies hält Dinge wie geheime API-Schlüssel von Seiten-Skripten fern. Es ermöglicht Ihnen auch, jede Version einer JavaScript-Bibliothek in Ihrer Erweiterung zu verwenden, ohne sich über widersprüchliche Versionen auf einer bestimmten Webseite Gedanken machen zu müssen.
Der praktische Unterschied bei der Verwendung von Inhaltsskripten liegt in ihrer Ladeweise. Anstatt direkt in HTML auf die Datei zu verlinken, verwenden Sie die Datei manifest.json, um die Skripte anzugeben, die Sie aufrufen möchten.
{
“manifest_version”: 2,
“name”: “Wordsmith”,
“description”: “New tab? New word!”
“author”: “Natalie Schoch and Lindsay Grizzard”,
“chrome_url_overrides” : {
“newtab”: “newtab.html”
},
"content_scripts": [
{
"matches": [
"<all_urls>" //see all match pattern options in the chrome docs
],
"js": ["[your-path-to]/jquery.min.js","[your-path-to]/scripts.js"]
}
]
}Dieser neue Befehl für Inhaltsskripte in der Datei manifest.json sagt Chrome ein paar Dinge. Er teilt Chrome mit, wo die Datei ausgeführt werden soll, mit der Anweisung "matches". Soll sie auf jeder einzelnen Chrome-Seite geladen werden? Machen Sie eine Erweiterung, die nur bestimmte Seiten beeinflussen soll? Um dies anzugeben, fügen Sie das entsprechende URL- Match-Muster hinzu, um Chrome mitzuteilen, worauf es achten soll. Außerdem teilt es der Manifestdatei mit, wo Ihre Inhaltsskripte zu finden sind und in welcher Reihenfolge sie ausgeführt werden sollen.
Wenn Sie die Datei manifest.json oder JavaScript-Dateien ändern, müssen Sie zurück zu chrome://extensions gehen und auf das Aktualisierungssymbol für Ihre Erweiterung klicken.
Fügen Sie eine console.log() zu Ihrer neuen Skriptdatei hinzu, laden Sie Ihre Erweiterung neu, navigieren Sie zu einer beliebigen URL, und Sie werden Ihre Konsolennachricht sehen. Das Sehen des Konsolenprotokolls zeigt Ihnen, dass Sie jetzt Zugriff auf das DOM haben und damit beginnen können, es zu manipulieren. CHROME-ERWEITERUNGEN SIND SO COOL. Sie haben die Macht, mit dem Frontend des Internets zu spielen, ohne Quellcode oder eine komplexe Entwicklungsumgebung zu benötigen. Lasst uns jetzt Spaß haben und alle Divs auf einer Seite rot machen!
$('div').css('background-color','red');
Gehen Sie jetzt zu einer anderen Website. Alles ist furchtbar und rot, aber Sie haben so viel Macht! Sie können jede Webseite manipulieren, um Ihre Wünsche zu erfüllen. Gehen Sie voran und formen Sie das Design des Internets in etwas Besseres (oder Schlimmeres) für sich selbst oder andere!
Das ist im Grunde alles, was Sie wissen müssen, um mit Chrome-Erweiterungen zu beginnen. Obwohl die Dokumentation anfangs etwas ungewohnt sein kann, beginnen Sie mit einer einfachen statischen neuen Tab-Erweiterung und arbeiten Sie sich von dort aus weiter!
Viel Spaß beim Manifest(.json)ieren!
Sehen Sie sich das GitHub-Repository von Wordsmith an, um zu sehen, wie wir unsere erste Chrome-Erweiterung entwickelt haben, und forken Sie es gerne und lassen Sie uns von Fehlern wissen!
Ich dachte, es gibt einen neuen Standard für Erweiterungen... genannt "Web Extension". von MDN
"WebExtensions ist ein plattformübergreifendes System zur Entwicklung von Browsererweiterungen in Firefox. Dieses System bietet APIs, die zu einem großen Teil browserübergreifend unterstützt werden, wie z. B. Mozilla Firefox, Google Chrome, Opera Browser und Microsoft Edge."
Weiß jemand, wie der Status dazu ist?
Oh, das wusste ich nicht... vielleicht mein nächstes Artikelthema!
Plugins können eine großartige Möglichkeit sein, sowohl Zeit zu sparen als auch Nicht-Entwicklern bei der Nutzung ansonsten verwirrender Autorensysteme zu helfen.
Ich habe bereits eine erstellt, um einem Benutzer zu helfen, schnell zwischen Live-, Vorschau- und Bearbeitungsansichten für eine Seite zu wechseln, und eine weitere, um einem Benutzer auf einer Website mit standortspezifischen Variationen zu helfen.
Sie können einfach praktische und leicht verständliche Schaltflächen zum Browser hinzufügen
Das ist eine großartige Anwendung. Ich liebe diese Idee!!!
Vielen Dank für diesen Artikel, er ist wirklich toll. Ich bin Ihrem Beispiel gefolgt und habe ein Problem mit manifest.json gefunden. Um es zum Laufen zu bringen, musste ich nicht nur manifest_version, sondern auch die Version selbst angeben
"version": "1.0",
"manifest_version": 2
Aber trotzdem danke für den Artikel.
Grüße
Hallo Peter, Sie haben absolut Recht! Das habe ich vergessen. Aktualisiere jetzt
Vielen Dank für dieses Tutorial – es ist ein großartiger Ausgangspunkt!