Erstellen Sie Ihre eigene Chromverlängerung mit Angular 2 & TypyScript

Dieses Tutorial zeigt, dass das Erstellen einer Chromverlängerung mit Angular 2 und TypeScript erstellt wird, um Lesezeichen direkt auf der neuen Registerkartenseite zu verwalten. Es verbessert sowohl die Funktionalität als auch die visuelle Anziehungskraft des Standard -Registerkartenerlebnisses.

Schlüsselmerkmale:

• nutzt Angular 2 und TypeScript für eine strukturierte und wartbare Codebasis.
• Integriert Lesezeichen direkt in die neue Registerkarte und bietet eine benutzerdefinierte Benutzererfahrung.
• bietet eine optimierte Entwicklungsumgebung mit einem Texteditor, NPM und einem Google Developer -Konto (zum Veröffentlichen).
• verwendet die Komponenten-basierte Architektur von Angular 2, beginnt mit einer einfachen Lesezeichenkomponente und erweitert sich auf eine Listenkomponente für die Verwaltung mehrerer Lesezeichen.
• Verwendet Angular Services und Lokalspeicher, um den Anwendungsstatus zu verwalten und Lesezeichen über Sitzungen hinweg zu bestehen.
• Enthält ein Browser -Aktionssymbol, um die aktuelle Seite zu Lesezeichen hinzuzufügen.
• ersetzt die Standard -Registerkarte Standard durch einen benutzerdefinierten Lesezeichen -Manager.
• deckt Tests, Verpackungen und Vorbereitung auf die Verteilung von Chrome -Webspeichern ab, um die korrekte Konfiguration von manifest.json zu gewährleisten.

Projektstruktur und Setup:

Das Projekt wird durch das Erstellen eines Verzeichnisses und die Füllung mit wesentlichen Dateien initiiert: tsconfig.json (TypeScript -Compiler -Konfiguration), package.json (NPM -Abhängigkeiten und -Skripts) und manifest.json (Chrome -Erweiterungsmetadaten). Die Datei package.json enthält Angular 2 -Abhängigkeiten und NPM -Skripte für die Einrichtung von Kompilierungs- und Entwicklungsserver. Die Anfangsdatei manifest.json enthält grundlegende Erweiterungsinformationen.

Das Tutorial führt Sie dann durch das Erstellen der Winkelkomponenten: bookmark.component.ts (für einzelne Lesezeichen) und list.component.ts (zum Verwalten der Lesezeichenliste). Diese Komponenten interagieren mit einem list.service.ts, um die Datenpersistenz mithilfe des lokalen Speichers zu verarbeiten. Das bookmark.component enthält eine HTML -Vorlage (bookmark.html) zum Rendern einzelner Lesezeichen und der Bearbeitung und Löschung. Der list.component verwendet eine Vorlage (list.html), um die Lesezeichenliste anzuzeigen, wobei *ngFor über die Lesezeichen iteriert wird. Standard -Lesezeichendaten finden Sie in list.data.constant.ts.

Chromerweiterungsintegration:

Das Tutorial erläutert, wie man Chrom -Erweiterungsfunktionalität hinzufügt:

• Browser -Aktions -Symbol: Ein Symbol wird zur Chrome -Symbolleiste hinzugefügt, mit der Benutzer die aktuell angezeigte Webseite als Lesezeichen hinzufügen können. Diese Funktionalität wird mithilfe der Chrome browserAction API und einem eventPage.ts -Skript implementiert.
• Neue Registerkartenüberschreibung: Die Standard -Registerkartenseite wird durch den mit Angular erstellten benutzerdefinierten Lesezeichen -Manager ersetzt. Dies wird in der Datei manifest.json mit der Eigenschaft "chrome_url_overrides" konfiguriert.

Die Datei manifest.json wird aktualisiert, um Symbole, Browser -Aktionsdetails, Inhaltssicherheitsrichtlinien, Berechtigungen (für den Zugriff auf die Registerkarte aktiver) und die Überschreibung für die neue Registerkartenseite enthalten.

.

Test und Verteilung:

chrome://extensions/ Das Tutorial schließt mit Anweisungen zum Testen der Erweiterung innerhalb von Chrome unter Verwendung der Funktion "Expacked Extension" in .zip. Es bietet auch NPM -Skripte, um die erforderlichen Bibliotheken zu kopieren und das Projekt in eine

-Datei für die Verteilung über den Chrome Web Store zu komprimieren.

Weitere Verbesserungen:

Das Tutorial schlägt mehrere Verbesserungsbereiche vor, einschließlich Hinzufügen von Funktionen (z. B. Farbschemata, Lesezeichen-Import), UX-Verbesserungen, Einheiten- und End-to-End-Tests, einem robusteren Build-Prozess und Veröffentlichung im Chrome-Webladen. Es bietet auch Links zu relevanten Ressourcen für weiteres Lernen. Ein umfassender FAQ -Abschnitt befasst sich mit häufigen Fragen zum Aufbau von Chromerweiterungen mit Angular 2.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre eigene Chromverlängerung mit Angular 2 & TypyScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!