In diesem Beitrag stellen wir einige wichtige Verbesserungen bei den ersten Schritten mit Chrome-Erweiterungen vor und zeigen dir, wie du Teil dieses Traums sein kannst.
Der alte Leitfaden
Bisher war die Anleitung zu den ersten Schritten mit Chrome-Erweiterungen ein einfaches Beispiel einer Erweiterung, bei dem die Hintergrundfarbe der aktuellen Seite geändert wurde, wenn der Nutzer auf eine Schaltfläche im Pop-up der Erweiterung klickte. Es gab auch eine Optionsseite, auf der Sie eine von vier Farben auswählen konnten.
In diesem einfachen Beispiel wurde nicht gezeigt, wie beliebte Funktionen in realen Erweiterungen hinzugefügt werden können. Es war Zeit für eine Umgestaltung.
Ein neuer Ansatz
Wir wissen, dass sich Entwickler beim Einstieg in Chrome-Erweiterungen auf unsere Dokumentation verlassen. Unser Ziel ist es daher, einen barrierefreien, anfängerfreundlichen Weg zu finden. Anstatt zu versuchen, das vorhandene Tutorial-Beispiel zu verbessern, haben wir uns entschieden, von vorne anzufangen.
Wir stellen vor: die neue und verbesserte Sammlung „Erste Schritte“:
- Grundlagen zu Erweiterungen
- Hier werden einige grundlegende Konzepte bei der Entwicklung von Chrome-Erweiterungen kurz beschrieben, darunter Webtechnologien und häufig genutzte Erweiterungskomponenten. Darüber hinaus enthält sie Informationen, die Sie beachten sollten, wenn Sie eine Erweiterung im Chrome Web Store entwerfen und vertreiben.
- Grundlagen der Entwicklung
- In diesem Kurs wird der Workflow zur Entwicklung von Erweiterungen anhand eines Beispiels mit der Bezeichnung Hello, Extensions beschrieben. Darin werden das Laden der Erweiterung während der Entwicklung, das Auffinden von Protokollen und Fehlern, die Auswahl einer Projektstruktur und die Verwendung von Typescript beschrieben.
- Anleitung zur Lesezeit
- Es ist gut zu wissen, wie viel Zeit wir brauchen, um einen Artikel zu lesen. Anhand der Lesezeit kannst du auf jeder Dokumentationsseite der Erweiterung ein Element mit der geschätzten Lesezeit einfügen.
- Anleitung für den Konzentrationsmodus
- Wenn eine Seite unübersichtlich wird, können wir uns auf die wichtigsten Informationen konzentrieren. Der Konzentrationsmodus zeigt, wie du den Stil der Seite ändern und ein paar ablenkende Elemente ausblenden kannst.
- Anleitung zum Tab-Manager
- Wenn du dich über die Entwicklung von Erweiterungen informierst, kann es sein, dass du in mehreren Fenstern mehrere Dokumentationstabs findest. Im Tab-Manager können Sie die Tabs Ihrer Chrome-Erweiterung und der Dokumentation im Chrome Web Store organisieren.
In diesen Tutorials erfahren Sie nicht nur, wie Sie Erweiterungen aus der Praxis erstellen, sondern erhalten auch Tipps und Best Practices für die Entwicklung. Wenn Sie diese Erweiterungen verwenden, können Sie die Dokumentation der Erweiterung besser lesen.
Ablauf
Jedes Tutorial umfasst die folgenden Abschnitte:
- Aufgabe, die die Erweiterung ausführen wird
- Welche Lektionen werden behandelt?
- Wissenswertes
- Schritt-für-Schritt-Anleitung zum Erstellen der Erweiterung.
- So laden und testen Sie die Erweiterung.
Wenn Sie sich einer Herausforderung stellen möchten, haben wir einen Abschnitt mit einigen Ideen hinzugefügt, wie Sie Ihre Erweiterung anpassen oder weitere Funktionen hinzufügen können.
Wir brauchen Ihre Hilfe
Wir freuen uns, von dir zu hören. Wenn Ihnen in diesen Leitfäden etwas unklar oder unklar ist, melden Sie den Fehler bitte in unserem GitHub-Repository.
Wir denken, dass dieser neue Startleitfaden eine deutliche Verbesserung gegenüber dem alten darstellt, aber wir arbeiten daran, unsere Dokumentation weiter zu verbessern und zu erweitern, um allen Erweiterungsentwicklern noch besser gerecht zu werden.
Foto von Vardan Papikyan bei Unsplash