Créez votre propre extension chrome à l'aide d'Angular 2 & TypeScript

Ce tutoriel montre la construction d'une extension chromée à l'aide d'Angular 2 et de TypeScript pour gérer les signets directement dans la nouvelle page d'onglet. Il améliore à la fois la fonctionnalité et l'attrait visuel de la nouvelle expérience par défaut.

Caractéristiques de clé:

• exploite Angular 2 et TypeScript pour une base de code structurée et maintenable.
• intègre les signets directement dans la nouvelle page d'onglet, offrant une expérience utilisateur personnalisée.
• fournit un environnement de développement rationalisé à l'aide d'un éditeur de texte, de NPM et d'un compte de développeur Google (pour la publication).
• utilise l'architecture basée sur les composants d'Angular 2, en commençant par un composant de signet simple et en s'étendant à un composant de liste pour gérer plusieurs signets.
• utilise les services angulaires et le stockage local pour gérer l'état d'application et persister les données de budget entre les sessions.
• comprend une icône d'action du navigateur pour ajouter la page actuelle aux signets.
• Remplace la nouvelle page d'onglet par défaut par un gestionnaire de signets personnalisé.
• couvre les tests, l'emballage et la préparation de la distribution de la boutique en ligne Chrome, garantissant une configuration correcte de manifest.json.

Structure et configuration du projet:

Le projet est initié en créant un répertoire et en le remplissant avec des fichiers essentiels: tsconfig.json (Configuration du compilateur TypeScript), package.json (dépendances et scripts NPM) et manifest.json (métadonnées d'extension de Chrome). Le fichier package.json comprend des dépendances Angular 2 et des scripts NPM pour la configuration du serveur de compilation et de développement. Le fichier initial manifest.json comprend des informations d'extension de base.

Le tutoriel vous guide ensuite en créant les composants angulaires: bookmark.component.ts (pour les signets individuels) et list.component.ts (pour gérer la liste des signets). Ces composants interagissent avec A list.service.ts pour gérer la persistance des données à l'aide du stockage local. Le bookmark.component comprend un modèle HTML (bookmark.html) pour rendre les signets individuels, permettre l'édition et la suppression. Le list.component utilise un modèle (list.html) pour afficher la liste des signets, en utilisant *ngFor pour itérer les signets. Les données de signet par défaut sont fournies dans list.data.constant.ts.

Intégration d'extension chromée:

Le tutoriel explique comment ajouter la fonctionnalité d'extension chromée:

• Icône d'action du navigateur: Une icône est ajoutée à la barre d'outils Chrome pour permettre aux utilisateurs d'ajouter la page Web actuellement consultée comme un signet. Cette fonctionnalité est implémentée à l'aide de l'API Chrome browserAction et un script eventPage.ts.
• Nouveau onglet Remplacement: La page de nouveau onglet par défaut est remplacée par le gestionnaire de signets personnalisé construit avec Angular. Ceci est configuré dans le fichier manifest.json à l'aide de la propriété "chrome_url_overrides".

Le fichier manifest.json est mis à jour pour inclure les icônes, les détails de l'action du navigateur, la stratégie de sécurité du contenu, les autorisations (pour accéder à l'onglet actif) et la remplacement de la nouvelle page d'onglet.

Test et distribution:

Le didacticiel se termine par des instructions sur le test de l'extension dans Chrome à l'aide de la fonction "Charger un extension déballée" dans chrome://extensions/. Il fournit également des scripts NPM pour copier les bibliothèques nécessaires et compresser le projet dans un fichier .zip pour la distribution via le Chrome Web Store.

Améliorations supplémentaires:

Le tutoriel suggère plusieurs domaines à améliorer, notamment en ajoutant des fonctionnalités (par exemple, des schémas de couleurs, une importation de signets), des améliorations UX, des tests d'unité et de bout en bout, un processus de création plus robuste et la publication dans la boutique Web Chrome. Il fournit également des liens vers des ressources pertinentes pour un apprentissage ultérieur. Une section FAQ complète aborde les questions courantes liées à la construction d'extensions de chrome avec Angular 2.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!