Ein neuer Weg für die Entwicklung von Chrome-Erweiterungen

In diesem Beitrag möchten wir Ihnen einige wesentliche Verbesserungen beim Einstieg in die Chrome-Erweiterung vorstellen und Ihnen einige Möglichkeiten vorstellen, wie Sie diesen Traum erfüllen können.

Der alte Leitfaden

Bisher war das Tutorial „Erste Schritte mit Chrome-Erweiterungen“ ein einfaches Beispiel für eine Erweiterung, bei der die Hintergrundfarbe der aktuellen Seite geändert wurde, wenn der Nutzer auf eine Schaltfläche im Pop-up der Erweiterung klickte. Außerdem war eine Seite mit Optionen enthalten, auf der Sie eine von vier Farben auswählen konnten.

In diesem einfachen Beispiel wurde nicht gezeigt, wie beliebte Funktionen von realen Erweiterungen hinzugefügt werden können. Es war Zeit für eine Umgestaltung.

Ein neuer Ansatz

Wir wissen, dass sich Entwickler bei der Einarbeitung in Chrome-Erweiterungen auf unsere Dokumentation verlassen. Unser Ziel ist es, einen Weg zu finden, der barrierefrei, für Anfänger geeignet und relevant ist. Anstatt zu versuchen, das vorhandene Anleitungsbeispiel zu verbessern, haben wir beschlossen, von vorn anzufangen.

Die neue und verbesserte Sammlung „Erste Schritte“:

Erweiterungen – Grundlagen
Hier werden einige grundlegende Konzepte der Entwicklung von Chrome-Erweiterungen wie Webtechnologien und häufig verwendete Erweiterungskomponenten beschrieben. Darüber hinaus enthält er Hinweise dazu, was Sie beachten sollten, wenn Sie eine Erweiterung im Chrome Web Store entwerfen und vertreiben.
Grundlagen der Entwicklung
Durch die Erstellung eines Beispiels für Hallo Erweiterungen wird der Workflow für die Entwicklung von Erweiterungen vorgestellt. Darin erfahren Sie, wie Sie die Erweiterung während der Entwicklung laden, Protokolle und Fehler finden, eine Projektstruktur auswählen und Typescript verwenden.
Anleitung zur Lesezeit
Es ist gut zu wissen, wie viel Zeit wir brauchen, um einen Artikel zu Ende zu lesen. Im Abschnitt „Lesezeit“ erfahren Sie, wie Sie auf jeder Dokumentationsseite für Erweiterungen ein Element mit der geschätzten Lesezeit einfügen.
Anleitung für den Konzentrationsmodus
Damit wir uns auf die wichtigsten Informationen konzentrieren können, lässt sich eine Seite übersichtlicher gestalten. Im Konzentrationsmodus wird gezeigt, wie du den Stil der Seite änderst und ein paar ablenkende Elemente ausblendest.
Anleitung zum Tab-Manager
Wenn Sie sich über die Entwicklung von Erweiterungen informieren, kann es sein, dass Sie viele Dokumentationstabs in mehreren Fenstern haben. Im Tab-Manager werden die Tabs der Chrome-Erweiterung und der Dokumentation im Chrome Web Store organisiert.

In diesen Anleitungen erfahren Sie nicht nur, wie Sie Erweiterungen aus der Praxis erstellen, sondern erhalten auch Tipps und Best Practices zur Entwicklung. Außerdem wird durch die Verwendung dieser Erweiterungen die Nutzung der Dokumentation zu Erweiterungen verbessert.

Ablauf

Jede Anleitung umfasst die folgenden Abschnitte:

  • Die Aufgabe, die die Erweiterung ausführen soll.
  • Die Lektionen, die behandelt werden.
  • Was Sie wissen sollten, bevor Sie beginnen.
  • Schritt-für-Schritt-Anleitung zum Erstellen der Erweiterung
  • Erweiterung laden und testen

Falls Sie sich einer Herausforderung stellen möchten, haben wir einen Abschnitt mit Ideen dazu eingefügt, wie Sie Ihre Erweiterung anpassen oder andere Funktionen hinzufügen können.

Wir brauchen Ihre Hilfe

Wir freuen uns, von dir zu hören. Wenn Sie in diesen Leitfäden etwas Falsches oder Unklarheiten sehen, melden Sie es bitte über unser GitHub-Repository.

Wir sind der Ansicht, dass dieser neue Startleitfaden eine deutliche Verbesserung gegenüber dem bisherigen Leitfäden darstellt, aber damit sind wir nicht aufhören. Wir arbeiten kontinuierlich an der Verbesserung und Erweiterung unserer Dokumentation, um allen Entwicklern von Erweiterungen einen noch besseren Service bieten zu können.


Foto von Vardan Papikyan auf Unsplash