Tutoriel Cohere : Création de votre extension Chrome pour la synthèse d'articles

Boostez votre lecture : Tutoriel sur l'extension Chrome Cohere pour la synthèse d'articles

Salutations ! Vous êtes-vous déjà retrouvé à court de temps mais absolument besoin de lire un long article ? Ne vous inquiétez pas ! Dans ce tutoriel unique de l'application Coherent, découvrez les secrets de la création d'une extension Google Chrome sur mesure pour condenser n'importe quel article, réduisant ainsi considérablement le temps de lecture. Alors, laissez la magie opérer !

Veuillez noter qu'une compréhension de base de HTML, CSS et JavaScript est requise - mais bon, rien de trop décourageant à apprendre rapidement !

Comment créer une extension Chrome ?

Nous commencerons par créer une extension en mettant en place les fichiers appropriés. Ma structure de fichiers ressemble à ceci :

• le répertoire popup contient un fichier .html pour la fenêtre contextuelle de l'extension, nous ne l'utiliserons pas beaucoup, je mettrai simplement le nom de l'extension ici.
• le répertoire scripts contient un fichier .js pour la logique de l'extension - générer des boutons et synthétiser.
• le répertoire styles comprend un fichier .css pour le style de l'extension.
• manifest.json est un fichier qui contient toutes les informations sur l'extension. Nous commencerons par cela.

Fichier Manifest

Comme mentionné, manifest.json contient tous les détails vitaux concernant l'extension dans un format JSON. Les éléments suivants sont cruciaux :

• css - Chemin vers notre fichier css
• js - Chemin vers notre fichier js
• matches - Liste des domaines où nous voulons utiliser notre extension (par exemple : medium.com, towardsai.net, towardsdatascience.com, levelup.gitconnected.com, mais n'hésitez pas à ajouter d'autres domaines si nécessaire).

Charger l'extension dans le navigateur

Pour charger l'extension, accédez aux paramètres de votre navigateur > extensions. Activez le mode développeur et cliquez sur le bouton "Charger une extension décompactée" dans le coin supérieur gauche. Sélectionnez le dossier de votre extension, et c'est parti !

Allons coder !

Dans le fichier index.html, j'ajouterai un modèle HTML basique avec le nom de l'extension.

index.css

Ici, j'ajouterai des styles pour les boutons utilisés pour la synthèse. Bien qu'ils ne soient peut-être pas esthétiquement plaisants pour le moment, ils sont fonctionnels. J'expliquerai les classes nécessaires dans la section suivante.

index.js

Dans cette partie, nous implémenterons la logique principale de l'extension. Tout d'abord, nous créerons une fonction pour générer des boutons pour la synthèse. Nous utiliserons document.createElement pour créer des boutons et document.body.appendChild pour les ajouter à la page Web. Des écouteurs d'événements seront ajoutés à ces boutons, de sorte que lorsque nous cliquons dessus, ils déclenchent la fonction de synthèse.

Nous devons positionner le bouton à côté de la photo de l'utilisateur. Cela nécessite d'ajouter le bouton à deux emplacements : la barre latérale pour le mode bureau et la barre inférieure pour mobile. Nous utiliserons les outils de développement pour obtenir les sélecteurs d'éléments pour ces composants. Selon que nous accédons à la page principale ou à un article directement, les sélecteurs varieront légèrement, ce que nous détaillerons dans le guide.

Nous créerons trois fonctions essentielles pour notre tutoriel - loadButtons, prediction, et cohereReq.

Chargement des Boutons

Les boutons doivent se charger lorsque la page se charge avec succès, sauf sur la page d'accueil. Pour la page principale, il est plus logique de les charger en fonction de l'interaction de l'utilisateur, comme un clic ou un événement de défilement, puisque l'événement onload ne se déclenche pas ici. Mettons cela en place :

window.onload = function() {
    // Votre logique de chargement de boutons ici...
};

Logique de Synthèse

Ensuite, nous implémenterons les fonctions de synthèse. Nous utiliserons la fonction cohereReq pour obtenir le résumé de l'API Cohere.

Maintenant, extrayons des données de la page et invoquons la fonction cohereReq. Cela sera exécuté dans la fonction prediction.

Testons !

Maintenant, explorons Medium et testons notre extension !

Actuellement, notre sortie est limitée à la console. Cela est intentionnellement conçu pour laisser de la place à vos améliorations. Défi privé pour améliorer la performance du modèle en révisant l'invite ! Créez une fenêtre contextuelle visuellement attrayante dans popup.html, et affichez les résultats dans la fenêtre contextuelle avec un indicateur de chargement en attendant la réponse. Vous pouvez même modifier le bouton principal pour une meilleure expérience utilisateur. Montrez vos résultats sur notre serveur Discord dans le canal de texte du tutoriel. J'attends avec impatience de voir vos créations incroyables !

Transformez votre expérience de navigation !

Créez facilement une extension Chrome de synthèse CoHERE qui améliore votre expérience de lecture. Découvrez le monde passionnant des tutoriels CoHERE et apprenez à créer une extension Chrome de synthèse alimentée par l'IA comme un pro ! Embarquez pour un voyage à travers les hackathons d'IA de lablab.ai, transformant vos brillantes idées d'application en réalité en seulement 7 jours. Plongez dans un domaine d'applications Cohere riches et innovantes pour élever encore plus vos compétences.